Files
amdruzstvo/prod/contact.html

1144 lines
55 KiB
HTML
Raw Permalink 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">Kontakty</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">
Kontakty
</li>
</ul>
</div>
</div>
</section>
<!-- icons section -->
<section>
<div class="container pt-30 pb-5">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-30px">
<!-- card 1 -->
<div class="px-30px py-50px border-2 border-border-color-11 text-center flex flex-col items-center">
<div class="mb-35px">
<img src="./assets/img/icons/10.png" alt="">
</div>
<div>
<h2 class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold mb-15px">
<span class="leading-1.3"> Email Address </span>
</h2>
<p class="text-sm lg:text-base">
<span class="leading-1.8">
info@webmail.com <br>jobs@webexample.com
</span>
</p>
</div>
</div>
<!-- card 2 -->
<div class="px-30px py-50px border-2 border-border-color-11 text-center flex flex-col items-center">
<div class="mb-35px">
<img src="./assets/img/icons/11.png" alt="" class="">
</div>
<div>
<h2 class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold mb-15px">
<span class="leading-1.3"> Phone Number </span>
</h2>
<p class="text-sm lg:text-base">
<span class="leading-1.8">
+0123-456789<br>+987-6543210
</span>
</p>
</div>
</div>
<!-- card 3 -->
<div class="px-30px py-50px border-2 border-border-color-11 text-center flex flex-col items-center">
<div class="mb-35px">
<img src="./assets/img/icons/12.png" alt="">
</div>
<div>
<h2 class="text-lg md:text-xl lg:text-22px xl:text-2xl text-heading-color font-bold mb-15px">
<span class="leading-1.3"> Office Address </span>
</h2>
<p class="text-sm lg:text-base">
<span class="leading-1.8">
18/A, New Born Town Hall<br>New York, US
</span>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section>
<div class="container">
<!-- details form -->
<div class="relative -bottom-[100px] z-10">
<form class="form-primary bg-white shadow-box-shadow-2 px-25px pt-10 pb-50px md:p-50px md:pt-10">
<h4
class="text-22px font-semibold leading-1.3 pl-10px border-l-2 border-secondary-color text-heading-color mb-30px">
Get A Quote
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-30px">
<!-- name -->
<div class="relative">
<input type="text" placeholder="Enter your name"
class="text-paragraph-color pl-5 pr-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-60 placeholder:text-sm placeholder:text-paragraph-color">
<span class="absolute top-1/2 -translate-y-1/2 right-4">
<i class="fas fa-user text-sm lg:text-base text-secondary-color font-bold"></i>
</span>
</div>
<!-- email -->
<div class="relative">
<input type="text" placeholder="Enter email address"
class="text-paragraph-color pl-5 pr-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-60 placeholder:text-sm placeholder:text-paragraph-color">
<span class="absolute top-1/2 -translate-y-1/2 right-4">
<i class="fas fa-envelope text-sm lg:text-base text-secondary-color font-bold"></i>
</span>
</div>
<!-- type select -->
<div class="relative">
<select class="selectize boerder-2 border-border-color-9 text-[14px] leading-60px h-65px">
<option value="Select Service Type" data-display="Select">
Select Service Type
</option>
<option value="Property Management ">
Property Management
</option>
<option value="Mortgage Service ">Mortgage Service</option>
<option value="Consulting Service">
Consulting Service
</option>
<option value="Home Buying">Home Buying</option>
<option value="Home Selling">Home Selling</option>
<option value="Escrow Services">Escrow Services</option>
</select>
</div>
<!-- number -->
<div class="relative">
<input type="text" placeholder="Enter phone number"
class="text-paragraph-color pl-5 pr-50px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-60 placeholder:text-sm placeholder:text-paragraph-color">
<span class="absolute top-1/2 -translate-y-1/2 right-4">
<i class="fas fa-phone text-sm lg:text-base text-secondary-color font-bold"></i>
</span>
</div>
<!-- message -->
<div class="relative md:col-start-1 md:col-span-2 mb-35px">
<textarea placeholder="Enter message"
class="min-h-[150px] text-paragraph-color pl-5 pr-50px py-15px outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block w-full rounded-none placeholder:opacity-60 placeholder:text-sm placeholder:text-paragraph-color"></textarea>
<span class="absolute top-[30px] -translate-y-1/2 right-4">
<i class="fas fa-pencil text-sm lg:text-base text-secondary-color font-bold"></i>
</span>
</div>
</div>
<!-- agree -->
<div class="text-sm flex items-center mb-30px">
<input type="checkbox" id="agree">
<label for="agree" class="text-sm ml-1">
Save my name, email, and website in this browser for the next
time I comment.
</label>
</div>
<!-- submit button -->
<div class="pb-5">
<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 z-0">
<span
class="inline-block absolute top-0 right-0 w-full h-full bg-secondary-color group-hover:bg-black -z-1 group-hover:w-0 transition-all duration-300"></span>
<button type="submit"
class="relative z-1 px-5 md:px-25px lg:px-10 py-10px md:py-15px lg:py-17px group-hover:text-heading-color leading-23px uppercase">
get an free service
</button>
</h5>
</div>
</form>
</div>
</div>
</section>
<div class="pb-140px lg:pb-30">
<div class="google-map h-[800px] relative z-1">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9334.271551495209!2d-73.97198251485975!3d40.668170674982946!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25b0456b5a2e7%3A0x68bdf865dda0b669!2sBrooklyn%20Botanic%20Garden%20Shop!5e0!3m2!1sen!2sbd!4v1590597267201!5m2!1sen!2sbd"
style="height:100%;width:100%;border:0px;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</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>