Files
amdruzstvo/quarter/index-3.html
2025-08-05 10:59:30 +02:00

4607 lines
204 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Quarter - Real Estate HTML Template</title>
<link
rel="shortcut icon"
href="assets/img/favicon.png"
type="image/x-icon"
>
<link rel="stylesheet" href="assets/css/font-icons.css" >
<link rel="stylesheet" href="assets/css/nice-select2.css" >
<link rel="stylesheet" href="assets/css/animate.css" >
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" >
<link rel="stylesheet" href="assets/css/glightbox.css" >
<link rel="stylesheet" href="assets/css/style.css" >
</head>
<body class="overflow-x-hidden">
<!-- header area start -->
<header class="absolute top-0 left-0 w-full z-xxl">
<!-- header top -->
<div class="bg-transparent border-b border-border-color-3">
<div class="container text-white text-13px md:text-sm font-bold">
<div
class="flex justify-center md:justify-between items-center flex-wrap md:flex-nowrap"
>
<div class="flex justify-center md:block pt-2 md:pt-0">
<ul
class="basis-full md:basis-auto flex gap-6 lg:gap-9 items-center"
>
<li>
<a
class="hover:text-secondary-color"
href="mailto:info@webmail.com?Subject=Flower%20greetings%20to%20you"
><i
class="icon-mail text-secondary-color font-bold mr-0.5"
></i>
info@webmail.com</a
>
</li>
<li>
<a class="hover:text-secondary-color" href="locations.html"
><i
class="icon-placeholder text-secondary-color font-bold mr-0.5"
></i>
15/A, Nest Tower, NYC</a
>
</li>
</ul>
</div>
<div
class="basis-full md:basis-auto flex justify-center md:block py-5px md:py-0"
>
<ul class="text flex items-center gap-15px pt-10px">
<li class="pr-7 relative group pb-10px">
<a href="#" class="language relative"> English </a>
<ul
class="py-7px bg-white w-50 shadow-box-shadow-4 absolute right-5 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl text-paragraph-color text-sm lg:text-base font-normal"
>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>Arabic</a
>
</li>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>Bengali</a
>
</li>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>Chinese</a
>
</li>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>English</a
>
</li>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>French</a
>
</li>
<li>
<a class="whitespace-nowra px-15px py-2" href="#"
>Hindi</a
>
</li>
</ul>
</li>
<li class="pb-10px">
<a href="https://www.facebook.com" title="Facebook"
><i class="fab fa-facebook-f font-bold"></i
></a>
</li>
<li class="pb-10px">
<a href="https://www.x.com" title="Twitter"
><i class="fab fa-twitter font-bold"></i
></a>
</li>
<li class="pb-10px">
<a href="https://www.instagram.com" title="Instagram"
><i class="fab fa-instagram font-bold"></i
></a>
</li>
<li class="pb-10px">
<a href="https://www.dribbble.com" title="Dribbble"
><i class="fab fa-dribbble font-bold"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- navbar main -->
<div
class="sticky-header sticky-secondary z-xl bg-transparent transition-all duration-700"
>
<div
class="container flex flex-row justify-between items-center relative py-7 xl:py-21px"
>
<!-- logo area -->
<div class="mt-10px mb-22px md:mt-0 md:mb-0 leading-1">
<a href="index.html">
<img src="./assets/img/logo-2.png" alt="" >
</a>
</div>
<nav class="flex-grow hidden xl:block">
<ul class="flex items-center justify-end gap-15px xl:gap-5">
<!-- item 1 -->
<li class="relative group">
<a
href="#"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>Home <span class="text-sm font-extrabold -ml-0.5">+</span></a
>
<!-- dropdown -->
<ul
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index.html"
>Home Style 01</a
>
<img
src="./assets/img/home-demos/home-1.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-2.html"
>Home Style 02</a
>
<img
src="./assets/img/home-demos/home-2.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-3.html"
>Home Style 03</a
>
<img
src="./assets/img/home-demos/home-3.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-4.html"
>Home Style 04</a
>
<img
src="./assets/img/home-demos/home-4.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2 relative"
href="index-5.html"
><span
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
>video</span
>
Home Style 05</a
>
<img
src="./assets/img/home-demos/home-5.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-6.html"
>Home Style 06</a
>
<img
src="./assets/img/home-demos/home-6.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-7.html"
>Home Style 07</a
>
<img
src="./assets/img/home-demos/home-7.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-8.html"
>Home Style 08</a
>
<img
src="./assets/img/home-demos/home-8.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-9.html"
>Home Style 09</a
>
<img
src="./assets/img/home-demos/home-9.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2 relative"
href="index-10.html"
><span
class="text-10px uppercase text-white bg-secondary-color px-3px absolute left-5 -top-1 rounded-sm"
>map</span
>
Home Style 10</a
>
<img
src="./assets/img/home-demos/home-10.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
<li class="group/nested relative">
<a
class="whitespace-nowrap px-30px py-2"
href="index-11.html"
>Home Style 11</a
>
<img
src="./assets/img/home-demos/home-11.jpg"
alt="#"
class="w-130px absolute -bottom-2 -right-3 shadow-box-shadow-3 opacity-0 translate-y-1 invisible transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0"
>
</li>
</ul>
</li>
<!-- item 2 -->
<li class="relative group">
<a
href="#"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>About
<span class="text-sm font-extrabold -ml-0.5">+</span></a
>
<!-- dropdown -->
<ul
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="about.html"
>About</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="service.html"
>Services</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="service-details.html"
>Service Details</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="portfolio.html"
>Portfolio</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="portfolio-2.html"
>Portfolio - 02</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="portfolio-details.html"
>Portfolio Details</a
>
</li>
<li>
<a class="whitespace-nowrap px-30px py-2" href="team.html"
>Team</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="team-details.html"
>Team Details</a
>
</li>
<li>
<a class="whitespace-nowrap px-30px py-2" href="faq.html"
>FAQ</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="locations.html"
>Google Map Locations</a
>
</li>
</ul>
</li>
<!-- item 3 -->
<li class="relative group">
<a
href="#"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>Property
<span class="text-sm font-extrabold -ml-0.5">+</span></a
>
<!-- dropdown -->
<ul
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
>
<li>
<a class="whitespace-nowrap px-30px py-2" href="shop.html"
>Property Grid</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="shop-list.html"
>Property List</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="shop-grid.html"
>Property No Sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="shop-left-sidebar.html"
>Property Left sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="shop-right-sidebar.html"
>Property right sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="product-details.html"
>Property details
</a>
</li>
<li class="relative group/nested">
<a class="whitespace-nowrap px-30px py-2" href="#"
>Other Pages
<span
class="absolute top-1/2 -translate-y-1/2 right-3 group-hover/nested:text-secondary-color"
>&gt;&gt;</span
>
</a>
<!-- dropdown -->
<ul
class="py-15px border-t-[5px] border-secondary-color w-dropdown shadow-box-shadow-4 absolute left-full top-0 opacity-0 invisible translate-y-[5px] transition-all duration-300 group-hover/nested:opacity-100 group-hover/nested:visible group-hover/nested:translate-y-0 bg-white"
>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="cart.html"
>Cart</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="wishlist.html"
>Wishlist</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="checkout.html"
>Checkout</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="order-tracking.html"
>Order Tracking</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="account.html"
>My Account</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="login.html"
>Sign in</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="register.html"
>Register</a
>
</li>
</ul>
</li>
</ul>
</li>
<!-- item 4 -->
<li class="relative group">
<a
href="#"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>News <span class="text-sm font-extrabold -ml-0.5">+</span></a
>
<!-- dropdown -->
<ul
class="py-15px border-t-[5px] border-secondary-color bg-white w-dropdown shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 z-xl"
>
<li>
<a class="whitespace-nowrap px-30px py-2" href="blog.html"
>News</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="blog-grid.html"
>News Grid</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="blog-left-sidebar.html"
>News Left sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="blog-right-sidebar.html"
>News Right sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-30px py-2"
href="blog-details.html"
>News details</a
>
</li>
</ul>
</li>
<!-- item 5 -->
<li class="group">
<a
href="#"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>Pages
<span class="text-sm font-extrabold -ml-0.5">+</span></a
>
<!-- dropdown -->
<ul
class="container w-full px-0 py-15px border-t-[5px] border-secondary-color bg-white shadow-box-shadow-4 absolute left-0 top-full opacity-0 invisible translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:visible group-hover:-translate-y-4 grid grid-cols-4 z-xl"
>
<li class="pr-3 pt-3 pl-30px">
<ul>
<li>
<a
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
href="#"
>Inner Pages</a
>
</li>
<li>
<ul class="py-15px">
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="portfolio.html"
>Portfolio</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="portfolio-2.html"
>Portfolio - 02</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="portfolio-details.html"
>Portfolio Details</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="team.html"
>Team</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="team-details.html"
>Team Details</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="faq.html"
>FAQ</a
>
</li>
</ul>
</li>
</ul>
</li>
<li class="pr-3 pt-3 pl-30px">
<ul>
<li>
<a
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
href="#"
>Inner Pages</a
>
</li>
<li>
<ul class="py-15px">
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="history.html"
>History</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="add-listing.html"
>Add Listing</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="locations.html"
>Google Map Locations</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="404.html"
>404</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="contact.html"
>Contact</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="coming-soon.html"
>Coming Soon</a
>
</li>
</ul>
</li>
</ul>
</li>
<li class="pr-3 pt-3 pl-30px">
<ul>
<li>
<a
class="whitespace-nowrap px-10px py-6px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
href="#"
>Shop Pages</a
>
</li>
<li>
<ul class="py-15px">
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="shop.html"
>Shop</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="shop-left-sidebar.html"
>Shop Left sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="shop-right-sidebar.html"
>Shop right sidebar</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="shop-grid.html"
>Shop Grid</a
>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="product-details.html"
>Shop details
</a>
</li>
<li>
<a
class="whitespace-nowrap px-10px py-2"
href="cart.html"
>Cart</a
>
</li>
</ul>
</li>
</ul>
</li>
<li class="pr-3 pt-3 pl-30px">
<a
class="whitespace-nowrap p-10px bg-section-bg-1 border-b !border-dashed border-border-dashed w-full"
href="shop.html"
><img
src="./assets/img/banner/menu-banner-1.jpg"
alt=""
class="w-full inline-block"
></a>
</li>
</ul>
</li>
<!-- item 6 -->
<li>
<a
href="contact.html"
class="text-lg xl:text-15px 2xl:text-lg text-white hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px"
>Contact
</a>
</li>
</ul>
</nav>
<!-- header right -->
<div>
<ul class="flex items-center gap-10px">
<li class="hidden xl:block">
<a
href="add-listing.html"
class="px-30px py-14px ml-43px text-lg xl:text-15px 2xl:text-lg bg-secondary-color hover:bg-section-bg-1 font-semibold text-white hover:text-primary-color inline-block"
>Add Listing</a
>
</li>
<li class="block xl:hidden">
<div
class="show-drawer d-xl-none h-50px w-50px text-heading-color shadow-box-shadow-1 flex justify-center items-center transition-all duration-300 relative bg-white"
>
<a href="#ltn__utilize-drawer " class="utilize-toggle">
<svg viewBox="0 0 800 600">
<path
d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
id="top"
></path>
<path d="M300,320 L540,320" id="middle"></path>
<path
d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
id="bottom"
transform="translate(480, 320) scale(1, -1) translate(-480, -318) "
></path>
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="drawer-container mobile-menu-container">
<div
class="drawer-overlay fixed top-0 left-0 w-full h-full bg-black -z-1 close-drawer opacity-0 transition-all duration-300 invisible cursor-zoom-out block xl:hidden"
></div>
<div
class="drawer mobile-menu fixed top-0 -left-[300px] xs:-left-[400px] px-5 xs:px-10 py-50px w-300px xs:w-100 h-full transition-all duration-500 shadow-dropdown-secodary bg-whiteColor z-high block xl:hidden bg-white"
>
<div class="pr-15px overflow-auto h-full">
<!-- mobile menu wrapper -->
<div>
<!-- mobile logo area -->
<div
class="flex justify-between items-center border-b border-border-primary pt-3px pb-10px mb-25px"
>
<div>
<a href="index.html">
<img src="./assets/img/logo.png" alt="" >
</a>
</div>
<div>
<button class="close-drawer text-black text-3xl px-15px py-2">
×
</button>
</div>
</div>
<!-- search input -->
<div class="mb-50px">
<form class="w-full relative">
<input
type="text"
placeholder="Search..."
class="text-sm text-paragraph-color pl-5 pr-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none"
>
<button
type="submit"
class="absolute top-1/2 -translate-y-1/2 right-7 text-heading-color"
>
<i class="icon-search text-lg font-bold"></i>
</button>
</form>
</div>
<!-- mobile menu accordions -->
<div
class="border-b border-border-primary dark:border-borderColor-dark pb-8"
>
<ul class="accordion-container">
<li class="accordion mt-4">
<!-- accordion header -->
<div
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
Home
<button class="px-3 h-full">
<span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
></span
><span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
></span>
</button>
</div>
<!-- accordion content -->
<div
class="accordion-content h-0 overflow-hidden transition-all duration-500"
>
<div class="content-wrapper pl-15px">
<ul>
<li class="mt-4">
<!-- accordion header -->
<a
href="index.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 01</a
>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<a
href="index-2.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 02</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-3.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 03</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-4.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 04</a
>
</li>
<li class="mt-4 relative">
<!-- accordion header -->
<a
href="index-5.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
><span
class="text-10px uppercase text-white bg-secondary-color px-3px absolute -left-2 -top-3 rounded-sm"
>video</span
>
Home Style 05</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-6.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 06</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-7.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 07</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-8.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 08</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-9.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 09</a
>
</li>
<li class="mt-4 relative">
<!-- accordion header -->
<a
href="index-10.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
><span
class="text-10px uppercase text-white bg-secondary-color px-3px absolute -left-2 -top-3 rounded-sm"
>map</span
>
Home Style 10</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="index-11.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Home Style 11</a
>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<div
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
About
<button class="px-3 h-full">
<span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
></span
><span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
></span>
</button>
</div>
<!-- accordion content -->
<div
class="accordion-content h-0 overflow-hidden transition-all duration-500"
>
<div class="content-wrapper pl-15px">
<ul>
<li class="mt-4">
<!-- accordion header -->
<a
href="about.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>About1</a
>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<a
href="service.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Services</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="service-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Service Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Portfolio</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio-2.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>
Portfolio - 02</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Portfolio Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="team.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Team</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="team-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Team Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="faq.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>FAQ</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="locations.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Google Map Locations</a
>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<div
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
Property
<button class="px-3 h-full">
<span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
></span
><span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
></span>
</button>
</div>
<!-- accordion content -->
<div
class="accordion-content h-0 overflow-hidden transition-all duration-500"
>
<div class="content-wrapper pl-15px">
<ul>
<li class="mt-4">
<!-- accordion header -->
<a
href="shop.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Property Grid</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="shop-list.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Property List</a
>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<a
href="shop-grid.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Property No Sidebar</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="shop-left-sidebar.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Property Left sidebar</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="shop-right-sidebar.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Property right sidebar</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="product-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>
Property details
</a>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="cart.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Cart</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="wishlist.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Wishlist</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="checkout.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Checkout</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="order-tracking.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Order Tracking</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="account.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>My Account</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="login.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Sign in</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="register.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Register</a
>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<div
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
News
<button class="px-3 h-full">
<span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
></span
><span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
></span>
</button>
</div>
<!-- accordion content -->
<div
class="accordion-content h-0 overflow-hidden transition-all duration-500"
>
<div class="content-wrapper pl-15px">
<ul>
<li class="mt-4">
<!-- accordion header -->
<a
href="blog.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>News</a
>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<a
href="blog-grid.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>News Grid</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="blog-left-sidebar.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>News Left sidebar</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="blog-right-sidebar.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>News Right sidebar</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="blog-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>
News details</a
>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion mt-4">
<!-- accordion header -->
<div
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
Pages
<button class="px-3 h-full">
<span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75"
></span
><span
class="w-[10px] h-0.5 bg-gray1 block dark:bg-whiteColor bg-opacity-75 rotate-90 -mt-[2px] transition-all duration-500"
></span>
</button>
</div>
<!-- accordion content -->
<div
class="accordion-content h-0 overflow-hidden transition-all duration-500"
>
<div class="content-wrapper pl-15px">
<ul>
<li class="mt-4">
<!-- accordion header -->
<a
href="about.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>About</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="service.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Services</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="service-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Service Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Portfolio</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio-2.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>
Portfolio - 02</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="portfolio-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Portfolio Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="team.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Team</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="team-details.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Team Details</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="faq.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>FAQ</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="history.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>History</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="add-listing.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Add Listing</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="locations.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Google Map Locations</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="404.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>404</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="contact.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Contact</a
>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="coming-soon.html"
class="!leading-22px text-darkdeep1 text-sm lg:text-base hover:text-secondary-color"
>Coming Soon</a
>
</li>
</ul>
</div>
</div>
</li>
<li class="mt-4">
<!-- accordion header -->
<a
href="contact.html"
class="accordion-controller flex items-center justify-between cursor-pointer hover:text-secondary-color uppercase text-sm lg:text-base py-2 lg:py-2.5"
>
CONTACT</a
>
</li>
</ul>
</div>
<!-- my account -->
<div>
<ul class="mb-30px pb-5 pt-5px border-b border-border-primary">
<li class="group mt-4">
<!-- accordion header -->
<a href="account.html" class="text-sm lg:text-base">
<span
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px mr-3"
>
<i class="far fa-user"></i>
</span>
My Account
</a>
</li>
<li class="group mt-4">
<!-- accordion header -->
<a href="wishlist.html#" class="text-sm lg:text-base">
<span
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px mr-3"
>
<i class="far fa-heart"></i><sup class="pl-0.5">3</sup>
</span>
Wishlist
</a>
</li>
<li class="group mt-4">
<!-- accordion header -->
<a href="cart.html" class="text-sm lg:text-base">
<span
class="inline-block h-50px w-50px border-2 border-border-color-1 text-center leading-50px mr-3"
>
<i class="fas fa-shopping-cart"></i>
<sup>5</sup>
</span>
Shoping Cart
</a>
</li>
</ul>
</div>
<!-- Mobile menu social area -->
<div>
<ul class="flex gap-3 items-center pt-4">
<li>
<a
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
href="https://www.facebook.com"
><i class="fab fa-facebook-f leading-10"></i
></a>
</li>
<li>
<a
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
href="https://www.twiter.com"
><i class="fab fab fa-twitter leading-10"></i
></a>
</li>
<li>
<a
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
href="https://www.linkedin.com"
><i class="fab fa-linkedin leading-10"></i
></a>
</li>
<li>
<a
class="h-10 w-10 bg-section-bg-1 hover:bg-secondary-color hover:text-white text-center text-sm lg:text-base"
href="https://www.instagram.com"
><i class="fab fa-instagram leading-10"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area start -->
<!-- main body start -->
<main>
<!-- banner section -->
<section>
<!-- banner section -->
<div class="hero hero-primary overflow-hidden relative z-0">
<!-- overlay -->
<!-- Swiper -->
<div class="hero-slider-container swiper-container relative">
<div class="swiper primary-slider home-3">
<div class="swiper-wrapper">
<!-- Hero 1 -->
<div
class="swiper-slide relative z-0 pt-300px md:pt-50 pb-100px 4xl:h-screen 4xl:min-h-[800px] overflow-hidden flex flex-col justify-center bg-cover bg-center bg-no-repeat bg-[url('../img/slider/11.jpg')]"
>
<div
class="absolute top-0 left-0 w-full h-full bg-overlay z-20"
></div>
<div class="container w-full relative z-xl">
<div class="">
<!-- banner Left -->
<div
class="slide-animation flex flex-col justify-center items-center text-center"
>
<p
class="text-sm md:text-15px lg:text-base font-bold mb-5 text-white animated"
>
<i class="fas fa-home"></i>
Real Estate Agency
</p>
<h1
class="text-3xl md:text-40px lg:text-50px 4xl:text-65px text-white leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px font-bold mb-5 animated"
>
<span
class="leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px"
>
Find Your Dream <br >
House By Us
</span>
</h1>
<p
class="text-sm lg:text-base text-white mb-5 max-w-450px animated"
>
<span class="leading-25px lg:leading-1.8">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore.
</span>
</p>
<div class="mt-5 lg:mt-5 mb-30px xl:mb-0 animated">
<h5
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color bg-white hover:border-heading-color inline-block mr-15px"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="about.html"
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
>Make An Enquiry</a
>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Hero 2-->
<div
class="swiper-slide relative z-0 pt-300px md:pt-50 pb-100px 4xl:h-screen 4xl:min-h-[800px] overflow-hidden flex flex-col justify-center bg-cover bg-center bg-no-repeat bg-[url('../img/slider/12.jpg')]"
>
<div
class="absolute top-0 left-0 w-full h-full bg-overlay z-20"
></div>
<div class="container w-full relative z-xl">
<div class="">
<!-- banner Left -->
<div
class="slide-animation flex flex-col justify-center items-end text-end"
>
<p
class="text-sm md:text-15px lg:text-base font-bold mb-5 text-white animated"
>
<i class="fas fa-home"></i>
Real Estate Agency
</p>
<h1
class="text-3xl md:text-40px lg:text-50px 4xl:text-65px text-white leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px font-bold mb-5 animated"
>
<span
class="leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px"
>
Find Your Dream <br >
House By Us
</span>
</h1>
<p
class="text-sm lg:text-base mb-5 max-w-450px pr-15px xl:pr-30px border-r border-border-color-14 animated text-white"
>
<span class="leading-25px lg:leading-1.8">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore.
</span>
</p>
<div class="mt-5 lg:mt-5 mb-30px xl:mb-0 animated">
<h5
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color bg-white hover:border-heading-color inline-block mr-15px"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="about.html"
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
>Make An Enquiry</a
>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Hero 3 -->
<div
class="swiper-slide relative z-0 pt-300px md:pt-50 pb-100px 4xl:h-screen 4xl:min-h-[800px] overflow-hidden flex flex-col justify-center bg-cover bg-no-repeat bg-[url('../img/slider/13.jpg')]"
>
<div
class="absolute top-0 left-0 w-full h-full bg-overlay z-20"
></div>
<div class="container w-full relative z-xl">
<div class="">
<!-- banner Left -->
<div
class="slide-animation flex flex-col justify-center items-start text-start"
>
<p
class="text-sm md:text-15px lg:text-base font-bold mb-5 text-white animated"
>
<i class="fas fa-home"></i>
Real Estate Agency
</p>
<h1
class="text-3xl md:text-40px lg:text-50px 4xl:text-65px text-white leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px font-bold mb-5 animated"
>
<span
class="leading-30px md:leading-10 lg:leading-50px 4xl:leading-65px"
>
Find Your Dream <br >
House By Us
</span>
</h1>
<p
class="text-sm lg:text-base mb-5 max-w-450px pl-15px xl:pl-30px border-l border-border-color-14 animated text-white"
>
<span class="leading-25px lg:leading-1.8">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore.
</span>
</p>
<div class="mt-5 lg:mt-5 mb-30px xl:mb-0 animated">
<h5
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal transition-all duration-300 border border-secondary-color bg-white hover:border-heading-color inline-block mr-15px"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-primary-color z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="about.html"
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
>Make An Enquiry</a
>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden xl:block">
<div class="swiper-button-next !text-white">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev !text-white">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
>
<span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 1"
></span
><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"
tabindex="0"
role="button"
aria-label="Go to slide 2"
aria-current="true"
></span
><span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 3"
></span>
</div>
</div>
</div>
</div>
<!-- pinned select area -->
<div class="container mt-30 4xl:-mt-65px relative z-20">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-30px lg:gap-4 xl:gap-30px py-10 px-25px md:p-10 shadow-box-shadow-1 border border-border-color-1 bg-white"
>
<div>
<select class="selectize">
<option value="Choose Area" data-display="Select">
Choose Area
</option>
<option value="Chicago">Chicago</option>
<option value="London">London</option>
<option value="Los Angeles">Los Angeles</option>
<option value="New York">New York</option>
<option value="New Jersey">New Jersey</option>
</select>
</div>
<div>
<select class="selectize">
<option data-display="Select">Property Status</option>
<option>Open house</option>
<option>Rent</option>
<option>Sale</option>
<option>Sold</option>
</select>
</div>
<div>
<select class="selectize">
<option data-display="Select">Property Type</option>
<option>Apartment</option>
<option>Co-op</option>
<option>Condo</option>
<option>Single Family Home</option>
</select>
</div>
<div class="text-center">
<h5
class="uppercase text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="shop-right-sidebar.html"
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-heading-color leading-23px"
>Find Now</a
>
</h5>
</div>
</div>
</div>
</section>
<!-- services section -->
<section>
<div class="container pt-115px pb-90px">
<!-- section heading -->
<div class="text-center mb-50px">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 rounded-full inline-block font-semibold mb-5"
>
<span class="leading-1.3">Our Services</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
>
<span class="leading-1.3"> Our Main Focus </span>
</h2>
</div>
<!-- services cards -->
<div
class="service-cards flex flex-wrap justify-center items-center text-center -mx-15px"
>
<!-- card 1 -->
<div
class="service-card basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
>
<div
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
>
<div class="text-center mb-5">
<img
src="./assets/img/icons/icon-img/21.png"
alt=""
class="inline-block"
>
</div>
<h6
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
>
<a
class="hover:text-secondary-color leading-1.3 mb-1"
href="service-details.html"
>Buy a home</a
>
</h6>
<p class="text-sm mb-25px">
<span class="leading-1.8"
>over 1 million+ homes for sale available on the website, we
can match you with a house you will want to call home.</span
>
</p>
<div class="text-sm text-color-1 font-bold">
<a
class="find-service hover:text-secondary-color flex items-center justify-center"
href="service-details.html"
>Find A Home
<i class="flaticon-right-arrow inline-block leading-1"></i
></a>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
></span>
</div>
</div>
<!-- card 2 -->
<div
class="service-card active basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
>
<div
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
>
<div class="text-center mb-5">
<img
src="./assets/img/icons/icon-img/22.png"
alt=""
class="inline-block"
>
</div>
<h6
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
>
<a
class="hover:text-secondary-color leading-1.3 mb-1"
href="service-details.html"
>Rent a home</a
>
</h6>
<p class="text-sm mb-25px">
<span class="leading-1.8"
>over 1 million+ homes for sale available on the website, we
can match you with a house you will want to call home.</span
>
</p>
<div class="text-sm text-color-1 font-bold">
<a
class="find-service hover:text-secondary-color flex items-center justify-center"
href="service-details.html"
>Find A Home
<i class="flaticon-right-arrow inline-block leading-1"></i
></a>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
></span>
</div>
</div>
<!-- card 3 -->
<div
class="service-card basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px"
>
<div
class="border border-border-color-1 shadow-box-shadow-1 bg-white relative py-10 pb-35px px-30px transition-all duration-300"
>
<div class="text-center mb-5">
<img
src="./assets/img/icons/icon-img/23.png"
alt=""
class="inline-block"
>
</div>
<h6
class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold"
>
<a
class="hover:text-secondary-color leading-1.3 mb-1"
href="service-details.html"
>Sell a home</a
>
</h6>
<p class="text-sm mb-25px">
<span class="leading-1.8"
>over 1 million+ homes for sale available on the website, we
can match you with a house you will want to call home.</span
>
</p>
<div class="text-sm text-color-1 font-bold">
<a
class="find-service hover:text-secondary-color flex items-center justify-center"
href="service-details.html"
>Find A Home
<i class="flaticon-right-arrow inline-block leading-1"></i
></a>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 h-1 bg-secondary-color transition-all duration-300 block"
></span>
</div>
</div>
</div>
</div>
</section>
<!-- area properties section -->
<section>
<div class="bg-section-bg-1">
<div>
<div class="container pt-115px pb-90px">
<!-- section heading -->
<div class="text-center mb-50px">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize 1b-15px py-0.5 px-5 rounded-full inline-block font-semibold mb-5"
>
<span class="leading-1.3">Area Properties</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
>
<span class="leading-1.3"> Properties By Location </span>
</h2>
</div>
<div
class="properties-slider-container swiper-container relative -mx-15px"
>
<!-- apartment cards -->
<div class="swiper properties-slider static">
<div class="swiper-wrapper">
<!-- card 1 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group p-15px shadow-box-shadow-4 bg-white">
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/1.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full"
>
2 properties
</div>
</div>
<!-- card body -->
<div class="pt-25px px-5px pb-10px">
<ul class="mb-3">
<li class="text-sm lg:text-base">
<a
href="locations.html"
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center"
>
San Francisco</a
>
</li>
</ul>
<h4
class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Mission District Area</a
>
</h4>
<a
href="product-details.html"
class="text-sm lg:text-base text-secondary-color"
>
<span class="leading-1.8"
>View Property <i class="flaticon-right-arrow"></i
></span>
</a>
</div>
</div>
</div>
<!-- card 2 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group p-15px shadow-box-shadow-4 bg-white">
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/2.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full"
>
5 Properties
</div>
</div>
<!-- card body -->
<div class="pt-25px px-5px pb-10px">
<ul class="mb-3">
<li class="text-sm lg:text-base">
<a
href="locations.html"
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center"
>
New York</a
>
</li>
</ul>
<h4
class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Pacific Heights Area</a
>
</h4>
<a
href="product-details.html"
class="text-sm lg:text-base text-secondary-color"
>
<span class="leading-1.8"
>View Property <i class="flaticon-right-arrow"></i
></span>
</a>
</div>
</div>
</div>
<!-- card 3 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group p-15px shadow-box-shadow-4 bg-white">
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/3.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full"
>
9 Properties
</div>
</div>
<!-- card body -->
<div class="pt-25px px-5px pb-10px">
<ul class="mb-3">
<li class="text-sm lg:text-base">
<a
href="locations.html"
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center"
>
Sedona, Arizona</a
>
</li>
</ul>
<h4
class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Noe Valley Zones</a
>
</h4>
<a
href="product-details.html"
class="text-sm lg:text-base text-secondary-color"
>
<span class="leading-1.8"
>View Property <i class="flaticon-right-arrow"></i
></span>
</a>
</div>
</div>
</div>
<!-- card 4 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group p-15px shadow-box-shadow-4 bg-white">
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/2.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="text-13px leading-1.8 px-15px pt-6px pb-0.5 uppercase font-semibold absolute top-4 left-[10px] bg-white rounded-full"
>
5 Properties
</div>
</div>
<!-- card body -->
<div class="pt-25px px-5px pb-10px">
<ul class="mb-3">
<li class="text-sm lg:text-base">
<a
href="locations.html"
class="leading-1.8 lg:leading-1.8 hover:text-secondary-color flex gap-5px items-center"
>
New York</a
>
</li>
</ul>
<h4
class="text-17px md:text-lg lg:text-xl font-semibold text-heading-color mb-3"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Pacific Heights Area</a
>
</h4>
<a
href="product-details.html"
class="text-sm lg:text-base text-secondary-color"
>
<span class="leading-1.8"
>View Property <i class="flaticon-right-arrow"></i
></span>
</a>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px] block xl:hidden"
>
<span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 1"
></span
><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"
tabindex="0"
role="button"
aria-label="Go to slide 2"
aria-current="true"
></span
><span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 3"
></span>
</div>
<!-- navigation -->
<div class="hidden xl:block">
<div class="swiper-button-next bg-white z-1">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev bg-white z-1">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- featured appartments section -->
<section>
<div class="container pt-115px pb-90px modal-container">
<!-- section heading -->
<div class="text-center mb-50px">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize py-0.5 px-5 mb-5 rounded-full inline-block font-semibold"
>
<span class="leading-1.3">Properties</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
>
<span class="leading-1.3">Featured Listings </span>
</h2>
</div>
<div class="featured-apartments swiper-container relative -mx-15px">
<!-- apartment cards -->
<div class="swiper featured-apartments-slider2 static">
<div class="swiper-wrapper">
<!-- card 1 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="group border border-border-color-13 shadow-box-shadow-4"
>
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/1.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
>
<div
class="text-sm text-white flex justify-between items-center"
>
<a
href="locations.html"
class="hover:text-secondary-color"
><i class="flaticon-pin"></i> Belmont Gardens,
Chicago</a
>
<ul class="flex gap-10px">
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-camera pr-1 leading-1"></i>
4</a
>
</li>
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-film pr-1 leading-1"></i> 2</a
>
</li>
</ul>
</div>
</div>
<div
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] right-[18px]"
>
<span class="leading-5 sm:leading-25px block"
>for rent</span
>
</div>
</div>
<!-- card body -->
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
<h5
class="text-lg text-secondary-color font-semibold mb-5px"
>
<span class="leading-1.8">$34,900</span>
<label class="text-sm font-normal">/Month</label>
</h5>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>New Apartment Nice View</a
>
</h4>
<p class="text-sm mb-15px">
<span class="leading-1.8"
>Beautiful Huge 1 Family House In Heart Of
<br >Westbury. Newly Renovated With New Wood</span
>
</p>
<ul class="flex flex-wrap gap-15px py-4">
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
3<i class="flaticon-bed ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
2<i class="flaticon-clean ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li class="text-sm">
<p class="leading-1.8 font-bold">
3450<i
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
></i>
</p>
<p class="leading-1.8">square Ft</p>
</li>
</ul>
</div>
<!-- cart footer -->
<div
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
>
<div
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
>
<div class="flex gap-x-3">
<a href="team-details.html" class="w-10 h-10"
><img
src="./assets/img/blog/author.jpg"
alt=""
class="w-full h-full rounded-100%"
></a>
<div>
<h4
class="text-sm font-semibold text-heading-color mb-0"
>
<a
class="leading-1.3 hover:text-secondary-color"
href="team-details.html"
>William Seklo</a
>
</h4>
<span class="text-xs"> Estate Agents </span>
</div>
</div>
<ul class="flex gap-x-2">
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="1"
>
<i class="flaticon-expand leading-1"></i>
</button>
</li>
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="2"
>
<i class="flaticon-heart-1 leading-1"></i>
</button>
</li>
<li>
<a
href="product-details.html"
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
><i class="flaticon-add leading-1"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 2 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="group border border-border-color-13 shadow-box-shadow-4"
>
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/2.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
>
<div
class="text-sm text-white flex justify-between items-center"
>
<a
href="locations.html"
class="hover:text-secondary-color"
><i class="flaticon-pin"></i> Belmont Gardens,
Chicago</a
>
<ul class="flex gap-10px">
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-camera pr-1 leading-1"></i>
4</a
>
</li>
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-film pr-1 leading-1"></i> 2</a
>
</li>
</ul>
</div>
</div>
<div
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-secondary-color uppercase font-semibold absolute top-[15px] right-[18px]"
>
<span class="leading-5 sm:leading-25px block"
>for rent</span
>
</div>
</div>
<!-- card body -->
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
<h5
class="text-lg text-secondary-color font-semibold mb-5px"
>
<span class="leading-1.8">$34,900</span>
<label class="text-sm font-normal">/Month</label>
</h5>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Modern Apartments</a
>
</h4>
<p class="text-sm mb-15px">
<span class="leading-1.8"
>Beautiful Huge 1 Family House In Heart Of
<br >Westbury. Newly Renovated With New Wood</span
>
</p>
<ul class="flex flex-wrap gap-15px py-4">
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
3<i class="flaticon-bed ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
2<i class="flaticon-clean ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li class="text-sm">
<p class="leading-1.8 font-bold">
3450<i
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
></i>
</p>
<p class="leading-1.8">square Ft</p>
</li>
</ul>
</div>
<!-- cart footer -->
<div
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
>
<div
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
>
<div class="flex gap-x-3">
<a href="team-details.html" class="w-10 h-10"
><img
src="./assets/img/blog/author.jpg"
alt=""
class="w-full h-full rounded-100%"
></a>
<div>
<h4
class="text-sm font-semibold text-heading-color mb-0"
>
<a
class="leading-1.3 hover:text-secondary-color"
href="team-details.html"
>William Seklo</a
>
</h4>
<span class="text-xs"> Estate Agents </span>
</div>
</div>
<ul class="flex gap-x-2">
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="1"
>
<i class="flaticon-expand leading-1"></i>
</button>
</li>
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="2"
>
<i class="flaticon-heart-1 leading-1"></i>
</button>
</li>
<li>
<a
href="product-details.html"
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
><i class="flaticon-add leading-1"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 3 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="group border border-border-color-13 shadow-box-shadow-4"
>
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/3.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
>
<div
class="text-sm text-white flex justify-between items-center"
>
<a
href="locations.html"
class="hover:text-secondary-color"
><i class="flaticon-pin"></i> Belmont Gardens,
Chicago</a
>
<ul class="flex gap-10px">
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-camera pr-1 leading-1"></i>
4</a
>
</li>
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-film pr-1 leading-1"></i> 2</a
>
</li>
</ul>
</div>
</div>
<div
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] right-[18px]"
>
<span class="leading-5 sm:leading-25px block"
>for rent</span
>
</div>
</div>
<!-- card body -->
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
<h5
class="text-lg text-secondary-color font-semibold mb-5px"
>
<span class="leading-1.8">$34,900</span>
<label class="text-sm font-normal">/Month</label>
</h5>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Comfortable Apartment</a
>
</h4>
<p class="text-sm mb-15px">
<span class="leading-1.8"
>Beautiful Huge 1 Family House In Heart Of
<br >Westbury. Newly Renovated With New Wood</span
>
</p>
<ul class="flex flex-wrap gap-15px py-4">
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
3<i class="flaticon-bed ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
2<i class="flaticon-clean ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li class="text-sm">
<p class="leading-1.8 font-bold">
3450<i
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
></i>
</p>
<p class="leading-1.8">square Ft</p>
</li>
</ul>
</div>
<!-- cart footer -->
<div
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
>
<div
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
>
<div class="flex gap-x-3">
<a href="team-details.html" class="w-10 h-10"
><img
src="./assets/img/blog/author.jpg"
alt=""
class="w-full h-full rounded-100%"
></a>
<div>
<h4
class="text-sm font-semibold text-heading-color mb-0"
>
<a
class="leading-1.3 hover:text-secondary-color"
href="team-details.html"
>William Seklo</a
>
</h4>
<span class="text-xs"> Estate Agents </span>
</div>
</div>
<ul class="flex gap-x-2">
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="1"
>
<i class="flaticon-expand leading-1"></i>
</button>
</li>
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="2"
>
<i class="flaticon-heart-1 leading-1"></i>
</button>
</li>
<li>
<a
href="product-details.html"
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
><i class="flaticon-add leading-1"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 4 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="group border border-border-color-13 shadow-box-shadow-4"
>
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/4.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
>
<div
class="text-sm text-white flex justify-between items-center"
>
<a
href="locations.html"
class="hover:text-secondary-color"
><i class="flaticon-pin"></i> Belmont Gardens,
Chicago</a
>
<ul class="flex gap-10px">
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-camera pr-1 leading-1"></i>
4</a
>
</li>
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-film pr-1 leading-1"></i> 2</a
>
</li>
</ul>
</div>
</div>
<div
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] right-[18px]"
>
<span class="leading-5 sm:leading-25px block"
>for rent</span
>
</div>
</div>
<!-- card body -->
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
<h5
class="text-lg text-secondary-color font-semibold mb-5px"
>
<span class="leading-1.8">$34,900</span>
<label class="text-sm font-normal">/Month</label>
</h5>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Luxury villa in Rego Park</a
>
</h4>
<p class="text-sm mb-15px">
<span class="leading-1.8"
>Beautiful Huge 1 Family House In Heart Of
<br >Westbury. Newly Renovated With New Wood</span
>
</p>
<ul class="flex flex-wrap gap-15px py-4">
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
3<i class="flaticon-bed ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
2<i class="flaticon-clean ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li class="text-sm">
<p class="leading-1.8 font-bold">
3450<i
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
></i>
</p>
<p class="leading-1.8">square Ft</p>
</li>
</ul>
</div>
<!-- cart footer -->
<div
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
>
<div
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
>
<div class="flex gap-x-3">
<a href="team-details.html" class="w-10 h-10"
><img
src="./assets/img/blog/author.jpg"
alt=""
class="w-full h-full rounded-100%"
></a>
<div>
<h4
class="text-sm font-semibold text-heading-color mb-0"
>
<a
class="leading-1.3 hover:text-secondary-color"
href="team-details.html"
>William Seklo</a
>
</h4>
<span class="text-xs"> Estate Agents </span>
</div>
</div>
<ul class="flex gap-x-2">
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="1"
>
<i class="flaticon-expand leading-1"></i>
</button>
</li>
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="2"
>
<i class="flaticon-heart-1 leading-1"></i>
</button>
</li>
<li>
<a
href="product-details.html"
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
><i class="flaticon-add leading-1"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 5 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="group border border-border-color-13 shadow-box-shadow-4"
>
<!-- card thumbs -->
<div class="relative leading-1">
<a
href="product-details.html"
class="overflow-hidden"
>
<img
src="./assets/img/product-3/5.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
<div
class="absolute w-full left-0 bottom-0 px-15px pb-15px lg:px-30px bg-transparent bg-gradient-color-5"
>
<div
class="text-sm text-white flex justify-between items-center"
>
<a
href="locations.html"
class="hover:text-secondary-color"
><i class="flaticon-pin"></i> Belmont Gardens,
Chicago</a
>
<ul class="flex gap-10px">
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-camera pr-1 leading-1"></i>
4</a
>
</li>
<li>
<a
class="w-30px lg:w-42px h-30px flex justify-center items-center bg-transparent lg:bg-white lg:bg-opacity-35 hover:text-secondary-color"
href="product-details.html"
><i class="fas fa-film pr-1 leading-1"></i> 2</a
>
</li>
</ul>
</div>
</div>
<div
class="text-xs sm:text-13px text-white px-10px py-1 sm:px-15px sm:pt-3px sm:pb-0 bg-green uppercase font-semibold absolute top-[15px] right-[18px]"
>
<span class="leading-5 sm:leading-25px block"
>for rent</span
>
</div>
</div>
<!-- card body -->
<div class="px-5 pt-4 lg:px-30px lg:pt-5">
<h5
class="text-lg text-secondary-color font-semibold mb-5px"
>
<span class="leading-1.8">$34,900</span>
<label class="text-sm font-normal">/Month</label>
</h5>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color mb-15px"
>
<a
href="product-details.html"
class="hover:text-secondary-color leading-1.3"
>Beautiful Flat in Manhattan</a
>
</h4>
<p class="text-sm mb-15px">
<span class="leading-1.8"
>Beautiful Huge 1 Family House In Heart Of
<br >Westbury. Newly Renovated With New Wood</span
>
</p>
<ul class="flex flex-wrap gap-15px py-4">
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
3<i class="flaticon-bed ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li
class="text-sm pr-4 border-r border-primary-color border-opacity-20"
>
<p class="leading-1.8 font-bold">
2<i class="flaticon-clean ml-1"></i>
</p>
<p class="leading-1.8">Bedrooms</p>
</li>
<li class="text-sm">
<p class="leading-1.8 font-bold">
3450<i
class="flaticon-square-shape-design-interface-tool-symbol ml-1"
></i>
</p>
<p class="leading-1.8">square Ft</p>
</li>
</ul>
</div>
<!-- cart footer -->
<div
class="p-5 lg:p-30px lg:pt-5 border-t border-border-color-1"
>
<div
class="flex flex-wrap-reverse items-center justify-between gap-y-5"
>
<div class="flex gap-x-3">
<a href="team-details.html" class="w-10 h-10"
><img
src="./assets/img/blog/author.jpg"
alt=""
class="w-full h-full rounded-100%"
></a>
<div>
<h4
class="text-sm font-semibold text-heading-color mb-0"
>
<a
class="leading-1.3 hover:text-secondary-color"
href="team-details.html"
>William Seklo</a
>
</h4>
<span class="text-xs"> Estate Agents </span>
</div>
</div>
<ul class="flex gap-x-2">
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="1"
>
<i class="flaticon-expand leading-1"></i>
</button>
</li>
<li>
<button
class="modal-open w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
data-modal-index="2"
>
<i class="flaticon-heart-1 leading-1"></i>
</button>
</li>
<li>
<a
href="product-details.html"
class="w-9 h-9 flex items-center justify-center bg-section-bg-1 text-center hover:bg-secondary-color hover:text-white font-bold"
><i class="flaticon-add leading-1"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px]"
>
<span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 1"
></span
><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"
tabindex="0"
role="button"
aria-label="Go to slide 2"
aria-current="true"
></span
><span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 3"
></span>
</div>
<!-- navigation -->
<div class="hidden 3xl:block">
<div class="swiper-button-next z-1">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev z-1">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
</div>
</div>
<!-- modals -->
<!-- modal apartment details-->
<div
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
>
<div
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
></div>
<div
class="modal-content transition-all duration-500 -translate-y-20 sm:max-w-500px lg:max-w-980px m-2 mt-150px sm:mx-auto relative z-small rounded-lg"
>
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-x-30px p-30px bg-white relative"
>
<div>
<img
src="./assets/img/product/4.png"
class="w-full"
alt=""
>
</div>
<!-- card body -->
<div class="pl-25px">
<div class="absolute right-4 top-4">
<button
class="modal-close w-10 h-10 leading-10 text-center bg-section-bg-1 text-black text-25px inline-block"
>
<span>×</span>
</button>
</div>
<ul class="flex items-center mb-5px">
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
><i class="fas fa-star leading-1.8"></i
></a>
</li>
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
><i class="fas fa-star leading-1.8"></i
></a>
</li>
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
><i class="fas fa-star leading-1.8"></i
></a>
</li>
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
><i class="fas fa-star-half-alt leading-1.8"></i
></a>
</li>
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
><i class="far fa-star leading-1.8"></i
></a>
</li>
<li>
<a
href="#"
class="text-xs text-ratings hover:text-secondary-color"
>
( 95 Reviews )</a
>
</li>
</ul>
<h4
class="text-22px md:text-2xl font-bold text-heading-color mb-0"
>
<a
href="product-details.html"
class="leading-1.3 hover:text-secondary-color"
>3 Rooms Manhattan</a
>
</h4>
<p
class="text-34px md:text-50px text-secondary-color font-semibold mb-5 pb-0 border-b border-border-color-12 border-opacity-25 leading-1.2"
>
<span>$34,900</span>
<del
class="text-26px md:text-40px leading-1.2 opacity-60 pl-1"
>$36,500</del
>
</p>
<p class="text-sm lg:text-base mb-9 md:mb-10">
<span class="leading-1.8"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Dignissimos repellendus repudiandae incidunt quidem
pariatur expedita, quo quis modi tempore non.</span
>
</p>
<ul
class="flex flex-wrap gap-5 pb-5 mb-5 border-b border-border-color-12 border-opacity-25"
>
<li class="text-sm">
<button
class="modal-open leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
data-modal-index="3"
>
<i class="far fa-heart px-0.5"></i> Add to Wishlist
</button>
</li>
<li class="text-sm">
<button
class="leading-1.8 font-semibold hover:text-secondary-color transition-all duration-300"
>
<i class="fas fa-exchange-alt px-0.5"></i> Compare
</button>
</li>
</ul>
<!-- social area -->
<ul class="flex gap-x-[18px] items-center">
<li>
<p class="text-sm lg:text-base">
<span class="leading-1.8">Share</span>
</p>
</li>
<li>
<a
href="https://www.facebook.com/"
class="text-sm lg:text-base hover:text-secondary-color"
>
<i class="fab fa-facebook-f leading-1.8"></i>
</a>
</li>
<li>
<a
href="https://x.com/"
class="text-sm lg:text-base hover:text-secondary-color"
>
<i class="fab fa-twitter leading-1.8"></i>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/"
class="text-sm lg:text-base hover:text-secondary-color"
>
<i class="fab fa-linkedin leading-1.8"></i>
</a>
</li>
<li>
<a
href="https://www.instagram.com/"
class="text-sm lg:text-base hover:text-secondary-color"
>
<i class="fab fa-instagram leading-1.8"></i>
</a>
</li>
</ul>
<!-- action -->
<div class="text-end">
<a
href="product-details.html"
class="text-xs hover:text-secondary-color underline hover:underline"
>
<span class="leading-1.8">View Details</span></a
>
</div>
</div>
</div>
</div>
</div>
<!-- modal wishlist 1-->
<div
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
>
<div
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
></div>
<div
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
>
<div class="flex">
<div class="w-125px mr-5 flex-shrink-0">
<img src="./assets/img/product/4.png" class="w-full" alt="" >
</div>
<!-- card body -->
<div class="pl-25px">
<div class="absolute right-4 top-4">
<button
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
>
<span>×</span>
</button>
</div>
<h4
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
>
<a
href="product-details.html"
class="leading-1.3 hover:text-secondary-color"
>3 Rooms Manhattan</a
>
</h4>
<p
class="text-sm lg:text-base mb-5 md:mb-6 "
>
<i class="fa fa-check-circle leading-1 text-green float-left clear-both pr-1.5 mt-1.5"></i>
Successfully added to your Wishlist
</p>
<!-- action -->
<div>
<h5
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="wishlist.html"
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
>View Wishlist</a
>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- modal wishlist 2-->
<div
class="modal hidden fixed top-0 left-0 w-full h-full z-xxl transition-all duration-500 bg-lightBlack opacity-0 overflow-y-auto"
>
<div
class="modal-close fixed md:absolute top-0 left-0 w-full h-full z-xsmall cursor-zoom-out"
></div>
<div
class="modal-content transition-all duration-500 -translate-y-20 max-w-500px m-2 mt-150px sm:mx-auto relative z-small p-30px bg-white"
>
<div class="flex">
<div class="w-125px mr-5 flex-shrink-0">
<img src="./assets/img/product/4.png" class="w-full" alt="" >
</div>
<!-- card body -->
<div class="pl-25px">
<div class="absolute right-4 top-4">
<button
class="modal-close w-10 h-10 leading-10 text-center bg-black bg-opacity-5 text-black text-25px inline-block"
>
<span>×</span>
</button>
</div>
<h4
class="text-base lg:text-lg font-bold text-heading-color mb-10px"
>
<a
href="product-details.html"
class="leading-1.3 hover:text-secondary-color"
>3 Rooms Manhattan</a
>
</h4>
<p
class="text-sm lg:text-base mb-5 md:mb-6 "
>
<i class="fa fa-check-circle leading-1 text-green float-left clear-both pr-1.5 mt-1.5"></i>
Successfully added to your Wishlist
</p>
<!-- action -->
<div>
<h5
class="capitalize text-sm md:text-base text-white relative group whitespace-nowrap font-normal mb-0 transition-all duration-300 border border-secondary-color hover:border-heading-color inline-block"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black hover:bg-primary-cogroup-lor z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="wishlist.html"
class="relative z-10 px-5 py-5px group-hover:text-heading-color leading-23px"
>View Wishlist</a
>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fixed popup-->
<div
class="w-full min-h-80 md:min-h-350px flex items-center justify-center bg-[url('../img/bg/19.jpg')] bg-cover bg-center bg-no-repeat bg-fixed relative z-0"
>
<div
class="w-full h-full bg-black bg-opacity-30 absolute top-0 left-0 -z-1"
></div>
<a
class="glightbox2 w-50px h-50px lg:w-20 lg:h-20 text-center lg:text-lg text-secondary-color shadow-box-shadow-2 rounded-full bg-white flex items-center justify-center animate-pulse1"
href="https://www.youtube.com/embed/X7R-q9rsrtU?autoplay=1&showinfo=0"
data-glightbox="type: video;"
>
<i class="icon-play"></i>
</a>
</div>
<!-- testimonials section -->
<section>
<div>
<div
class="px-15px 3xl:px-[2%] 4xl:px-[9%] pb-60px pt-115px overflow-hidden"
>
<!-- section heading -->
<div class="text-center mb-50px relative z-1">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize rounded-full py-0.5 px-22px 5ded-full inline-block font-semibold mb-5"
>
<span class="leading-1.3">Our Testimonial</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
>
<span class="leading-1.3">Clients Feedback </span>
</h2>
</div>
<div class="testimonial-quote-menu-container mx-15px relative z-0">
<div class="max-w-[95%] md:max-w-[70%] lg:max-w-[45%] mx-auto">
<div class="news-slider-container swiper-container relative">
<!-- testomonials slider -->
<div class="swiper testimonials-slider-3 static no-break">
<div class="swiper-wrapper">
<!-- slide 1 -->
<div class="swiper-slide mb-10 cursor-default bg-white">
<div
class="flex flex-col items-center text-center relative z-0 bg-white"
>
<div
class="text-[240px] font-bold text-white-7 absolute -top-[15px] left-1/2 -translate-x-1/2 -z-1 leading-1"
>
<i class="far fa-comments"></i>
</div>
<div
class="w-[85px] mt-50px mb-30px border-8 border-white shadow-box-shadow-1 box-content"
>
<img
src="./assets/img/testimonial/1.jpg"
alt=""
class="w-full inline-block"
>
</div>
<p
class="text-sm sm:text-base md:text-xl lg:text-2xl mb-8 md:mb-30px lg:mb-9 hyphens-none"
>
<span class="md:leading-1.8 lg:leading-1.8">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud ullamco laboris nisi ut
aliquip ex ea commodo.
</span>
</p>
<h4
class="text-3xl font-bold text-heading-color mb-5px"
>
<span class="leading-1.3"> Jacob William </span>
</h4>
<h5
class="text-sm md:text-15px lg:text-base font-bold text-secondary-color"
>
<span class="leading-1.3"> Manager</span>
</h5>
</div>
</div>
<!-- slide 2 -->
<div class="swiper-slide mb-10 cursor-default bg-white">
<div
class="flex flex-col items-center text-center relative z-0 bg-white"
>
<div
class="text-[240px] font-bold text-white-7 absolute -top-[15px] left-1/2 -translate-x-1/2 -z-1 leading-1"
>
<i class="far fa-comments"></i>
</div>
<div
class="w-[85px] mt-50px mb-30px border-8 border-white shadow-box-shadow-1 box-content"
>
<img
src="./assets/img/testimonial/2.jpg"
alt=""
class="w-full inline-block"
>
</div>
<p
class="text-sm sm:text-base md:text-xl lg:text-2xl mb-8 md:mb-30px lg:mb-9 hyphens-none"
>
<span class="md:leading-1.8 lg:leading-1.8">
Quidem Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud ullamco laboris nisi ut
aliquip ex ea.
</span>
</p>
<h4
class="text-3xl font-bold text-heading-color mb-5px"
>
<span class="leading-1.3"> Ethan James </span>
</h4>
<h5
class="text-sm md:text-15px lg:text-base font-bold text-secondary-color"
>
<span class="leading-1.3"> Admin</span>
</h5>
</div>
</div>
<!-- slide 3 -->
<div class="swiper-slide mb-10 cursor-default bg-white">
<div
class="flex flex-col items-center text-center relative z-0"
>
<div
class="text-[240px] font-bold text-white-7 absolute -top-[15px] left-1/2 -translate-x-1/2 -z-1 leading-1"
>
<i class="far fa-comments"></i>
</div>
<div
class="w-[85px] mt-50px mb-30px border-8 border-white shadow-box-shadow-1 box-content"
>
<img
src="./assets/img/testimonial/3.jpg"
alt=""
class="w-full inline-block"
>
</div>
<p
class="text-sm sm:text-base md:text-xl lg:text-2xl mb-8 md:mb-30px lg:mb-9 hyphens-none"
>
<span class="md:leading-1.8 lg:leading-1.8">
Dolor Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud ullamco nisi ut aliquip ex ea
commodo.
</span>
</p>
<h4
class="text-3xl font-bold text-heading-color mb-5px"
>
<span class="leading-1.3"> Noah Alexander </span>
</h4>
<h5
class="text-sm md:text-15px lg:text-base font-bold text-secondary-color"
>
<span class="leading-1.3"> Professor</span>
</h5>
</div>
</div>
<!-- slide 4 -->
<div class="swiper-slide mb-10 cursor-default bg-white">
<div
class="flex flex-col items-center text-center relative z-0 h-full"
>
<div
class="text-[240px] font-bold text-white-7 absolute -top-[15px] left-1/2 -translate-x-1/2 -z-1 leading-1"
>
<i class="far fa-comments"></i>
</div>
<div
class="w-[85px] mt-50px mb-30px border-8 border-white shadow-box-shadow-1 box-content"
>
<img
src="./assets/img/testimonial/4.jpg"
alt=""
class="w-full inline-block"
>
</div>
<p
class="text-sm sm:text-base md:text-xl lg:text-2xl mb-8 md:mb-30px lg:mb-9 hyphens-none"
>
<span class="md:leading-1.8 lg:leading-1.8">
Amet Ipsum Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud nisi ut aliquip ex ea
commodo.
</span>
</p>
<h4
class="text-3xl font-bold text-heading-color mb-5px"
>
<span class="leading-1.3"> Liam Mason </span>
</h4>
<h5
class="text-sm md:text-15px lg:text-base font-bold text-secondary-color"
>
<span class="leading-1.3"> Officer</span>
</h5>
</div>
</div>
</div>
<!-- pagination -->
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px] block lg:hidden"
>
<span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 1"
></span
><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"
tabindex="0"
role="button"
aria-label="Go to slide 2"
aria-current="true"
></span
><span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 3"
></span>
</div>
<!-- navigation -->
<div class="hidden lg:block">
<div class="swiper-button-next bg-white z-1">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev bg-white z-1">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
</div>
</div>
</div>
<div
class="swiper testimonials3-tumbs_slider hidden lg:block static overflow-visible"
>
<ul
class="testimonial-quote-menu d-none d-lg-block swiper-wrapper static !overflow-visible"
>
<li class="swiper-slide static overflow-visible">
<img
src="./assets/img/testimonial/1.jpg"
alt="Quote image"
>
</li>
<li class="swiper-slide static">
<img
src="./assets/img/testimonial/2.jpg"
alt="Quote image"
>
</li>
<li class="swiper-slide static">
<img
src="./assets/img/testimonial/3.jpg"
alt="Quote image"
>
</li>
<li class="swiper-slide static">
<img
src="./assets/img/testimonial/4.jpg"
alt="Quote image"
>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- brand section -->
<div class="px-15px 3xl:px-[2%] 4xl:px-[9%] bg-section-bg-1">
<div class="swiper brand-slider">
<div class="swiper-wrapper px-15px">
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/1.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/2.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/3.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/4.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/5.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
<div class="swiper-slide py-30">
<img
src="./assets/img/brand-logo/3.png"
alt=""
class="hover:scale-110 transition-all duration-300 w-full 3xl:w-auto"
>
</div>
</div>
<!-- navigation -->
<div class="hidden">
<div class="swiper-button-next bg-white z-1">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev bg-white z-1">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
</div>
</div>
<section>
<div>
<div class="container pb-70px pt-30">
<!-- section heading -->
<div class="text-center mb-50px">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize rounded-full py-0.5 px-22px 5ded-full inline-block font-semibold mb-5"
>
<span class="leading-1.3">News & Blogs</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold"
>
<span class="leading-1.3">Leatest News Feeds </span>
</h2>
</div>
<div
class="news-slider-container swiper-container relative -mx-15px"
>
<!-- apartment cards -->
<div class="swiper news-slider static">
<div class="swiper-wrapper">
<!-- card 1 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group">
<!-- card thumbs -->
<div class="relative leading-1">
<a href="blog-details.html" class="overflow-hidden">
<img
src="./assets/img/blog/1.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
</div>
<!-- card body -->
<div class="p-30px shadow-box-shadow-4">
<ul class="mb-15px flex gap-x-25px items-center">
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="far fa-user text-secondary-color"></i>
by: Admin</a
>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="fas fa-tags text-secondary-color"></i>
Room</a
>
</li>
</ul>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
>
<a
href="blog-details.html"
class="hover:text-secondary-color leading-1.3"
>10 Brilliant Ways To Decorate Your Home</a
>
</h4>
<div
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
>
<ul class="flex justify-between items-center">
<li class="text-xs md:text-sm font-semibold">
<p class="leading-1.8 flex gap-5px items-center">
<i
class="far fa-calendar-alt text-secondary-color"
></i>
June 24, 2024
</p>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="blog-details.html"
class="leading-1.8 text-secondary-color uppercase"
>
Read more</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 2 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group">
<!-- card thumbs -->
<div class="relative leading-1">
<a href="blog-details.html" class="overflow-hidden">
<img
src="./assets/img/blog/2.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
</div>
<!-- card body -->
<div class="p-30px shadow-box-shadow-4">
<ul class="mb-15px flex gap-x-25px items-center">
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="far fa-user text-secondary-color"></i>
by: Admin</a
>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="fas fa-tags text-secondary-color"></i>
Interior</a
>
</li>
</ul>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
>
<a
href="blog-details.html"
class="hover:text-secondary-color leading-1.3"
>The Most Inspiring Interior Design Of 2024</a
>
</h4>
<div
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
>
<ul class="flex justify-between items-center">
<li class="text-xs md:text-sm font-semibold">
<p class="leading-1.8 flex gap-5px items-center">
<i
class="far fa-calendar-alt text-secondary-color"
></i>
June 21, 2024
</p>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="blog-details.html"
class="leading-1.8 text-secondary-color uppercase"
>
Read more</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 3 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group">
<!-- card thumbs -->
<div class="relative leading-1">
<a href="blog-details.html" class="overflow-hidden">
<img
src="./assets/img/blog/3.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
</div>
<!-- card body -->
<div class="p-30px shadow-box-shadow-4">
<ul class="mb-15px flex gap-x-25px items-center">
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="far fa-user text-secondary-color"></i>
by: Admin</a
>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="fas fa-tags text-secondary-color"></i>
Estate</a
>
</li>
</ul>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
>
<a
href="blog-details.html"
class="hover:text-secondary-color leading-1.3"
>Recent Commercial Real Estate Transactions</a
>
</h4>
<div
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
>
<ul class="flex justify-between items-center">
<li class="text-xs md:text-sm font-semibold">
<p class="leading-1.8 flex gap-5px items-center">
<i
class="far fa-calendar-alt text-secondary-color"
></i>
June 22, 2024
</p>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="blog-details.html"
class="leading-1.8 text-secondary-color uppercase"
>
Read more</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 4 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group">
<!-- card thumbs -->
<div class="relative leading-1">
<a href="blog-details.html" class="overflow-hidden">
<img
src="./assets/img/blog/4.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
</div>
<!-- card body -->
<div class="p-30px shadow-box-shadow-4">
<ul class="mb-15px flex gap-x-25px items-center">
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="far fa-user text-secondary-color"></i>
by: Admin</a
>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="fas fa-tags text-secondary-color"></i>
Room</a
>
</li>
</ul>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
>
<a
href="blog-details.html"
class="hover:text-secondary-color leading-1.3"
>Renovating a Living Room? Experts Share Their
Secrets</a
>
</h4>
<div
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
>
<ul class="flex justify-between items-center">
<li class="text-xs md:text-sm font-semibold">
<p class="leading-1.8 flex gap-5px items-center">
<i
class="far fa-calendar-alt text-secondary-color"
></i>
June 24, 2024
</p>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="blog-details.html"
class="leading-1.8 text-secondary-color uppercase"
>
Read more</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- card 5 -->
<div
class="swiper-slide mb-65px xl:mb-50px px-15px cursor-default"
>
<div class="group">
<!-- card thumbs -->
<div class="relative leading-1">
<a href="blog-details.html" class="overflow-hidden">
<img
src="./assets/img/blog/5.jpg"
class="w-full group-hover:scale-110 transition-all duration-700"
alt=""
>
</a>
</div>
<!-- card body -->
<div class="p-30px shadow-box-shadow-4">
<ul class="mb-15px flex gap-x-25px items-center">
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="far fa-user text-secondary-color"></i>
by: Admin</a
>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="#"
class="leading-1.8 hover:text-secondary-color flex gap-5px items-center"
><i class="fas fa-tags text-secondary-color"></i>
Trends</a
>
</li>
</ul>
<h4
class="text-lg md:text-xl lg:text-22px font-semibold text-heading-color"
>
<a
href="blog-details.html"
class="hover:text-secondary-color leading-1.3"
>7 home trends that will shape your house in 2024</a
>
</h4>
<div
class="pt-5 mt-5 lg:pt-5 border-t border-border-color-1"
>
<ul class="flex justify-between items-center">
<li class="text-xs md:text-sm font-semibold">
<p class="leading-1.8 flex gap-5px items-center">
<i
class="far fa-calendar-alt text-secondary-color"
></i>
June 24, 2024
</p>
</li>
<li class="text-xs md:text-sm font-semibold">
<a
href="blog-details.html"
class="leading-1.8 text-secondary-color uppercase"
>
Read more</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal !-bottom-[6px] block xl:hidden"
>
<span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 1"
></span
><span
class="swiper-pagination-bullet swiper-pagination-bullet-active"
tabindex="0"
role="button"
aria-label="Go to slide 2"
aria-current="true"
></span
><span
class="swiper-pagination-bullet"
tabindex="0"
role="button"
aria-label="Go to slide 3"
></span>
</div>
<!-- navigation -->
<div class="hidden xl:block">
<div class="swiper-button-next bg-white z-1">
<i class="fas fa-arrow-right" ></i>
</div>
<div class="swiper-button-prev bg-white z-1">
<i class="fas fa-arrow-left" ></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- footer start -->
<footer>
<div
class="pt-187px pb-5 px-15px 3xl:px-[2%] 4xl:px-[5%] mt-95px bg-section-bg-2 text-sm lg:text-base text-white relative"
>
<div class="px-15px">
<!-- footer top -->
<div
class="container w-full absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2"
>
<div
class="px-25px lg:px-60px py-50px bg-secondary-color text-white flex justify-center lg:justify-between items-center flex-col lg:flex-row gap-y-30px lg:gap-0 sm:whitespace-nowrap"
>
<div>
<h5
class="text-xl md:text-26px lg:text-3xl xl:text-4xl text-white font-bold mb-15px"
>
<span class="leading-1.3">Looking for a dream home?</span>
</h5>
<p class="text-white leading-1.8">
We can help you realize your dream of a new home
</p>
</div>
<div>
<h5
class="capitalize inline-block text-sm md:text-base text-primary-color hover:text-white hover:bg-primary-color relative group whitespace-nowrap font-normal transition-all duration-300 shadow-box-shadow-3 mb-0"
>
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-white group-hover:bg-secondary-color z-1 group-hover:w-0 transition-all duration-300"
></span>
<a
href="contact.html"
class="relative z-10 px-5 md:px-25px lg:px-10 py-10px md:py-3 lg:py-17px group-hover:text-white leading-23px"
>Explore Properties <i class="icon-next"></i
></a>
</h5>
</div>
</div>
</div>
<!-- footer main -->
<div
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-12 gap-x-30px text-sm lg:text-base text-white"
>
<!-- footer about-->
<div class="xl:col-start-1 xl:col-span-3 mb-60px lg:pr-35px">
<div class="mb-15px">
<a href="index.html">
<img src="./assets/img/logo-2.png" alt="" >
</a>
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
Lorem Ipsum is simply dummy text of the and typesetting
industry. Lorem Ipsum is dummy text of the printing.
</p>
<ul class="space-y-2">
<li>
<p class="leading-1.8 text-white flex">
<i class="icon-placeholder mr-15px mt-1"></i>
<span>Brooklyn, New York, United States</span>
</p>
</li>
<li>
<a href="tel:+0123-456789" class="leading-1.8 flex">
<i class="icon-call mr-15px mt-1"></i>
<span>+0123-456789</span>
</a>
</li>
<li>
<a
href="mailto:example@example.com"
class="leading-1.8 flex"
>
<i class="icon-mail mr-15px mt-1"></i>
<span>example@example.com</span>
</a>
</li>
</ul>
<ul class="flex items-center gap-x-5 mt-5">
<li>
<a href="https://www.facebook.com" class="leading-1.8">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://x.com" class="leading-1.8">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com" class="leading-1.8">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com" class="leading-1.8">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- footer company-->
<div class="xl:col-start-4 xl:col-span-2 mb-60px">
<h3 class="text-22px font-bold mb-25px text-white">
<span class="leading-1.3"> Company </span>
</h3>
<ul class="space-y-[15px]">
<li>
<a
href="about.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
About</a
>
</li>
<li>
<a
href="blog.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Blog</a
>
</li>
<li>
<a
href="shop.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
All Products</a
>
</li>
<li>
<a
href="locations.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Locations Map</a
>
</li>
<li>
<a
href="faq.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
FAQ</a
>
</li>
<li>
<a
href="contact.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Contact us</a
>
</li>
</ul>
</div>
<!-- footer services-->
<div class="xl:col-start-6 xl:col-span-2 mb-60px">
<h3 class="text-22px font-bold mb-25px text-white">
<span class="leading-1.3"> Services </span>
</h3>
<ul class="space-y-[15px]">
<li>
<a
href="order-tracking.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Order tracking</a
>
</li>
<li>
<a
href="wishlist.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Wish List</a
>
</li>
<li>
<a
href="login.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Login</a
>
</li>
<li>
<a
href="account.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
My account</a
>
</li>
<li>
<a
href="about.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Terms & Conditions</a
>
</li>
<li>
<a
href="about.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Promotional Offers</a
>
</li>
</ul>
</div>
<!-- footer customer care-->
<div class="xl:col-start-8 xl:col-span-2 mb-60px">
<h3 class="text-22px font-bold mb-25px text-white">
<span class="leading-1.3"> Customer Care </span>
</h3>
<ul class="space-y-[15px]">
<li>
<a
href="login.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Login</a
>
</li>
<li>
<a
href="account.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
My account</a
>
</li>
<li>
<a
href="wishlist.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Wish List</a
>
</li>
<li>
<a
href="order-tracking.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Order tracking</a
>
</li>
<li>
<a
href="faq.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
FAQ</a
>
</li>
<li>
<a
href="contact.html"
class="hover:text-secondary-color -translate-x-5 hover:translate-x-0 group leading-1.8"
><span
class="text-secondary-color pr-15px opacity-0 group-hover:opacity-100 transition-all duration-300"
>//</span
>
Contact us</a
>
</li>
</ul>
</div>
<!-- footer newsletter-->
<div class="xl:col-start-10 xl:col-span-3 mb-60px">
<h3 class="text-22px font-bold mb-25px text-white">
<span class="leading-1.3"> Newsletter </span>
</h3>
<p class="leading-1.8 mb-5 lg:mb-25px text-white">
Subscribe to our weekly Newsletter and receive updates via
email.
</p>
<!-- subscription input -->
<div>
<form class="w-full relative">
<input
type="text"
placeholder="Email*"
class="w-full text-sm text-paragraph-color pl-5 pr-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block rounded-none"
>
<button
type="submit"
class="absolute top-0 right-0 h-full px-18px text-white bg-secondary-color hover:bg-primary-color"
>
<i class="fas fa-location-arrow text-lg font-bold"></i>
</button>
</form>
</div>
<!-- payment methods -->
<div>
<h3
class="text-base lg:text-lg font-bold mt-30px mb-15px text-white"
>
<span class="leading-1.3"> We Accept </span>
</h3>
<img
src="./assets/img/icons/payment-4.png"
alt="Payment Image"
>
</div>
</div>
</div>
</div>
</div>
<!-- footer copyright -->
<div
class="py-25px px-15px 3xl:px-[2%] 4xl:px-[5%] bg-section-bg-7 text-sm lg:text-base text-white"
>
<div class="px-15px">
<div class="grid grid-cols-1 md:grid-cols-2">
<div>
<p class="leading-1.8 text-center lg:text-start text-white">
All Rights Reserved @ Company 2024
</p>
</div>
<ul
class="flex gap-x-25px items-center justify-center lg:justify-end capitalize font-semibold font-poppins text-sm"
>
<li>
<a href="#" class="leading-1.8">Terms & Conditions</a>
</li>
<li>
<a href="#" class="leading-1.8"> Claim</a>
</li>
<li>
<a href="#" class="leading-1.8"> Privacy & Policy</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- scroll top -->
<button
class="scroll-up w-30px h-30px lg:w-10 lg:h-10 lg:text-xl bg-section-bg-1 text-heading-color hover:bg-secondary-color hover:text-white rotate-[45deg] shadow-box-shadow-3 fixed bottom-[50px] lg:bottom-[70px] right-[3%] flex justify-center items-center z-xl"
>
<i class="fa fa-angle-up leading-1 -rotate-[45deg] inline-block"></i>
</button>
<script src="./assets/js/stickyHeader.js"></script>
<script src="./assets/js/accordion.js"></script>
<script src="./assets/js/service.js"></script>
<script src="./assets/js/nice-select2.js"></script>
<script src="./assets/js/search.js"></script>
<script src="./assets/js/drawer.js"></script>
<script src="./assets/js/swiper-bundle.min.js"></script>
<script src="./assets/js/silder.js"></script>
<script src="./assets/js/counterup.js"></script>
<script src="./assets/js/modal.js"></script>
<script src="./assets/js/tabs.js"></script>
<script src="./assets/js/glightbox.min.js"></script>
<script src="./assets/js/scrollUp.js"></script>
<script src="./assets/js/smoothScroll.js"></script>
<script src="./assets/js/isotope.pkgd.min.js"></script>
<script src="./assets/js/filter.js"></script>
<script src="./assets/js/nice_checkbox.js"></script>
<script src="./assets/js/count.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>