/* HOME.CSS - Route-specific CSS for homepage
   Extracted from main.css for performance optimization
   Contains: Variables, Header, Footer, Hero styles
   Size target: <50KB
*/

    * section

    * Responsive
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
:root {
  --bg-body-color: #1f2124;
  --Black: #000000;
  --White: #ffffff;
  --Text-white: #ffffff;
  --Text: #5c5e61;
  --Text-2: #161e2d;
  --Text-3: rgba(44, 46, 51, 0.6);
  --Text-4: rgba(44, 46, 51, 0.5);
  --Text-5: rgba(44, 46, 51, 0.5);
  --Heading: #2c2e33;
  --Heading-2: rgba(44, 46, 51, 0.5);
  --Note: #a8abae;
  --Note-2: #8e8e93;
  --Primary: #bd8c31;
  --Sub-primary-1: #fef7f1;
  --Sub-primary-2: rgba(241, 145, 61, 0.15);
  --Sub-primary-3: rgba(241, 145, 61, 0.1);
  --shadown: rgba(241, 145, 61, 0.12);
  --Secondary: #2c2e33;
  --Color-1: #06a788;
  --Color-2: #f2695c;
  --Color-3: #bd8c31;
  --Color-4: #7695ff;
  --Color-5: #1563df;
  --Color-6: #fdefe2;
  --Color-7: #25c55b;
  --Color-8: #bd8c31;
  --Line: #ececec;
  --border: rgba(255, 255, 255, 0.1);
  --border-2: rgba(255, 255, 255, 0.8);
  --border-3: rgba(255, 255, 255, 0.5);
  --border-4: rgba(255, 255, 255, 0.6);
  --border-5: rgba(255, 255, 255, 0.7);
}

/*---------- Reset css styles ----------- */
/* Reset Browsers
-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
/* === HEADER STYLES === */
.header {
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.08);
}
.header .header-inner-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 999;
}
.header .header-right {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header .header-right .phone-number {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header .header-right .phone-number p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--Heading);
}
.header .header-right .user {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  border: 1px solid var(--Line);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
}
.header .header-right .user.active .menu-user {
  opacity: 1;
  visibility: visible;
}
.header .header-right .box-user {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.header .header-right .box-user .name {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-size: 16px;
  line-height: 20px;
  align-items: center;
  gap: 6px;
  color: var(--Heading);
}
.header .header-right .box-user .name i {
  font-size: 20px;
}
.header .header-right .box-user.active .menu-user {
  opacity: 1;
  visibility: visible;
}
.header .mobile-button {
  display: none;
  font-size: 25px;
  color: var(--Primary);
}
.header .header-logo {
  padding: 20px 0px 20px;
}
.header .header-logo img {
  width: 120px;
  height: 100px;
}
.header .tf-btn {
  height: 44px;
  border-radius: 12px;
}
.header .icons svg path {
  stroke: var(--Primary);
}
.header.style-2 .header-inner {
  position: relative;
  z-index: 999;
  margin-bottom: -78px;
}
.header.style-2 .header-logo {
  padding: 17px 0px 15px;
}
.header.style-2 .main-menu .navigation > li > a {
  color: var(--White);
}
.header.style-2 .main-menu li a:hover {
  color: var(--Primary);
}
.header.style-2 .header-right .phone-number p {
  color: var(--White);
}
.header.style-2 .header-right .user {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}
.header.style-2 .header-right .user > svg path {
  stroke: var(--White);
}
.header.style-3 .main-menu .navigation > li > a {
  color: var(--White);
}
.header.style-3 .main-menu li a:hover {
  color: var(--Primary);
}
.header.style-3 .header-right .phone-number p {
  color: var(--White);
}
.header.style-3 .header-right .box-user .name {
  color: var(--White);
}
.header.style-3 .header-right .user {
  border-color: rgba(255, 255, 255, 0.1);
}
.header.style-3 .header-right .user svg path {
  stroke: var(--Primary);
}
.header.style-4 {
  box-shadow: unset;
}
.header.style-4 .header-logo {
  padding: 16px 0px 15px;
}
.header.style-5 {
  box-shadow: unset;
  margin-bottom: -82px;
}
.header.style-5 .left {
  display: flex;
  align-items: center;
}
.header.style-5 .main-menu .navigation {
  margin-left: 143px;
}
.header.style-5 .tf-btn {
  color: var(--White);
  border-radius: 999px;
  background-color: var(--Primary);
}
.header.style-5 .tf-btn:hover {
  color: var(--White) !important;
}
.header.style-5 .btn-find {
  background-color: var(--Primary);
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 24px;
  color: var(--White);
}
.header.style-5 .btn-find:hover {
  color: var(--White);
  background-color: var(--Heading);
}
.header.style-6 .header-inner-wrap {
  border-bottom: 1px solid var(--border);
}
.header.style-6 .main-menu .navigation {
  margin-left: 0 !important;
}
.header.style-6 .main-menu .navigation > li > a {
  padding: 41px 20px 36px 0;
  color: var(--White);
}
.header.style-6 .main-menu li a:hover {
  color: var(--Primary);
}
.header.style-6.v1 .main-menu .navigation > li > a {
  padding: 36px 20px 36px 0;
  color: var(--White);
}
.header.style-7 .header-inner {
  max-width: 1920px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
}
.header.style-7 .main-menu .navigation > li > a {
  padding-top: 40px;
}
.header .logo-1 {
  display: none;
}
.header.dashboard {
  position: fixed !important;
  border-bottom: 1px solid rgb(236, 236, 236);
  box-shadow: unset;
  z-index: 9999;
  left: 0;
  background-color: var(--White);
  right: 0;
  top: 0 !important;
  background-color: var(--White);
}
.header.no-shadow {
  box-shadow: none;
}

.header.header-sticky {
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0;
  z-index: 9999;
  -webkit-transform: translateY(-120%);
  -khtml-transform: translateY(-120%);
  -moz-transform: translateY(-120%);
  -ms-transform: translateY(-120%);
  -o-transform: translateY(-120%);
  transform: translateY(-120%);
  -webkit-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  -khtml-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  -moz-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  -ms-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  -o-transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1);
  visibility: hidden;
  background-color: var(--White);
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.header.header-sticky.style-border {
  background-color: var(--Heading);
}
.header.header-sticky.style-border .header-inner-wrap {
  border-bottom: none;
}
.header.header-sticky.style-2 {
  background-color: var(--Heading);
  height: 78px;
}
.header.header-sticky.style-5 {
  height: 78px;
}
.header.header-sticky.style-5 .header-inner-wrap {
  padding: 0;
}
.header.header-sticky.style-5 .main-menu .navigation {
  margin-left: 0px;
}
.header.header-sticky.style-5 .btn-find {
  background-color: var(--Primary);
  color: var(--White);
}
.header.header-sticky.style-5 .btn-find:hover {
  color: var(--White);
  background-color: var(--Heading);
}
.header.header-sticky.style-5 .tf-btn {
/* === FOOTER STYLES === */
#footer {
  background-color: var(--Secondary);
  padding-top: 60px;
}
#footer.style-2 {
  background-color: #161618;
}
#footer.style-2 .footer-menu-list ul li a {
  background-color: #161618 !important;
}
#footer .footer-top {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-wrap: wrap;
  gap: 30px 20px;
}
#footer .footer-main {
  padding: 40px 0 22px;
}
#footer .footer-menu-list .title {
  color: var(--Text-white);
  margin-bottom: 24px;
}
#footer .footer-menu-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
#footer .footer-menu-list ul li a {
  font-size: 16px;
  line-height: 22.4px;
  color: var(--Note);
  position: relative;
}
#footer .footer-menu-list ul li a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  background-color: var(--Primary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#footer .footer-menu-list ul li:hover a {
  color: var(--Primary);
}
#footer .footer-menu-list ul li:hover a::before {
  width: 100%;
}
#footer .footer-menu-list.style-2 ul li a {
  padding-left: 20px;
  position: relative;
  background-color: var(--Secondary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 3;
}
#footer .footer-menu-list.style-2 ul li a::after {
  content: "\e909";
  position: absolute;
  font-family: "icomoon";
  font-size: 16px;
  color: var(--Primary);
  font-size: 12px;
  margin-right: 11px;
  left: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}
