@charset "utf-8";

/**
*
* ----------------------------------------------------------
*
* Template : Homefi - Real Estate HTML Template
* Author : PixelsMade
* 更多下载：http://www.bootstrapmb.com
*
* ----------------------------------------------------------
*
**/

/* Table Of Content
---------------------------------------------------------
01. General CSS
02. Global Design
03. Header and Toolbar
04. Language Switcher
05. Banner
06. Filter Inputs
07. Features
08. Property
09. Property Details
10. Video Lightbox
11. About Us
12. Counters
13. Property Category
14. Testimonial
15. Contact
16. FAQ
17. Blogs
18. Footer
19. Sidebar
20. Layout Filter
21. Sign In/Up
22. Other Pages
--------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;900&display=swap');

:root {
    /* Color */
    --body-color: #282A2E;
    --title-color: #282A2E;
    --text-color: #647589;
    --primary-color: #282A2E;
    --secondary-color: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);
    --white-color: #ffffff;
    --light-white-color: #EDEDED;
    --dark-color: #282A2E;
    --body-bg: #ffffff;
    /* Typography */
    --body-font: "Microsoft YaHei", sans-serif;
    --title-font: "Microsoft YaHei", sans-serif;
    --footer-font: "Microsoft YaHei", sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    /* Others */
    --transition: 0.3s;
    --footer-text-color: #b5b5b5;
}

.home-1 {
    --secondary-color: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);
}

.home-2 {
    --secondary-color: #33cccc;
}

.home-3 {
    --secondary-color: #4C7CE3;
    --text-color: #484848;
}

.home-4 {
    --secondary-color: #0096A1;
    --text-color: #484848;
}

.home-5 {
    --secondary-color: #272754;
    --title-color: #272754;
    --text-color: #647589;
    --alternative-color: #EA5D3F;
}

/* -----------------------------------
    01. General CSS
-------------------------------------*/
html,
body {
    font-size: 16px;
    color: var(--body-color);
    font-family: var(--body-font);
    vertical-align: baseline;
    line-height: 27px;
    font-weight: var(--font-weight-normal);
    background: var(--body-bg);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    backface-visibility: hidden;
}

[type="submit"] {
    cursor: pointer;
}

p {
    font-family: var(--body-font);
    color: var(--text-color);
    font-size: 16px;
    line-height: 30.4px;
    font-weight: var(--font-weight-normal);
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: var(--title-color);
    font-weight: var(--font-weight-semi-bold);
    margin-bottom: 0;
}

h1 {
    font-size: 42px;
    line-height: 56px;
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: 34px;
    line-height: 54.4px;
}

h3 {
    font-size: 28px;
    line-height: 42px;
}

h4 {
    font-size: 22px;
    line-height: 26.4px;
}

h5 {
    font-size: 22px;
    line-height: 25.2px;
}

h6 {
    font-size: 16px;
    line-height: 21.44px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    outline: none !important;
}

a:active,
a:hover {
    text-decoration: none;
    outline: 0 none;
    color: var(--body-color);
}

.fix {
    overflow: hidden;
}

.no-marg {
    margin: 0;
}

pre {
    display: block;
    margin: 0 0 30px;
    padding: 9px;
    word-wrap: break-word;
    word-break: break-all;
    color: #333;
    border: 1px solid #ededed;
    border-radius: 0;
    background-color: #f9f9f9;
    font-size: 13px;
    line-height: 1.42857143;
}

blockquote {
    padding: 25px 35px;
    background: #f5f5f5;
    margin: 30px 0 30px 30px;
    box-shadow: -5px 0 #232323;
}

::-moz-selection {
    background: var(--primary-color);
    text-shadow: none;
    color: #ffffff;
}

::selection {
    background: var(--primary-color);
    text-shadow: none;
    color: #ffffff;
}

input[type="email"],
input[type="text"],
textarea,
input[type="number"],
select,
button {
    border: none;
    outline: none;
}

textarea{
    overflow: hidden;
}

video{
    width:100%;
}

