Files
amdruzstvo/prod/service.html

1459 lines
72 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">Iné služby</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">
Iné služby
</li>
</ul>
</div>
</div>
</section>
<!-- about section -->
<section>
<div class="container pt-30 pb-115px">
<div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-30px">
<!-- about left -->
<div
class="lg:col-start-1 lg:col-span-5 lg:mr-30px relative pl-30px mb-10 lg:mb-0 after:w-30px after:h-[85%] after:absolute after:top-1/2 after:left-0 after:-translate-y-1/2 after:bg-secondary-color">
<img src="./assets/img/service/11.jpg" alt="" class="max-w-full">
</div>
<!-- about right -->
<div class="lg:col-start-6 lg:col-span-7">
<div class="mb-10">
<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 class="text-secondary-color">.</span>
</span>
</h2>
<p class="text-sm lg:text-base max-w-500px mb-5">
<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>
<p class="text-sm lg:text-base">
<span class="leading-1.8 lg:leading-1.8">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.</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="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 uppercase">About
Us</a>
</h5>
</div>
</div>
</div>
</div>
</section>
<!-- services section -->
<section class="bg-section-bg-1">
<div class="container pt-30 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">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 Core Services </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 text-6xl">
<i class="flaticon-house leading-1 text-secondary-color"></i>
</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">Property
Management</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>
<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 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 text-6xl">
<i class="flaticon-mortgage leading-1 text-secondary-color"></i>
</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">Mortgage Service</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>
<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 text-6xl">
<i class="flaticon-operator leading-1 text-secondary-color"></i>
</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">Consulting
Service</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>
<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 4 -->
<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 text-6xl">
<i class="flaticon-house-1 leading-1 text-secondary-color"></i>
</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">Home Buying</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>
<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 5 -->
<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 text-6xl">
<i class="flaticon-house-3 leading-1 text-secondary-color"></i>
</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">Home Selling</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>
<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 6 -->
<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 text-6xl">
<i class="flaticon-official-documents leading-1 text-secondary-color"></i>
</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">Escrow Services</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>
<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>
<!-- news section -->
<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 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>