#footer .footer-menu-list.style-2 ul li:hover a::before {
  width: 87%;
}
#footer .footer-bottom {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  gap: 10px 20px;
  flex-wrap: wrap;
}
#footer .footer-bottom p a {
  color: var(--Text);
}
#footer .footer-bottom p a:hover {
  color: var(--Primary);
}
#footer .wrap-social {
  gap: 16px;
}
#footer .footer-logo img {
  width: 120px;
  height: 100px;
}

.wrap-contact-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 20px 48px;
  flex-wrap: wrap;
}
.wrap-contact-item .contact-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 33px;
}
.wrap-contact-item .contact-item i {
  font-size: 48px;
  color: var(--Primary);
}
.wrap-contact-item .contact-item svg path {
  stroke: var(--Primary);
}
.wrap-contact-item .contact-item .content {
  position: relative;
}
.wrap-contact-item .contact-item .content .title {
  color: var(--Note);
  margin-bottom: 4px !important;
}
.wrap-contact-item .contact-item .content h6 a {
  color: var(--Text-white);
}
.wrap-contact-item .contact-item .content h6 a:hover {
  color: var(--Primary);
}
.wrap-contact-item .contact-item .content::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 51px;
  background-color: rgba(255, 255, 255, 0.07);
  top: 0;
  left: -18px;
}