@-webkit-keyframes autofill {
    to {
        color: inherit;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.text-light {
    color: var(--light-white-color);
}

.text-color{
    background: var(--secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    background-clip: text;
}

.pt-100 {
    padding-top: 100px !important;
}

.pt-130 {
    padding-top: 130px !important;
}

.pt-200 {
    padding-top: 200px !important;
}

.pt-320 {
    padding-top: 320px !important;
}

.pb-170 {
    padding-bottom: 170px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-112 {
    padding-bottom: 112px !important;
}

.pr-60{
    padding-right: 60px;
}

.mt-minus-90 {
    margin-top: -90px;
}

.mb-minus-90 {
    margin-bottom: -90px;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mt-100 {
    margin-top: 100px;
}

.scroll-mt-120{
    scroll-margin-top: 120px;
}

.h-310{
    height:310px;
}

.img-h-494 {
    height: 494px;
}

.img-h-300 {
    height: 300px;
}

.img-h-335 {
    width:100%;
    height: 335px;
}

.img-fit-cover{
    object-fit:cover;
}

.color-white {
    color: var(--white-color);
}

.align-items-center{
    align-items:center;
}
/* -----------------------------------
    02. Global Design
-------------------------------------*/
.carousel-full-container .owl-stage-outer {
    overflow: visible;
}

.home-1 .carousel-full-container .owl-stage-outer,
.home-2 .carousel-full-container .owl-stage-outer{
    padding-bottom: 132px;
}

.home-4 .carousel-2 .owl-stage-outer,
.home-5 .owl-stage-outer{
    padding-bottom: 70px;
}

.banner-5 .owl-stage-outer,
.home-5 .brands-wpr .owl-stage-outer{
    padding-bottom: 0;
}

.carousel-full-container .owl-carousel .owl-stage{
    cursor: none;
    pointer-events: none;
}

.carousel-full-container .owl-item{
    opacity: 0;
    visibility: hidden;
    cursor: none;
    pointer-events: none;
}

.carousel-full-container .owl-item.active{
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    pointer-events: auto;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  position: absolute;
  top: -100px;
  right: 0;
  font-size: 20px;
  color: var(--primary-color);
  width: 32px;
  height: 32px;
  background-color: var(--white-color);
  box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.12);
  outline: none;
  transition: var(--transition);
}

.home-4 .owl-carousel .owl-nav .owl-prev,
.home-4 .owl-carousel .owl-nav .owl-next{
    top: auto;
    bottom: -15px;
    right: 45%;
}

.home-5 .owl-nav{
    display: none;
}

.carousel-2 .owl-carousel .owl-nav .owl-prev,
.carousel-2 .owl-carousel .owl-nav .owl-next{
    width: 45px;
    height: auto;
    color: var(--text-color);
    box-shadow: none;
}

.owl-carousel .owl-nav .owl-prev{
    right: 40px;
}

.carousel-2 .owl-carousel .owl-nav .owl-prev{
    right: 110px;
}

.home-4 .owl-carousel .owl-nav .owl-prev{
    right: 55%;
}

.carousel-2 .owl-nav i{
    opacity: .8;
}

.carousel-2 .owl-carousel .owl-nav .owl-prev::after,
.carousel-2 .owl-carousel .owl-nav .owl-next::before{
    position: absolute;
    content: "";
    top: 48%;
    left: 18px;
    width: 45px;
    height: 1px;
    background-color: var(--text-color);
    transform: translateY(-48%);
    transition: var(--transition);
}

.carousel-2 .owl-carousel .owl-nav .owl-next::before{
    left: auto;
    right: 18px;
}

.carousel-2 .owl-carousel .owl-prev:hover::after,
.carousel-2 .owl-carousel .owl-next:hover::before{
    width: 65px;
    background-color: var(--secondary-color);
}

.owl-carousel .owl-nav button:hover i{
  color: var(--secondary-color);
}

.carousel-2 .owl-carousel .owl-nav button:hover i{
    color: var(--secondary-color);
}

.home-1 .owl-nav button:hover i{
    color: #709DFF;
}

.home-2 .owl-carousel .owl-nav .owl-prev,
.home-2 .owl-carousel .owl-nav .owl-next{
    top: -50px;
}

.owl-dots{
    display: none;
}

.home-5 .owl-dots{
    position: absolute;
    bottom: 2px;
    left: 50%;
    display: block;
    transform: translateX(-50%);
}

.owl-carousel .owl-dot {
    width: 14px;
    height: 14px;
    background-color: rgba(72,72,72,.5) !important;
    border-radius: 50%;
    outline: none;
    margin-right: 5px;
    transition: 0.3s;
}
  
.owl-carousel .owl-dot.active {
    width: 38px;
    background-color: var(--alternative-color) !important;
    border-radius: 7px;
}

.thumb{
    position: relative;
    overflow: hidden;
}

.thumb img{
    transition: transform .5s ease-in-out;
}

.thumb:hover img{
    transform: scale(1.1);
}

.card{
    overflow: hidden;
}

.card-image img{
    transition: transform .5s;
}

.card-image .image-overlay {
    background: linear-gradient(360deg, #33cccc, rgba(49, 49, 49, 0) 93.77%);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px;
}

.card-content h4{
    color: var(--white-color);
}

.card-content p{
    color: var(--white-color);
}

.card-content a{
    display: flex;
    align-items: center;
    gap: 16px;
}

.carousel-left .card-content a {
    justify-content: flex-end;
}

.tag{
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-block;
    min-width: 70px;
    height: 25px;
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    color: var(--white-color);
    background: var(--secondary-color);
    text-align: center;
    line-height: 25px;
    z-index: 1;
}

.arrow{
    position: relative;
    display: inline-block;
    width: 17px;
    height: 1px;
    background: var(--white-color);
    transition: width .2s linear;
}

.arrow::after{
    position: absolute;
    content: "\f054";
    top: -5px;
    right: 0;
    font: var(--font-weight-semi-bold) 10px 'Font Awesome 6 Free';
    color: var(--white-color);
}

.card-content a:hover .arrow{
    width: 73px;
    height: 2px;
    background: var(--secondary-color)
}

.card-content a:hover .arrow::after{
    top: -6px;
    font-size: 14px;
    color: #4E86FF;
}

form label{
    display: block;
    font-size: 14px;
    font-family: var(--footer-font);
}

input:not([type="checkbox"]),
textarea{
    width: 100%;
    height: 16px;
    color: var(--white-color);
    background-color: transparent;
    border-bottom: 1px solid rgba(100, 117, 137, 0.4);
    margin-bottom: 35px;
    line-height: 16px;
}

.input-grp-2 input:not([type="checkbox"]),
.input-grp-2 textarea{
    width: 100%;
    height: 60px;
    font-size: 14px;
    color: #83868C;
    background-color: rgba(237,237,237,.5);
    border: none;
    padding: 0 16px;
    margin-bottom: 20px;
    line-height: 60px;
}

.input-grp-2 textarea{
    height: 170px;
    margin-bottom: 0;
}

.input-grp-2 button{
    height:60px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.hom-btn{
    display: inline-block;
    width: 125px;
    height: 45px;
    font: var(--font-weight-semi-bold) 14px/20.02px var(--title-font);
    color: var(--white-color);
    letter-spacing: .28px;
    background: var(--secondary-color);
    line-height: 45px;
    text-align: center;
    border: none;
}

.hom-btn:hover{
    color: var(--white-color);
}

.submit-btn{
    width: 100%;
    height: 52px;
    font: var(--font-weight-semi-bold) 16px var(--title-font);
    background: var(--secondary-color);
    outline: none;
    border: none;
}

.sec-spacer {
    padding: 132px 0;
}

.sec-spacer-top {
    padding-top: 132px;
}

.sec-spacer-top-85 {
    padding-top: 85px;
}

.sec-spacer-top-95 {
    padding-top: 95px;
}

.sec-spacer-bottom {
    padding-bottom: 132px;
}

.sec-spacer-bottom-75 {
    padding-bottom: 75px;
}

.sec-spacer-bottom-80 {
    padding-bottom: 80px;
}

.sec-spacer-bottom-100 {
    padding-bottom: 100px;
}

.sec-spacer-x{
    padding: 0 100px;
}

.sec-gap{
    margin: 132px 0;
}

.sec-heading-4{
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}

.sec-heading-5{
    max-width: 30%;
    margin: 0 auto;
    text-align: center;
}

.sec-heading-1 .sec-title{
    font-size: 32px;
    line-height: 36.8px;
}

.sec-heading-1 .sec-sub-title,
.sec-heading-1 .sec-title span{
    background: linear-gradient(109.62deg, #FFAD6E 6.45%, #FF892F 89.54%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sec-heading-2 .sec-sub-title{
    font-size: 22px;
    line-height: 29.48px;
    color: #4C7CE3;
    padding-top: 8px;
}

.home-2 .sec-heading-2 .sec-sub-title {
    color: var(--secondary-color);
}
.sec-heading-5 .sec-sub-title{
    font-size: 18px;
    line-height: 25.92px;
    color: var(--alternative-color);
}

.overflow-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

.title-inner {
    font-size: 42px;
    line-height: 67.2px;
}

.overflow-des {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
    text-overflow: ellipsis;
}

.nice-select {
    height: max-content;
    font: var(--font-weight-normal) 14px var(--footer-font);
    color: var(--text-color);
    border: none;
    padding: 0;
    margin-top: 10px;
}

.nice-select::after{
    content: "\f107";
    top: 50%;
    right: 12px;
    font: var(--font-weight-semi-bold) 16px 'Font Awesome 6 Free';
    color: var(--primary-color);
    width: auto;
    height: auto;
    border: none;
    margin-top: 0;
    transform: rotate(0) translateY(-50%);
}

.nice-select.open:after{
    content: "\f106";
    transform: rotate(0) translateY(-50%);
}

/* -----------------------------------
    03. Header and Toolbar
-------------------------------------*/

.hom-header{
    position: static;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
}

.hom-header.sticky{
    position: fixed;
    background-color: var(--white-color);
    box-shadow: 0 5px 15px rgb(0 0 0 / 7%);
}

.header-wpr{
    background-color: var(--body-bg-color);
}

.hom-nav-wpr{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 40px;
}

.hom-nav-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.hom-nav-menu li{
    position: relative;
}

.hom-nav-menu li a{
    display: block;
    font: var(--font-weight-medium) 14px/21px var(--title-font);
    color: var(--primary-color);
    padding: 30px 0;
}

.hom-nav-menu .sub-menu li{
    display: block;
}

.nav-action{
    display: flex;
    align-items: center;
}

.nav-action .hom-btn {
    width:95px;
    }

.menu-item-has-children a i.fa-angle-down{
    margin-left:5px;
}

/* -----------------------------------
    04. Language Switcher
-------------------------------------*/
.lang-switcher {
    position: relative;
    margin-right: 40px;
}

.lang-switcher .flag img{
    border-radius: 50%;
    transition: all 0.3s ease-in;
}

.lang-switcher .lang {
    font-size: 14px;
    color: var(--primary-color);
    margin-left: 2px;
    cursor: pointer;
}

.lang-switcher .lang i{
    vertical-align: top;
    margin: 0 4px;
}

.lang-switcher .lang-list {
    position: absolute;
    padding: 12px 12px 6px;
    top: 70px;
    left: 0px;
    width: 100px;
    box-shadow: 0px 15px 65px 5px rgba(0, 0, 0, 0.07);
    opacity: 0;
    visibility: hidden;
    background-color: var(--white-color);
    transition: all 0.3s ease-in;
    z-index: 10;
}

.lang-switcher .lang-list::before {
    content: '';
    display: block;
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--secondary-color)
}
  
.lang-switcher .lang-list .single-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 6px;
    cursor: pointer;
}

.lang-switcher .lang-list-open {
    opacity: 1;
    top: 40px;
    visibility: visible;
}

/* -----------------------------------
    05. Banner
-------------------------------------*/

.banner-cards .card{
    border-radius: 0;
}

.banner-cards .card-content{
    height: 100%;
    background-color: var(--primary-color);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.banner-cards .card:hover .card-content{
    opacity: 1;
    visibility: visible;
}

.banner-cards .card-content p{
    font-size: 14px;
    line-height: 26.6px;
}

.banner-cards .card-content a{
    display: inline-block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    margin-top: 30px;
}

.banner-img.badge{
    padding: 30px 0 55px;
}

.banner-2{
    position: relative;
    z-index: 1;
}

.banner-2 .banner-content{
    display: flex;
    flex-direction: column;
    padding: 80px 0;
}

.banner-3 .banner-content{
    position: relative;
    background: url("../jpg/building.jpg") no-repeat center;
    background-size: cover;
    padding: 140px 40px;
    margin-bottom: 50px;
}

.banner-1 .banner-title{
    position: relative;
    font: var(--font-weight-bold) 45px/65.25px var(--title-font);
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 16px;
    margin-bottom: 32px;
    z-index: 1;
}

.banner-1 .banner-title::before{
    position: absolute;
    content: "";
    top: -25px;
    left: -25px;
    width: 84px;
    height: 84px;
    background: linear-gradient(109.62deg, #FFAD6E 6.45%, #FF892F 89.54%);
    border-radius: 50%;
    z-index: -1;
}

.banner-2 .banner-title{
    font: var(--font-weight-semi-bold) 50px/70px var(--title-font);
}

.banner-3 .banner-title{
    max-width: 430px;
    font: var(--font-weight-semi-bold) 38px/53.2px var(--title-font);
}

.banner-4 .banner-title,
.banner-5 .banner-title{
    font-size: 48px;
    line-height: 67.2px;
}

.banner-3 .banner-des{
    max-width: 430px;
}

.banner-1 .single-counter h3{
    background: linear-gradient(109.62deg, #FFAD6E 6.45%, #FF892F 89.54%);
    -webkit-background-clip: text;
    background-clip: text;
}

.banner-2 .feature-cards-wpr{
    position: relative;
    width: max-content;
    display: flex;
    background-color: var(--white-color);
    margin-top: 20px;
    padding: 20px 20px 0 0;
}

.banner-2 .single-feature{
    max-width: 292.5px;
    padding: 165px 24px 60px 0;
    background-color: var(--white-color);
}

.banner-2 .single-feature.active{
    background-color: var(--secondary-color);
    padding-left: 24px;
    padding-right: 16px;

}

.banner-2 .single-feature i{
    font-size: 28px;
    margin-right: 8px;
}

.banner-2 .single-feature h4{
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.banner-2 .single-feature P{
    font-size: 14px;
    line-height: 26.6px;
    color: var(--primary-color);
}

.banner-2 .single-feature.active *{
    color: var(--white-color);
}

.banner-2 .banner-filters{
    position: absolute;
    top: 20px;
    left: 0;
    background-color: var(--white-color);
    z-index: 10;
}

.banner-3 .banner-filters{
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.banner-2 .nav-shape{
    position: absolute;
    top: 120px;
    right: 80px;
    transform: translateY(-50%);
}

.banner-2 .banner-image img{
    position: absolute;
    top: 0;
    right: 0;
    width: 49.40%;
    height: 100%;
    z-index: -1;
}

.banner-5 .bg-shape{
    position: absolute;
    top: -105px;
    left: 0;
}

.hom-page-title{
    position: relative;
    background: url("../png/inner-banner.png") no-repeat center;
    background-size: cover;
    padding: 135px 0;
    z-index: 1;
}

.hom-page-title::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40,42,46,.0);
    z-index: -1;
}

.hom-breadcrumb li{
    display: inline-block;
}

.hom-breadcrumb li a{
    position: relative;
    display: block;
    font: var(--font-weight-medium) 16px/19.2px var(--title-font);
    color: var(--white-color);
    padding: 0 8px;
    transition: .1s;
}

.hom-breadcrumb li a:hover{
    color: #709DFF;
}

.hom-breadcrumb li:not(:last-of-type) a::before{
    position: absolute;
    content: "";
    top: 2px;
    right: -3px;
    width: 2px;
    height: 15px;
    background-color: var(--white-color);
}

/* -----------------------------------
    06. Filter Inputs
-------------------------------------*/

.filter-tab-links .nav-link{
    position: relative;
    display: inline-block;
    max-width: max-content;
    height: 42px;
    font: var(--font-weight-semi-bold) 16px/24px var(--title-font);
    color: var(--text-color);
    background-color: #EAEAEA;
    padding: 0 30px;
    line-height: 42px;
    text-align: center;
    transition: var(--transition);
}

.filter-tab-links .nav-link.active{
    color: var(--primary-color);
    background: #FFFFFF;
    box-shadow: 0px 7px 30px rgba(9, 16, 20, 0.07);
}

.filter-tab-links .nav-link.active::after{
    position: absolute;
    content: "";
    left: 10px;
    bottom: 0;
    width: calc(100% - 20px);
    height: 2px;
    background: var(--secondary-color);
}

.filter-tab-content .filter-form{
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    background-color: var(--white-color);
    box-shadow: 18px 5px 55px rgba(9, 16, 20, 0.1);
    padding: 15px 30px;
    z-index: 1;
}

.filter-tab-content .filter-form .input-grp{
    height: max-content;
    padding: 0 40px;
    border-right: 1px solid rgba(100, 117, 137, 0.15);
}

.filter-form .input-grp label{
    font: var(--font-weight-medium) 16px var(--title-font);
    color: #000;
}

.filter-form .nice-select::after{
    content: none;
}

.filtr-search-btn{
    width: 68px;
    height: 68px;
    font-size: 24px;
    color: var(--white-color);
    background: var(--secondary-color);
    line-height: 68px;
    text-align: center;
}

.hom-filters .filter-tab-content .filter-form{
    width: 100%;
    justify-content: space-between;
}

.hom-filters .filter-form input[type="text"]{
    max-width: 120px;
    font:var(--font-weight-normal) 14px var(--footer-font);
    color: var(--text-color);
    border-bottom: none;
    margin-bottom: 0;
}

.dropdown-menu{
    padding: 16px;
    min-width: 240px;
    max-width: 100%;
    background-color: var(--white-color);
    border: 1px solid var(--secondary-color);
}

.datepicker-days{
    width: 100%;
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.datepicker-days td{
    padding: 5px 8px;
    cursor: pointer;
    transition: var(--transition);
}

.datepicker-days .day:hover,
.datepicker-days .day.active{
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 4px;
}

/* -----------------------------------
    07. Features
-------------------------------------*/

.features-1{
    position: relative;
    background-color: var(--primary-color);
    padding: 80px 0 85px;
    z-index: 1;
}

.features-1::before{
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("../png/abstract-bg.png") no-repeat center;
    background-size: cover;
    z-index: -1;
}

.features-1 *{
    color: var(--light-white-color);
}

.features-2 .single-feature{
    background-color: var(--white-color);
    box-shadow: 0 7px 55px rgba(9, 16, 20, 0.05);
    padding: 55px 32px 70px 45px;
    transition: background-color var(--transition);
}

.features-2 .single-feature:hover{
    background-color: var(--secondary-color);
    box-shadow: none;
}

.features-2 .single-feature:hover *{
    color: var(--white-color);
}

.features-3 .single-feature{
    margin-bottom: 30px;
}

.features-2 .single-feature .icon{
    font-size: 50px;
    color: var(--secondary-color);
    margin-bottom: 24px;
}

.features-3 .single-feature .icon{
    width: 60px;
    height: 60px;
    font-size: 28px;
    color: var(--secondary-color);
    background-color: #E2EBFF;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    margin-bottom: 24px;
}

.features-4 .single-feature .icon{
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
    z-index: 1;
}

.features-4 .single-feature .icon::after{
    position: absolute;
    content: "";
    top: 5px;
    right: -20px;
    width: 48px;
    height: 48px;
    background-color: #F1F2F6;
    border-radius: 50%;
    z-index: -1;
}

.features-1 .single-feature h2{
    font-size: 38px;
    line-height: 31.92px;
    margin-bottom: 24px;
}

.features-2 .single-feature h4{
    font-size: 28px;
    line-height: 33.6px;
}

.features-3 .single-feature h4{
    font-size: 26px;
    line-height: 31.2px;
}

.features-4 .single-feature h4{
    font-size: 25px;
    line-height: 36px;
}

.features-3 .single-feature p{
    color: var(--primary-color);
}

.features-3 .overlay-text-2{
    left: -100px;
    right: auto;
}

.features-3 .overlay-text-2.experience-text{
    top: 60%;
    left: -50px;
    right: auto;
}


/* -----------------------------------
    08. Property
-------------------------------------*/

.property-locations-2 .card-content p{
    color: #4C7CE3;
}

.property-list .single-property{
    display: grid;
    grid-template-columns: 1.75fr 2fr;
    margin-bottom: 24px;
}

.property-image .image-overlay{
    top: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: var(--white-color);
    background-image: linear-gradient(360deg, #0F0F0F 0%, rgba(49, 49, 49, 0) 93.77%);
}

.property-image:hover .image-overlay{
    top: 0;
}

.property-image .image-overlay img{
    width: 40px;
    height: 40px;
}

.property-image .image-overlay i{
    color: var(--white-color);
}

.single-property .property-content{
    box-shadow: 18px 5px 55px rgba(9, 16, 20, 0.1);
    padding: 30px;
}

.property-list .single-property .property-content{
    padding: 20px 30px;
}

.property-content .apart-ads{
    font-size: 12px;
    margin-bottom: 2px;
}

.property-content .meta-data{
    display: flex;
    align-items: center;
    gap:24px;
    padding: 24px 0 26px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(100, 117, 137, 0.2);
}

.property-content .meta-data p{
    font: var(--font-weight-normal) 14px/16.8px var(--footer-font);
}

.property-content .meta-data i{
    background: var(--secondary-color);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.property-content .price{
    font-size: 28px;
    line-height: 33.6px;
    color: var(--secondary-color);
}

.properties-1 .property-content .price{
    font-size: 24px;
    line-height: 28.8px;
}

.properties-4 .property-content .price{
    color: var(--primary-color);
}

.properties-5 .property-content .price{
    color: var(--alternative-color);
}

.property-content .price sub{
    font-size: 16px;
}

.property-content .details-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 40px;
    gap: 5px;
    font: var(--font-weight-medium) 12px/17.16px var(--title-font);
    color: var(--secondary-color);
    text-align: center;
    line-height: 40px;
}

.properties-3 .details-btn{
    border: 1px solid var(--secondary-color);
}

.properties-4 .details-btn,
.properties-5 .details-btn{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.details-btn .arrow{
    background: var(--secondary-color);
}

.details-btn:hover .arrow{
    width: 24px;
}

.properties-4 .details-btn .arrow,
.properties-5 .details-btn .arrow{
    background: var(--white-color);
}

.details-btn .arrow::after {
    color: var(--secondary-color);
}

.properties-4 .details-btn .arrow::after,
.properties-5 .details-btn .arrow::after{
    color: var(--white-color);
}

.properties-2 .property-content .meta-data{
    padding: 8px 0 13px;
}

.properties-2 .meta-data p{
    color: var(--primary-color);
}

.property-list .hom-btn,
.property-grid .hom-btn{
    position: relative;
    width: 100px;
    height: 36px;
    font-size: 12px;
    line-height: 36px;
    z-index: 1;
}

.property-list .hom-btn::after,
.property-grid .hom-btn::after{
    position: absolute;
    content: "";
    bottom: 0;
    left: 10px;
    width: 80%;
    height: 50%;
    /*background: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);*/
    filter: blur(15px);
    z-index: -1;
}
/* -----------------------------------
    09. Property Details
-------------------------------------*/

.hom-property-details{
    padding: 132px 0 60px;
}

.single-property-details .property-image img{
    min-height: 180px;
}

.single-property-details .property-content{
    padding: 40px 0 30px;
}

.single-property-details .property-content h3{
    line-height: 33.6px;
    margin-bottom: 5px;
}

.single-property-details .property-content .price{
    font-size: 24px;
    line-height: 28.8px;
    margin-top: 5px;
}

.single-property-details .property-content .meta-data{
    justify-content: flex-end;
    gap: 40px;
    border-bottom: none;
    padding: 0;
    margin: 24px 0 0;
}

.single-property-details .meta-data li{
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-property-details .meta-data .icon{
    display: inline-block;
    width: 38px;
    height: 38px;
    background-color: #EDF3FF;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
}

.single-property-details .meta-data p{
    font: var(--font-weight-medium) 11px/13.2px var(--body-font);
    text-align: left;
}

.single-property-details .meta-data p:first-child{
    color: var(--primary-color);
}

.single-property-details .property-content .hom-btn{
    width: 56px;
    height: 32px;
    font-size: 12px;
    line-height: 32px;
}

.hom-property-features{
    border-top: 1px solid rgba(100, 117, 137, 0.2);
    border-bottom: 1px solid rgba(100, 117, 137, 0.2);
    padding: 30px 0;
    margin: 30px 0;
}

.hom-property-features .feature-list{
    column-count: 3;
}

.feature-list li{
    margin-bottom: 14px;
    list-style: none;
}

.feature-list li b{
    margin-right: 10px;
}

.amenety-list{
    column-count: 3;
}

.amenety-list li{
    position: relative;
    color: var(--title-color);
    padding-left: 24px;
    margin-bottom: 14px;
    list-style: none;
}

.amenety-list li::before{
    position: absolute;
    content: url("../svg/check.svg");
    left: 0;
}

.floor-plan-faq .faq-list input[type="radio"]:checked ~ label{
    color: var(--white-color);
    background: var(--secondary-color);
    padding: 25px;
}

.floor-plan-faq .faq-list .content{
    padding: 20px 40px;
}

.floor-plan-faq .faq-list .content img{
    display: block;
    margin: 0 auto;
}

.floor-plan-faq .faq-list input[type="radio"]:checked ~ .faq-content-wpr{
    height: max-content;
}

.hom-review-list .single-review,
.hom-comment-list .single-comment{
    display: grid;
    grid-template-columns: 82px 1fr;
    grid-column-gap: 16px;
    margin-bottom: 70px;
}

.hom-review-list .single-review h5,
.hom-comment-list .single-comment h5{
    font: var(--font-weight-medium) 22px/35.3px var(--title-font);
}

.hom-review-form h6{
    font: var(--font-weight-medium) 17px/27.2px var(--title-font);
    margin-bottom: 15px;
}

/* -----------------------------------
    10. Video Lightbox
-------------------------------------*/

.hom-video-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 60px 0;
    z-index: 1;
}

.hom-video-container::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, #0F0F0F 0%, rgba(49, 49, 49, 0) 93.77%);
}

.hom-vid-icon {
    display: inline-block;
    padding: 0;
    height: 75px;
    width: 75px;
    text-align: center;
    background: var(--secondary-color);
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hom-vid-icon i {
    line-height: 75px;
    font-size: 24px;
    font-weight: 900;
    color: var(--white-color);
    margin-left: 3px;
}

.hom-vid-icon i:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 20px;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    box-shadow: 0 0 rgb(255 255 255 / 10%), 0 0 0 15px rgb(255 255 255 / 10%),
        0 0 0 30px rgb(255 255 255 / 10%);
    animation: ripple-wave1 1s linear infinite;
    animation-play-state: running;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

@keyframes ripple-wave1 {
    to {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),
            0 0 0 30px rgba(255, 255, 255, 0.1),
            0 0 0 45px rgba(255, 255, 255, 0.02);
    }
}

.mfp-wrap .mfp-container .mfp-close {
    cursor: pointer;
    background: #4E86FF;
    border: 0;
    outline: 0;
    padding: 0;
    display: block;
    z-index: 1046;
    box-shadow: none;
    text-align: center;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    position: absolute;
    top: -60px;
    right: 0;
    color: #fff;
    opacity: 1;
}

/* -----------------------------------
    11. About Us
-------------------------------------*/

.about-us-content h3 {
    font-size: 29px;
    line-height: 40.6px;
}

.about-us-content h6{
    color: var(--alternative-color);
}

.about-us-content .achivement-counter{
    background-color: rgba(237,237,237,.3);
    padding: 24px 50px;
    margin: 28px 0;
}

.info-list li{
    position: relative;
    margin-bottom: 8px;
    padding-left: 32px;
}

.info-list li::before{
    position: absolute;
    content: "\f00c";
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    color: #1980FA;
    font-size: 16px;
    font-family: "Font Awesome 6 Free";
    font-weight: var(--font-weight-semi-bold);
    background-color: #ECF4FE;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
}

.overlay-text{
    position: absolute;
    width: 290px;
    left: 28px;
    bottom: 40px;
    background-color: rgba(255,255,255,.88);
    padding: 30px 38px;
}

.overlay-text-2{
    position: absolute;
    top: 40%;
    right: -50px;
    width: 250px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-column-gap: 8px;
    background-color: var(--white-color);
    box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.12);
    padding: 20px;
}

.overlay-text::before{
    position: absolute;
    content: url("../svg/color-quote.svg");
    top: -25px;
    left: 50%;
    width: 50px;
    height: 50px;
    background-color: var(--white-color);
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    transform: translateX(-50%);
}

.overlay-text p{
    font: var(--font-weight-medium) 20px/32px var(--title-font);
    color: var(--primary-color);
}

.overlay-text-2 p{
    font: var(--font-weight-medium) 14px/21px var(--title-font);
    color: var(--primary-color);
}

.about-us-3 .about-us-content h3,
.about-us-4 .about-us-content h3{
    font-size: 35px;
    line-height: 50.4px;
}

.about-us-5 .about-us-content h3{
    font-size: 38px;
    line-height: 54.72px;
}

.about-us-1 .about-us-content p,
.about-us-3 .about-us-content p{
    max-width: 90%;
}

.about-us-1 .info-list{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background-color: var(--primary-color);
    padding: 30px 45px 15px;
    margin: 30px 0;
    z-index: 1;
}

.about-us-1 .info-list::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../png/about-abstract.png") no-repeat center;
    background-size: cover;
    z-index: -1;
}

.about-us-3 .info-list li{
    margin-bottom: 24px;
}

.about-us-4 .info-list li{
    padding-left: 60px;
    margin-bottom: 14px;
}

.about-us-1 .info-list li::before{
    content: url(../svg/icon-rocket.svg);
    background-color: transparent;
    line-height: 40px;
}

.about-us-3 .info-list li::before{
    top: 5px;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.about-us-4 .info-list li::before{
    color: var(--secondary-color);
    background-color:  #D8FCFF;
}

.about-us-4 .info-list h5{
    font: var(--font-weight-medium) 20px var(--title-font);
    margin-bottom: 8px;
}

.about-us-1 .info-list p{
    max-width: 100%;
    color: var(--light-white-color);
}

.about-us-3 .about-image{
    position: relative;
    height: 100%;
    background: url("../jpg/about-2.jpg") no-repeat center;
    background-size: cover;
}

.about-us-2 .single-counter h3{
    font-size: 35px;
    line-height: 52.5px;
}

.about-us-2 .about-image img{
    height:510px;
    object-fit:cover;
}

.about-us-3 .single-counter h2 {
    font-size: 35px;
    line-height: 52.5px;
    color: var(--secondary-color);
}

.about-us-3 .single-counter p{
    font: var(--font-weight-semi-bold) 16px/24px var(--title-font);
    color: var(--primary-color);
}

.about-us-3 .overlay-text-2.experience-text{
    top: 60%;
    right: -100px;
}

/* -----------------------------------
    12. Counters
-------------------------------------*/

.counters-wpr{
    max-width: 70%;
    background-color: var(--primary-color);
    padding: 70px 70px;
    margin: 0 auto;
}

.single-counter h3{
    background: var(--secondary-color);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.counters-1{
    position: relative;
    background: url("../jpg/counter-banner.jpg") no-repeat center;
    background-size: cover;
    padding: 135px 0;
    z-index: 1;
}

.counters-1::before{
    position: absolute;
    content: "";
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(72,72,72,.35);
    z-index: -1;
}

.counters-1 .single-counter{
    display: grid;
    grid-template-columns: 90px 140px;
    grid-column-gap: 10px;
    margin-bottom: 50px;
}

.counters-2 .single-counter{
    margin-bottom: 80px;
}

.counters-1 .single-counter h2{
    color: var(--secondary-color);
}

.counters-2 .single-counter h2{
    font-size: 40px;
    line-height: 60px;
    color: var(--alternative-color);
}

.counters-1 .single-counter p{
    color: var(--white-color);
}

.counters-2 .single-counter p{
    font-size: 22px;
    line-height: 33px;
    color: var(--title-color);
}

.counters-1 .brands-wpr{
    border-top: 1px solid rgba(72,72,72,.8);
    padding: 40px 0 0;
}

.counters-1 .brands-wpr .single-brand{
    width: 120px;
}

/* -----------------------------------
    13. Property Category
-------------------------------------*/

.property-tab-links .nav-link{
    font: var(--font-weight-medium) 16px/19.2px var(--title-font);
    color: var(--primary-color);
    border: 1px solid transparent;
    padding: 5px;
    margin-left: 35px;
}

.property-tab-links .nav-link.active{
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.property-tab-content .single-property,
.property-tab-content .property-image,
.property-tab-content .property-image img{
    height: 100%;
}

.image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.property-types{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}

.nav-shape{
    position: relative;
    top: 20px;
    margin-left: 24px;
}

.property-category-5 .property-tab-links .nav-link{
    position: relative;
    display: inline-block;
    font-size: 23px;
    color: var(--title-color);
    line-height: 27.6px;
    padding: 16px 0;
    margin-left: 0;
    border: none;
}

.property-category-5 .property-tab-links .nav-link.active{
    color: var(--alternative-color);
}

.property-category-5 .property-tab-links .nav-link.active::after{
    position: absolute;
    content: "";
    top: 50%;
    right: -70px;
    width: 48px;
    height: 1px;
    background-color: var(--alternative-color);
}

/* -----------------------------------
    14. Testimonial
-------------------------------------*/

.testimonial-1 {
    background-color: #33cccc;
}

.testimonial-1 .brands-wpr{
    padding: 60px 0 80px;
}

.brands-2 .single-brand img{
    opacity: .5;
}

.single-review-2{
    background-color: var(--white-color);
    box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.06);
    padding: 24px;
}

.testimonial-5 .single-review-2{
    padding: 50px 14px 32px 32px;
}

.single-review-2 .client-desig{
    display: grid;
    grid-template-columns: 60px max-content;
    grid-column-gap: 16px;
    margin-bottom: 16px;
}

.single-review-2 .client-desig p{
    font-size: 14px;
    line-height: 16.94px;
    color: #647589;
    margin: 4px 0;
}

.reviews-2 .review-ratings img,
.single-review-2 .client-details img{
    width: auto;
}

.review-msg{
    position: relative;
    font: var(--font-weight-medium) 20px/38px var(--body-font);
    padding: 0 50px 0 75px;
}

.single-review-2 .review-msg{
    font: var(--font-weight-normal) 12px/22.8px var(--body-font);
    color: #112200;
    padding: 0;
}

.testimonial-5 .single-review-2 .review-msg{
    color: var(--text-color);
    margin-bottom: 24px;
}

.review-msg::before{
    position: absolute;
    content: url("../svg/quote.svg");
    top: -40px;
    left: 50px;
}

.single-review-2 .review-msg::before{
    content: none;
}

.testimonial-5 .review-msg::before{
    content: url("../svg/quote-2.svg");
    top: -25px;
    left: -24px;
}

.reviews-1{
    padding: 50px 0;
    border-bottom: 1px solid rgba(237,237,237,.4);
}

.reviews-1 .client-desig p{
    background: linear-gradient(109.62deg, #FFAD6E 6.45%, #FF892F 89.54%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reviews-2 .card-content{
    position: relative;
    box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.06);
    border-left: 4px solid var(--secondary-color);
    padding: 35px 40px;
    margin-bottom: 24px;
}

.reviews-2 .card-content:last-child{
    border-left: none;
    border-right: 4px solid var(--secondary-color);
}

.reviews-2 .card-content h4{
    font-size: 24px;
    color: var(--primary-color);
}

.reviews-2 .card-content P{
    font-size: 14px;
    color: var(--text-color);
    margin-top: 10px;
}

.reviews-2 .review-msg{
    color: var(--primary-color);
    padding: 0;
    padding-left: 10px;
}

.reviews-2 .review-msg::before{
    content: url("../svg/quote-2.svg");
    top: -30px;
    left: 0;
}

.reviews-2 .client-desig::before{
    position: absolute;
    content: "";
    width: 45px;
    height: 1px;
    top: 12px;
    left: 0;
    background-color: var(--primary-color);
}

.testimonial-2 .reviews-2 .owl-dots{
    display: block;
    margin-top: 50px;
}

.testimonial-2 .owl-carousel .owl-dot.active{
    background-color: var(--secondary-color) !important;
}

.testimonial-3 .reviews-wpr .container .owl-nav{
    display: none;
}

/* -----------------------------------
    15. Contact
-------------------------------------*/

.contact-wpr{
    padding: 75px 70px;
    box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.06);
}

.contact-2{
    position: relative;
    background: url("../jpg/contact-banner.jpg") no-repeat center;
    background-size: cover;
    z-index: 1;
}

.contact-2::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39,39,84,.55);
    z-index: -1;
}

.contact-2 .contact-wpr{
    position: relative;
    background-color: var(--secondary-color);
    padding: 70px 60px;
    margin: -60px 0;
    z-index: 1;
}

.contact-2 .contact-wpr .bg-shape{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.contact-2 form label{
    color: var(--white-color);
}

.contact-2 .contact-form textarea{
    height: 130px;
    margin-bottom: 8px;
}

.contact-2 .contact-form .hom-btn{
    color: var(--secondary-color);
    background: var(--white-color);
}

.contact-2 .brands-wpr{
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 30px;
    margin-top: 60px;
}

.contact-2 .brands-wpr .owl-dots{
    display: none;
}

.hom-contact-us .contact-links{
    position: relative;
    display: flex;
    flex-direction: column;
    background: url("../jpg/hotel.jpg") no-repeat center;
    padding: 80px 45px 150px;
    z-index: 1;
}

.hom-contact-us .contact-links::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34,54,69,.6);
    z-index: -1;
}

    .hom-contact-us .contact-links a,
    .hom-contact-us .contact-links p {
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        color: var(--white-color);
        margin-bottom: 24px;
    }

/* -----------------------------------
    16. FAQ
-------------------------------------*/

.faq-list li{
    display: block;
    width: 100%;
    height: auto;
    margin: 5px 0;
    overflow: hidden;
}

.faq-list li input[type="radio"]{
    display: none;
}

.faq-list li label{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    font-family: var(--title-font);
    color: var(--primary-color);
    line-height: 20.7px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(100, 117, 137, 0.4);
    cursor: pointer;
    user-select: none;
    transition: 0.45s;
}

.faq-list li input[type="radio"] ~ label i{
    font-size: 12px;
    transition: 0.45s;
}

.faq-list li input[type="radio"]:checked ~ label i.fa-plus::before{
    content: "\f068";
}

.faq-list li input[type="radio"]:hover~ label,
.faq-list li input[type="radio"]:checked ~ label{
    color: #709DFF;
}

.home-2 .faq-list li input[type="radio"]:hover ~ label,
.home-2 .faq-list li input[type="radio"]:checked ~ label{
    color:var(--secondary-color);
}

.faq-content-wpr {
    width: 100%;
    overflow-y: hidden;
    height: 0;
    transition: 0.4s;
}

.faq-content-wpr .content{
    padding: 20px 0;
}

.faq-list li input[type="radio"]:checked ~ .faq-content-wpr{
    height: 120px;
}

.faq-2 .faq-list label{
    font-size: 22px;
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.45;
}

.faq-2 .content{
    max-width: 78%;
    margin-left: 32px;
}

/* -----------------------------------
    17. Blogs
-------------------------------------*/

.blog-banner{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    background-color: var(--primary-color);
    padding: 0 24px;
    text-align: center;
    z-index: 1;
}

.blog-banner::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../png/abstract.png") no-repeat center;
    background-size: contain;
    z-index: -1;
}

.blog-banner h3{
    color: var(--white-color);
    line-height: 44.8px;
}

.blog-image .tag{
    opacity: 0;
    visibility: hidden;
    transition: var(--transition) linear;
}

.blog-image:hover .tag{
    opacity: 1;
    visibility: visible;
}

.blog-meta-data{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 16.8px;
    padding: 16px 0 14px;
    border-bottom: 1px solid #64758933;
}

.blog-title{
    font-weight: var(--font-weight-medium);
    line-height: 25.6px;
    margin: 12px 0;
}

.blog-content .read-more{
    display: inline-block;
    font: var(--font-weight-medium) 14px/22.4px var(--title-font);
    background: var(--secondary-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--secondary-color);
    text-align: center;
}

.blogs-3 .blog-title{
    line-height: 35.2px;
}

.blogs-2 .blog-image .tag{
    top: 0;
    right: 0;
}

.blogs-1 .read-more,
.blogs-grid .blog-content .read-more{
    text-decoration-color: #709DFF;
}

.blogs-3 .read-more{
    width: 112px;
    height: 40px;
    border: 1px solid var(--secondary-color);
    text-decoration: none;
    line-height: 40px;
}

.blogs-5 .read-more{
    background: var(--alternative-color);
    -webkit-background-clip: text;
    background-clip: text;
    text-decoration-color: var(--alternative-color);
}

.single-blog-details{
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 24px;
    margin-bottom: 50px;
}

.single-blog-details .blog-share{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 6px;
}

.single-blog-details .blog-share *:not(i){
    font-family: var(--footer-font);
    font-weight: var(--font-weight-medium);
}

.single-blog-details .blog-social-links a{
    display: inline-block;
    margin-left: 16px;
}

.single-blog-details blockquote{
    font: var(--font-weight-semi-bold) 28px/42px var(--title-font);
    background-color: transparent;
    box-shadow: none;
    margin: 40px 0;
    padding: 0 24px;
}

.blog-navigation a{
    font: var(--font-weight-medium) 18px/28.8px var(--title-font);
}

.blog-navigation a:hover{
    color: #709DFF;
}

/* -----------------------------------
    18. Footer
-------------------------------------*/

.hom-footer{
    background-color: var(--primary-color);
}

.footer-5{
    background-color: #F1F2F6;
}

.hom-footer *{
    color: var(--white-color);
}

.footer-5 *{
    color: var(--secondary-color);
}

.hom-footer p,
.hom-footer a{
    font-family: var(--footer-font);
}

.hom-footer a:hover{
    color: var(--secondary-color);
}

.footer-top{
    padding: 80px 0 40px;
}

.footer-bottom{
    border-top: 1px solid #647589;;
    padding: 30px 0;
}

.footer-widget h5{
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 18px;
}

.footer-menu li a{
    display: block;
    line-height: 27px;
    margin-bottom: 10px;
}

.about-widget p{
    line-height: 25.6px;
    margin-bottom: 24px;
}

.footer-5 .about-widget p{
    color: var(--text-color) !important;
}

.about-widget .footer-contact{
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #242424;
    padding: 24px 30px;
}

.footer-5 .footer-contact{
    background-color: #F8F8F8;
}

.contact-nmbr p{
    font: var(--font-weight-medium) 14px/21px var(--title-font);
    margin-bottom: 0;
}

.newsltr-widget input{
    width: 100%;
    height: 52px;
    background-color: var(--white-color);
    border-color: transparent !important;
    padding: 0 24px;
    margin-bottom: 12px;
}

.newsltr-widget input::placeholder{
    font-size: 14px !important;
    color: var(--text-color) !important;
}

.footer-social-links i{
    display: inline-block;
    font-size: 18px;
    margin-left: 24px;
}

.footer-1 a:hover{
    color: #709DFF;
}

#toTop {
    text-align: center;
    bottom: 90px;
    cursor: pointer;
    display: none;
    position: fixed;
    right: 40px;
    z-index: 999;
    font-size: 18px;
    color: var(--white-color);
    background: var(--secondary-color);
    height: 48px;
    width: 48px;
    line-height: 48px;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 5px 30px rgba(255, 255, 255, 0.18);
}

/* -----------------------------------
    19. Sidebar
-------------------------------------*/

.property-sidebar{
    margin-top: 52px;
}

.sidebar-widget{
    background-color: var(--white-color);
    padding: 40px 30px;
    margin-bottom: 30px;
}

.property-sidebar .sidebar-widget{
    box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.12);
}

.widget-title{
    font: var(--font-weight-medium) 17px/20.4px var(--title-font);
    margin-bottom: 10px;
}

.blog-sidebar .widget-title{
    font: var(--font-weight-semi-bold) 28px/33.6px var(--title-font);
    margin-bottom: 24px;
}

.sidebar-widget .input-grp input,
.filter-widget .nice-select{
    width: 100%;
    height: 45px;
    font-size: 10px;
    line-height: 12px;
    background-color: rgba(237,237,237,.5);
    border-bottom: none;
    border-radius: 0;
    padding: 0 16px;
    margin: 10px 0 35px;
    line-height: 45px;
}

.blog-sidebar .input-grp input{
    height: 63px;
    font: var(--font-weight-normal) 14px var(--footer-font);
    line-height: 63px;
    background-color:  #F5F5F5;
    margin: 0;
}

.sidebar-widget .input-grp .submit-btn{
    position: absolute;
    display: inline-block;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 45px;
    font-size: 10px;
    line-height: 45px;
    background: transparent;
}

.blog-sidebar .input-grp .submit-btn{
    top: 0;
    right: 0;
    width: 90px;
    height: 63px;
    font-size: 24px;
    color: var(--white-color);
    background: var(--secondary-color);
    line-height: 63px;
}

.filter-widget{
    margin-bottom: 30px;
}

.filter-widget .nice-select ul{
    width: 100%;
}

.chklist{
    column-count: 2;
}

.ameneties-widget.chklist{
    column-count: 1;
}

.chklist li input[type="checkbox"]{
    appearance: none;
}

.chklist li label{
    font-size: 10px;
    line-height: 12.1px;
}

.chklist li label > span{
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #EDEDED;
    border-radius: 1px;
    margin-right: 10px;
}

.chklist li input[type="checkbox"]:checked + label > span{
    background: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);
}

.range-slider{
    position: relative;
    width: 100%;
    margin-top: -5px;
}

.range-slider input[type="range"]{
    margin-bottom: 0;
}

.range-slider p,
.range-value{
    font-size: 10px;
    line-height: 12px;
    color: var(--primary-color);
}

.range{ 
    -webkit-appearance: none; 
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    margin-bottom: 10px;
    border: none;
    outline: none;
    user-select: none; 
}

.range::-webkit-slider-thumb{
    position: relative;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 20;
}

.range-thumb{
    position: absolute;
    top: 12px;
    left: 70%;
    width: 10px;
    height: 10px;
    background: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);
    border-radius: 50%;
}

.range-value{
    position: absolute;
    top: 17px;
}

.range-progress{
    position: absolute;
    top: 15px;
    left: 0;
    width: 70%;
    height: 4px;
    background: linear-gradient(90deg, #709DFF 0%, rgba(18, 93, 255, 0.914896) 116.85%, #4E86FF 116.86%);
}

.sidebar-properties .single-property{
    display: grid;
    grid-template-columns: 65px 1fr;
    align-items: center;
    grid-column-gap: 10px;
    background-color: var(--white-color);
    margin-bottom: 10px;
}

.sidebar-properties-2 .single-property .tag{
    top: 10px;
    right: 10px;
    min-width: 35px;
    height: 36px;
    font-size: 12px;
    line-height: 36px;
}

.sidebar-properties .single-property .property-content{
    padding: 0;
    box-shadow: none;
}

.sidebar-properties-2 .single-property .property-content{
    padding: 10px 0;
    margin-bottom: 40px;
    box-shadow: none;
}

.sidebar-properties .single-property h6{
    font: var(--font-weight-medium) 13px/15.6px var(--title-font);
    margin-bottom: 8px;
}

.sidebar-properties-2 .single-property h6{
    font-size: 18px;
}

.sidebar-properties .single-property .meta-data{
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.sidebar-properties-2 .single-property .meta-data{
    font-size: 10px;
    padding: 12px 0;
    margin-bottom: 16px;
}

.sidebar-properties-2 .meta-data p{
    font-size: 10px;
    font-family: var(--footer-font);
}

.sidebar-properties-2 .price{
    font-size: 20px;
    line-height: 24px;
}

.sidebar-properties-2 .price sub{
    font-size: 12px;
}

.category-list li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: var(--font-weight-medium) 16px/19.2px var(--title-font);
    background: var(--primary-color);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 20px;
    transition: background .2s;
}

.category-list li a:hover{
    background: var(--secondary-color);
    -webkit-text-stroke-color: transparent;
    -webkit-background-clip: text;
}

.sidebar-blogs .single-blog{
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    grid-column-gap: 10px;
    margin-bottom: 24px;
}

.sidebar-blogs .blog-title{
    padding: 0;
    margin-bottom: 12px;
    line-height: 19.2px;
}

.sidebar-blogs .blog-meta-data{
    background: var(--secondary-color);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-list a{
    display: inline-block;
    font: var(--font-weight-medium) 14px/22.4px var(--title-font);
    background-color: #EAEAEA;
    padding: 4px 10px;
}

.tag-list a:hover{
    color: #709DFF;
}

/* -----------------------------------
    20. Layout Filter
-------------------------------------*/

.property-filter .nice-select,
.property-filter .nice-select::after{
    font-size: 16px;
    background: var(--secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0;
}

.property-filter .nice-select::after{
    right: -20px;
}

.property-filter .nice-select .option,
.property-filter .list:hover .option:not(:hover){
    font-size: 14px;
    background: var(--text-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-color: var(--text-color) !important;
}

.property-filter .nice-select .option:hover,
.property-filter .nice-select .option.focus, 
.property-filter .nice-select .option.selected.focus{
    background: var(--secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.property-layouts a{
    font-size: 20px;
    color: var(--text-color);
}

.property-layouts a.active{
    color: #709DFF;
}

.hom-pagination .page-number{
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 18px;
    background:  #EDEDED;
    text-align: center;
    line-height: 40px;
    margin-right: 5px;
    transition: .1s;
}

.page-number.active,
.pagination li.active .page-number,
.page-number:hover {
    color: var(--white-color);
    background: var(--secondary-color);
}

/* -----------------------------------
    21. Sign In/Up
-------------------------------------*/

.log-image{
    display:flex;
    align-items:center;
}

.log-form-conatiner{
    /*max-width: 40%;*/
    padding:0 40px;
    margin: 0 auto;
}

.log-form-conatiner h2{
    max-width: 65%;
    font-size: 36px;
    line-height: 43.2px;
    text-align: center;
    margin: 0 auto 24px;
}

.log-form-conatiner a,
.log-form-conatiner p{
    font-size: 14px;
}

.log-form-conatiner .nav-link{
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
}

.log-form-conatiner .nav-link.active{
    background: var(--secondary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.log-form-conatiner .nav-link span{
    display: inline-block;
    width: 19px;
    height: 19px;
    border: 1px solid #A3A3A3;
    border-radius: 50%;
    margin-right: 15px;
    vertical-align: sub;
}

.log-form-conatiner .nav-link.active span{
    background: var(--secondary-color);
    border-color: #709DFF;
    box-shadow: inset 0 0 0 2px #fff;
}

.log-form .input-grp-2 input:not([type="checkbox"]){
    height: 48px;
    line-height: 48px;
}

.log-form input[type="checkbox"]{
    position: relative;
    appearance: none;
    width: 19px;
    height: 19px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    vertical-align: sub;
    margin-right: 5px;
}

.log-form input[type="checkbox"]:checked{
    border-color: transparent;
}

.log-form input[type="checkbox"]:checked::before{
    position: absolute;
    content: "\f00c";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font: var(--font-weight-semi-bold) 12px 'Font Awesome 6 Free';
    color: var(--white-color);
    background: var(--secondary-color);
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
}

.field-validation-error {
    color: red;
}
.el-file {
    position: relative;
    border: 1px dashed #DEDEDE;
    border-radius: 4px;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    background-color: #fff;
    vertical-align: top;
    margin: 0 auto;
}
.el-file input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 300px;
    height: 300px;
}

.el-file img {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
}
.pass-input {
    position: absolute;
    top: 45px;
    right: 15px;
}

.separator {
    position: relative;
    font-size: 12px;
    text-align: center;
    z-index: 1;
    opacity: .6;
}

.separator:before {
    position: absolute;
    content: "";
    width: 100%;
    height: .5px;
    background: #647589;
    left: 0;
    right: 0;
    top: 50%;
    z-index: -1;
}

.form-meta-links a{
    position: relative;
    font-size: 12px;
    color: var(--text-color);
    padding: 0 8px;
}

.form-meta-links a:not(:last-of-type)::after{
    position: absolute;
    content: "";
    top: 1px;
    right: -3px;
    width: 1px;
    height: 90%;
    background-color: var(--text-color);
}

/* -----------------------------------
    22. Other Pages
-------------------------------------*/

.hom-not-found{
    padding: 170px 0;
}

.not-found-content h1{
    font-size: 180px;
    line-height: 216px;
    margin-bottom: 32px;
}

.not-found-content .hom-btn{
    width: 151px;
    height: 57px;
    font: var(--font-weight-semi-bold) 18px/57px var(--title-font);
}

.single-policy h4{
    font-size: 25px;
    margin-bottom: 24px;
}

.terms-heading p{
    position: relative;
    margin: 20px 40px 0;
    padding-left: 50px;
    line-height: 30px;
}

.terms-heading p::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--secondary-color);
}

.hom-terms-conditions .policy-content {
    background-color: #33cccc;
    padding: 50px 0;
    margin: 80px 0 100px;
}

.hom-terms-conditions .policy-content *{
    color: var(--white-color);
}

.terms-conditions-list li{
    display: grid;
    grid-template-columns: 60px 1fr;
    margin-bottom: 40px;
}

.terms-conditions-list li p{
    line-height: 30px;
    margin-top: -5px;
    padding-right: 120px;
}

#toTop i {
    display: inline-block;
}

#toTop:hover {
    background-color: var(--primary-color);
}

@keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes toShortTopFromBottom {
    49% {
        margin-top: 10px;
    }
    50% {
        opacity: 0;
        margin-top: -10px;
    }
    51% {
        opacity: 1;
    }
}

@keyframes float-bob-x {
    0% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }
}

@keyframes float-bob-y {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}