Files
amdruzstvo/prod/about.html

1750 lines
88 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>
<!-- header area start -->
<header>
<!-- header top -->
<div class="bg-section-bg-6">
<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:riso.sala@gmail.com?Subject=Dopyt%20z%20webovej%20stranky"><i
class="icon-mail text-secondary-color font-bold mr-0.5"></i>
riso.sala@gmail.com</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">
<li>
<a href="https://www.facebook.com" title="Facebook"><i class="fab fa-facebook-f font-bold"></i></a>
</li>
<li>
<a href="https://www.x.com" title="Twitter"><i class="fab fa-twitter font-bold"></i></a>
</li>
<li>
<a href="https://www.instagram.com" title="Instagram"><i class="fab fa-instagram font-bold"></i></a>
</li>
<li>
<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 z-xl bg-white transition-all duration-700">
<div class="container flex flex-col md:flex-row justify-center md:justify-between items-center relative 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.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="index.html"
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Domov
</span></a>
</li>
<!-- item 2 -->
<li class="relative group">
<a href="about.html"
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">O
nás</a>
</li>
<!-- item 3 -->
<li class="relative group">
<a href="portfolio.html"
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Ponuka</a>
<!-- dropdown -->
</li>
<!-- item 4 -->
<li class="relative group">
<a href="service.html"
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Iné
služby</a>
</li>
<li>
<a href="contact.html"
class="text-lg xl:text-15px 2xl:text-lg text-heading-color hover:text-secondary-color font-semibold whitespace-nowrap pl-10px py-22px">Kontakty
</a>
</li>
</ul>
</nav>
</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="w-full bg-[url('../img/bg/14.jpg')] bg-no-repeat bg-cover bg-center relative z-0 after:w-full after:h-full after:absolute after:top-0 after:left-0 after:bg-white after:bg-opacity-30 after:-z-1">
<div class="container py-110px">
<h1 class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-4xl font-bold text-heading-color mb-15px">
<span class="leading-1.3 md:leading-1.3 lg:leading-1.3 xl:leading-1.3">O nás</span>
</h1>
<ul class="breadcrumb flex gap-30px items-center text-sm lg:text-base font-bold pt-4">
<li class="home relative leading-1.8 lg:leading-1.8">
<a href="index.html"><i class="fas fa-home text-secondary-color"></i> Domov</a>
</li>
<li class="leading-1.8 lg:leading-1.8 text-heading-color">
O nás
</li>
</ul>
</div>
</div>
</section>
<!-- about section -->
<section>
<div class="container pt-30 pb-90px">
<div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-30px">
<!-- about left -->
<div class="lg:mr-30px relative mb-10 lg:mb-0">
<img src="./assets/img/others/13.png" alt="" class="max-w-full">
<div class="absolute left-[10px] bottom-[70px] w-150px md:w-300px">
<div class="relative">
<img src="./assets/img/others/8.png" alt="" class="w-full">
<div class="absolute left-0 top-0 w-full h-full flex items-center justify-center">
<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/tlThdr3O5Qo" data-glightbox="type: video;">
<i class="icon-play"></i>
</a>
</div>
</div>
</div>
</div>
<!-- about right -->
<div>
<div class="mb-5">
<p
class="text-sm md:text-15px lg:text-base text-secondary-color bg-secondary-color bg-opacity-10 capitalize mb-15px py-1px px-5 rounded-full inline-block font-semibold">
<span class="leading-1.3">about us</span>
</p>
<h2
class="text-2xl sm:text-3xl md:text-26px lg:text-3xl xl:text-44px text-heading-color font-bold mb-15px">
<span class="leading-1.3">
The Leading Real Estate Rental Marketplace
</span>
</h2>
<p class="text-sm lg:text-base max-w-500px">
<span class="leading-1.8 lg:leading-1.8">Over 39,000 people work for us in more than 70 countries
all over the This breadth of global coverage, combined with
specialist services</span>
</p>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-5 gap-y-4 pt-4">
<li class="text-sm lg:text-base flex items-center">
<i
class="flaticon-home-2 text-xl text-secondary-color bg-color-6 w-45px h-45px flex items-center justify-center mr-25px rounded-100%"></i>
<span class="leading-1.8">Smart Home Design</span>
</li>
<li class="text-sm lg:text-base flex items-center">
<i
class="flaticon-mountain text-xl text-secondary-color bg-color-6 w-45px h-45px flex items-center justify-center mr-25px rounded-100%"></i>
<span class="leading-1.8">Beautiful Scene Around</span>
</li>
<li class="text-sm lg:text-base flex items-center">
<i
class="flaticon-heart text-xl text-secondary-color bg-color-6 w-45px h-45px flex items-center justify-center mr-25px rounded-100%"></i>
<span class="leading-1.8">Exceptional Lifestyle</span>
</li>
<li class="text-sm lg:text-base flex items-center">
<i
class="flaticon-secure text-xl text-secondary-color bg-color-6 w-45px h-45px flex items-center justify-center mr-25px rounded-100%"></i>
<span class="leading-1.8">Complete 24/7 Security</span>
</li>
</ul>
<div class="bg-secondary-color bg-opacity-5 mt-30px mb-10">
<p class="text-sm lg:text-base p-5 border-l-4 border-secondary-color">
<span class="leading-1.8">
"Enimad minim veniam quis nostrud exercitation <br>
llamco laboris. Lorem ipsum dolor sit amet"
</span>
</p>
</div>
<div>
<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="service.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">OUR
SERVICES</a>
</h5>
</div>
</div>
</div>
</div>
</section>
<!-- services section -->
<section class="bg-section-bg-1">
<div class="container pt-30 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 mb-15px py-0.5 px-5 rounded-full inline-block font-semibold">
<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>
<!-- team 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 mb-15px py-0.5 px-5 rounded-full inline-block font-semibold">
<span class="leading-1.3">Team</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"> Property Agents </span>
</h2>
</div>
<!-- team 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-white-6 hover:shadow-box-shadow-1 bg-white relative transition-all duration-300">
<div class="text-center mb-5">
<img src="./assets/img/team/4.jpg" alt="" class="inline-block w-full">
</div>
<div class="text-center px-15px py-25px">
<h6 class="text-17px md:text-lg lg:text-xl text-heading-color font-bold mb-15px">
<a class="hover:text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3"
href="team-details.html">Rosalina D. William</a>
</h6>
<h6 class="text-sm md:text-15px lg:text-base font-bold mb-15px">
<span class="text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3">Real Estate Broker</span>
</h6>
<!-- socila -->
<ul class="text-sm lg:text-base flex gap-15px justify-center items-center">
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://x.com"><i class="fab fa-twitter"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- card 1 -->
<div class="service-card basis-full sm:basis-1/2 lg:basis-1/3 px-15px mb-30px">
<div class="border border-white-6 hover:shadow-box-shadow-1 bg-white relative transition-all duration-300">
<div class="text-center mb-5">
<img src="./assets/img/team/2.jpg" alt="" class="inline-block w-full">
</div>
<div class="text-center px-15px py-25px">
<h6 class="text-17px md:text-lg lg:text-xl text-heading-color font-bold mb-15px">
<a class="hover:text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3"
href="team-details.html">Kelian Anderson</a>
</h6>
<h6 class="text-sm md:text-15px lg:text-base font-bold mb-15px">
<span class="text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3">Selling Agents</span>
</h6>
<!-- socila -->
<ul class="text-sm lg:text-base flex gap-15px justify-center items-center">
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://x.com"><i class="fab fa-twitter"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</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-white-6 hover:shadow-box-shadow-1 bg-white relative transition-all duration-300">
<div class="text-center mb-5">
<img src="./assets/img/team/5.jpg" alt="" class="inline-block w-full">
</div>
<div class="text-center px-15px py-25px">
<h6 class="text-17px md:text-lg lg:text-xl text-heading-color font-bold mb-15px">
<a class="hover:text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3"
href="team-details.html">Miranda H. Halim</a>
</h6>
<h6 class="text-sm md:text-15px lg:text-base font-bold mb-15px">
<span class="text-secondary-color leading-1.3 md:leading-1.3 lg:leading-1.3">Property Seller</span>
</h6>
<!-- socila -->
<ul class="text-sm lg:text-base flex gap-15px justify-center items-center">
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://x.com"><i class="fab fa-twitter"></i></a>
</li>
<li class="leading-1.8 lg:leading-1.8">
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonials section -->
<section>
<div class="bg-[url('../img/bg/20.jpg')] bg-top bg-no-repeat">
<div class="container pt-115px pb-55px">
<!-- 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 mb-15px py-0.5 px-5 rounded-full inline-block font-semibold">
<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="testimonials-slider-container swiper-container relative -mx-15px">
<!-- apartment cards -->
<div class="swiper testimonials-slider static">
<div class="swiper-wrapper">
<!-- card 1 -->
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
<div
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
<!-- card body -->
<div>
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
<span class="text-3xl mr-0.5 translate-y-2 inline-block"><i
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"></i></span>
<span class="leading-1.8">
Precious ipsum dolor sit amet consectetur
adipisicing elit, sed dos mod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad min
veniam, quis nostrud Precious ips um dolor sit amet,
consecte</span>
</p>
</div>
<!-- cart footer -->
<div>
<div>
<div class="flex flex-wrap md:flex-nowrap gap-x-15px gap-y-10px items-center">
<div class="w-60px h-60px flex-shrink-0">
<img src="./assets/img/testimonial/1.jpg" alt="" class="w-full h-full rounded-100%">
</div>
<div>
<h4 class="text-base lg:text-lg font-semibold text-heading-color mb-0">
<span class="leading-1.3 hover:text-secondary-color">Jacob William</span>
</h4>
<span class="text-sm uppercase">
Selling Agents
</span>
</div>
</div>
</div>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"></span>
</div>
</div>
<!-- card 2 -->
<div class="swiper-slide mb-65px px-15px">
<div
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
<!-- card body -->
<div>
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
<span class="text-3xl mr-0.5 translate-y-2 inline-block"><i
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"></i></span>
<span class="leading-1.8">
Precious ipsum dolor sit amet consectetur
adipisicing elit, sed dos mod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad min
veniam, quis nostrud Precious ips um dolor sit amet,
consecte</span>
</p>
</div>
<!-- cart footer -->
<div>
<div>
<div class="flex gap-x-15px gap-y-10px items-center">
<div class="w-60px h-60px flex-shrink-0">
<img src="./assets/img/testimonial/2.jpg" alt="" class="w-full h-full rounded-100%">
</div>
<div>
<h4 class="text-base lg:text-lg font-semibold text-heading-color mb-0">
<span class="leading-1.3 hover:text-secondary-color">Kelian Anderson</span>
</h4>
<span class="text-sm uppercase">
Selling Agents
</span>
</div>
</div>
</div>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"></span>
</div>
</div>
<!-- card 3 -->
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
<div
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
<!-- card body -->
<div>
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
<span class="text-3xl mr-0.5 translate-y-2 inline-block"><i
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"></i></span>
<span class="leading-1.8">
Precious ipsum dolor sit amet consectetur
adipisicing elit, sed dos mod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad min
veniam, quis nostrud Precious ips um dolor sit amet,
consecte</span>
</p>
</div>
<!-- cart footer -->
<div>
<div>
<div class="flex gap-x-15px gap-y-10px items-center">
<div class="w-60px h-60px flex-shrink-0">
<img src="./assets/img/testimonial/3.jpg" alt="" class="w-full h-full rounded-100%">
</div>
<div>
<h4 class="text-base lg:text-lg font-semibold text-heading-color mb-0">
<span class="leading-1.3 hover:text-secondary-color">Adam Joseph</span>
</h4>
<span class="text-sm uppercase">
Selling Agents
</span>
</div>
</div>
</div>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"></span>
</div>
</div>
<!-- card 4 -->
<div class="swiper-slide mb-65px lg:mb-50px px-15px">
<div
class="pt-25px pb-10 px-35px group border border-border-color-13 shadow-box-shadow-4 rounded-10px bg-white cursor-default relative">
<!-- card body -->
<div>
<p class="text-sm md:text-base mb-5 md:mb-6 xl:mb-27px">
<span class="text-3xl mr-0.5 translate-y-2 inline-block"><i
class="flaticon-left-quote-1 group-hover:text-secondary-color transition-all duration-300"></i></span>
<span class="leading-1.8">
Precious ipsum dolor sit amet consectetur
adipisicing elit, sed dos mod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad min
veniam, quis nostrud Precious ips um dolor sit amet,
consecte</span>
</p>
</div>
<!-- cart footer -->
<div>
<div>
<div class="flex gap-x-15px gap-y-10px items-center">
<div class="w-60px h-60px flex-shrink-0">
<img src="./assets/img/testimonial/4.jpg" alt="" class="w-full h-full rounded-100%">
</div>
<div>
<h4 class="text-base lg:text-lg font-semibold text-heading-color mb-0">
<span class="leading-1.3 hover:text-secondary-color">James Carter</span>
</h4>
<span class="text-sm uppercase">
Selling Agents
</span>
</div>
</div>
</div>
</div>
<span
class="hover-line absolute bottom-0 left-0 w-0 group-hover:w-full h-1 bg-secondary-color transition-all duration-300 block"></span>
</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>
</section>
<!-- news section -->
<section>
<div>
<div class="container pb-70px">
<!-- 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 mb-15px py-0.5 px-5 rounded-full inline-block font-semibold">
<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>