.footer-col-block .title-mobile {
  display: none;
  position: relative;
  cursor: pointer;
}
.footer-col-block .title-mobile::after {
  position: absolute;
  content: "";
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: var(--White);
  transition: 0.25s ease-in-out;
}
.footer-col-block .title-mobile::before {
  position: absolute;
  content: "";
  right: 15px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 12px;
  background-color: var(--White);
  transition: 0.25s ease-in-out;
}
.footer-col-block .tf-collapse-content {
  height: auto;
  overflow: hidden;
  transition: height 0.3s ease;
}
.footer-col-block .tf-collapse-content li:first-child {
  margin-top: 15px;
}
/* === HERO/PAGE-TITLE STYLES === */
.page-title {
  position: relative;
  z-index: 10;
  background-position: center;
  background-attachment: fixed;
}
.page-title::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.page-title .heading-title {
  text-align: center;
}
.page-title .heading-title .title {
  color: var(--Text-white);
  margin-bottom: 16px;
}
.page-title .heading-title p {
  color: var(--Text-white);
  line-height: 25.2px;
}
.page-title form fieldset input::placeholder {
  color: rgb(124, 127, 132);
  font-weight: 400;
}
.page-title.home01, .page-title.home05, .page-title.career {
  background-image: url(../images/section/page-title-1.jpg);
  background-attachment: fixed;
  padding: 154px 0 258px;
  background-size: cover;
}
.page-title.home01 .heading-title, .page-title.home05 .heading-title, .page-title.career .heading-title {
  margin-bottom: 45px;
}
.page-title.home01 .tf-dropdown-sort, .page-title.home05 .tf-dropdown-sort, .page-title.career .tf-dropdown-sort {
  padding-right: 30px;
  border-right: 1px solid var(--Line);
}
.page-title.home01 form, .page-title.home05 form, .page-title.career form {
  flex: 1;
}
.page-title.home01 form fieldset input, .page-title.home05 form fieldset input, .page-title.career form fieldset input {
  border: none;
}
.page-title.home01 .form-title, .page-title.home05 .form-title, .page-title.career .form-title {
  padding: 8px 8px 8px 24px;
}
.page-title.home01 .btn-filter, .page-title.home05 .btn-filter, .page-title.career .btn-filter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 54px;
  border-radius: 16px;
  cursor: pointer;
}
.page-title.home02 {
  background-image: url(../images/Buy-and-Rent-Properties-in-Dubai-Earlybird-Properties.jpg);
  padding: 232px 0 294px;
  background-size: cover;
  background-attachment: fixed;
}
.page-title.home02 .heading-title {
  margin-bottom: 80px;
}
.page-title.home02 .form-title {
  padding: 16px;
  gap: 12px;
}
.page-title.home02 form {
  flex-grow: 1;
}
.page-title.home02 .nice-select {
  flex-grow: 1;
}
.page-title.home02 .btn-filter {
  background: var(--Sub-primary-2);
}
.page-title.home02 .btn-filter svg path {
  stroke: var(--Primary);
}
.page-title.home02 .checkbox-item label input:checked ~ .btn-checkbox {
  background-color: var(--Primary);
  border-color: var(--Primary);
}
.page-title.home03 {
  background-image: url(../images/section/page-title-3.jpg);
  background-size: cover;
  padding: 200px 0 310px;
}
.page-title.home03 .heading-title {
  text-align: start;
  margin-bottom: 74px;
}
.page-title.home03 .widget-tabs .widget-menu-tab {
  justify-content: flex-start;
}
.page-title.home03 .form-title {
  padding: 16px;
  gap: 12px;
}
.page-title.home04 {
  background-image: url(../images/section/page-title-4.jpg);
  padding: 112px 0 207px;
  background-size: cover;
}
.page-title.home04 .heading-title {
  margin-bottom: 63px;
}
.page-title.home04 .form-title {
  padding: 16px;
  gap: 12px;
}
.page-title.home04 form {
  flex-grow: 1;
}
.page-title.home04 .nice-select {
  flex-grow: 1;
}
.page-title.home05 {
  background-image: url(../images/section/page-title-5.jpg);
  padding: 237px 0 300px;
  background-size: cover;
}
.page-title.home05 .heading-title {
  margin-bottom: 45px;
}
.page-title.style-2 {
  padding: 132px 0 232px;
  background-image: url(../images/section/page-title-loan.jpg);
  background-size: cover;
}
.page-title.style-2::after {
  display: none;
}
.page-title.style-2 .heading-title .title {
  color: var(--Heading);
}
.page-title.home06::after {
  display: none;
}
.page-title.home06 .heading {
  background-color: var(--bg-body-color);
  height: 100%;
}
.page-title.home06 .heading .title {
  background-image: linear-gradient(-225deg, var(--Note) 50%, var(--White) 50%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 14s linear infinite;
  display: inline-block;
}
.page-title.home06 .heading .title span {
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: var(--White);
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
.page-title.home06 .item {
  display: flex;
  gap: 12px 30px;
}
.page-title.home06 .item .img-wrap {
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.page-title.home06 .item .content {
  padding-top: 11px;
}
.page-title.home06 .item .content p {
  color: var(--border-2);
  margin-bottom: 24px;
}
.page-title.home06 .right {
  overflow: hidden;
}
.page-title.home06 .right .slide-inner {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}
.page-title.home06 .right .swiper {
  border-radius: 24px;
}
.page-title.home06 .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-title.home06 .left .hero-thumbs-1 {
  width: 100%;
}
.page-title.home06 .wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 34px;
}
.page-title.home06 form fieldset input {
  border-radius: 999px;
}
.page-title.home07 {
  background-color: var(--White);
}