/*-----------------------------------*\
#style.css
\*-----------------------------------*/
/**
* copyright 2022 codewithsadee
*/
/*-----------------------------------*\
#CUSTOM PROPERTY
\*-----------------------------------*/
:root{
--gold: #d4a017;

--gold-dark: #a67c0a;

--dark-bg: #181818;

--light-bg: #fffbe6;

--text-dark: #222;

--text-light: #f5f5e5;

/**
* colors
*/
--dark-jungle-green: var(--dark-bg);

--prussian-blue: #222;

--raisin-black-1: #222;

--raisin-black-2: #2a2a2a;

--yellow-green: #e2a63e;
/* gold as highlight */
--orange-soda: var(--gold);
/* gold as main accent */
--cultured-1: #f5f5e5;

--cultured-2: #fffbe6;

--misty-rose: #fffbe6;

--alice-blue: #fffbe6;

--seashell: #fffbe6;

--cadet: #b0a99f;

--white: #fff;

--black: #181818;

--opal: #b0a99f;

/**
* typography
*/
--ff-nunito-sans: "Nunito Sans", sans-serif;

--ff-poppins: "Poppins", sans-serif;

--fs-1: 1.875rem;

--fs-2: 1.5rem;

--fs-3: 1.375rem;

--fs-4: 1.125rem;

--fs-5: 0.875rem;

--fs-6: 0.813rem;

--fs-7: 0.75rem;

--fw-500: 500;

--fw-600: 600;

--fw-700: 700;

/**
* transition
*/
--transition: 0.25s ease;

/**
* spacing
*/
--section-padding: 100px;

/**
* shadow
*/
--shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);

--shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1);

}
body.dark-mode{
--gold: #d4a017;

--gold-dark: #a67c0a;

--dark-bg: #181818;

--light-bg: #222;

--text-dark: #fffbe6;

--text-light: #e2a63e;

/**
* colors
*/
--dark-jungle-green: #fffbe6;

--prussian-blue: #181818;

--raisin-black-1: #181818;

--raisin-black-2: #222;

--yellow-green: #e2a63e;

--orange-soda: var(--gold);

--cultured-1: #222;

--cultured-2: #181818;

--misty-rose: #222;

--alice-blue: #181818;

--seashell: #181818;

--cadet: #e2a63e;

--white: #181818;

--black: #fffbe6;

--opal: #e2a63e;

/**
* shadow overrides for dark mode
*/
--shadow-1: 0 5px 20px 0 rgba(255,255,255,0.10);

--shadow-2: 0 16px 32px rgba(255,255,255,0.12);

}
/*-----------------------------------*\
#RESET
\*-----------------------------------*/
*, *::before, *::after{
margin: 0;

padding: 0;

box-sizing: border-box;

}
li{list-style: none;
}
a{text-decoration: none;
}
a,
img,
span,
button,
ion-icon{display: block;
}
button{
border: none;

background: none;

font: inherit;

text-align: left;

cursor: pointer;

}
address{font-style: normal;
}
ion-icon{pointer-events: none;
}
html{
font-family: var(--ff-nunito-sans);

scroll-behavior: smooth;

}
body{
background: var(--white);

overflow-x: hidden;

}
::-webkit-scrollbar{
width: 10px;

height: 8px;

}
::-webkit-scrollbar-track{background: var(--white);
}
::-webkit-scrollbar-thumb{
background: var(--cadet);

border-left: 2px solid var(--white);

}
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
.container{padding-inline: 15px;
}
button, a{transition: var(--transition);
}
.h1,
.h2,
.h3{
color: var(--dark-jungle-green);

font-family: var(--ff-poppins);

line-height: 1.3;

}
.h1{
font-size: var(--fs-1);

line-height: 1;

}
.h2{font-size: var(--fs-2);
}
.h3{
font-size: var(--fs-4);

font-weight: var(--font-weight, 700);

}
.h3 > a{color: inherit;
}
.btn{
position: relative;

background: var(--gold);

color: var(--white);

font-family: var(--ff-poppins);

font-size: var(--fs-5);

text-transform: var(--text-transform, capitalize);

border: 1px solid var(--gold);

padding: 12px 24px;

min-height: 44px;

z-index: 1;

display: inline-flex;

align-items: center;

gap: 0.5em;

}
.btn > ion-icon{
display: inline-block;

font-size: 1.2em;

margin-left: 0.3em;

vertical-align: middle;

}
.btn:is(:hover, :focus){
background: var(--gold-dark);

color: var(--white);

border-color: var(--gold-dark);

}
.btn::before{
content: "";

position: absolute;

top: 0;

left: 0;

width: 0;

height: 100%;

background: var(--gold-dark);

transition: var(--transition);

z-index: -1;

}
.btn:is(:hover, :focus)::before{width: 100%;
}
.w-100{width: 100%;
}
/* Replace hardcoded color values with variables for dark mode support */
.section-subtitle{
color: var(--gold);

font-size: var(--fs-5);

font-weight: var(--fw-600);

padding: 5px 20px;

background: var(--light-bg);

width: max-content;

border-radius: 50px;

margin-inline: auto;

margin-bottom: 15px;

}
.section-title{
text-align: var(--text-align, center);

margin-bottom: var(--margin-bottom, 50px);

}
.card-badge{
background: var(--black);

color: var(--white);

font-size: var(--fs-7);

text-transform: uppercase;

position: absolute;

top: 15px;

right: 15px;

padding: 4px 10px;

}
.card-badge.green{background: var(--gold);
}
.card-badge.orange{background: var(--gold);
}
.has-scrollbar{
display: flex;

align-items: flex-start;

gap: 15px;

overflow-x: auto;

margin-inline: -15px;

padding-inline: 15px;

scroll-padding-left: 15px;

padding-bottom: 60px;

scroll-snap-type: inline mandatory;

}
.has-scrollbar > li{
min-width: 100%;

scroll-snap-align: start;

}
.has-scrollbar::-webkit-scrollbar-track{
background: var(--cultured-2);

outline: 2px solid var(--cadet);

border-radius: 10px;

}
.has-scrollbar::-webkit-scrollbar-thumb{
background: var(--cadet);

border: 1px solid var(--cultured-2);

border-radius: 10px;

}
.has-scrollbar::-webkit-scrollbar-button{width: 15%;
}
.property-list.has-scrollbar{
cursor: grab;

}
.property-list.has-scrollbar.dragging{
cursor: grabbing;

}
.property-list.property-grid{
display: grid;

grid-template-columns: 1fr;

gap: 24px;

padding-bottom: 0;

overflow: visible;

margin-inline: 0;

padding-inline: 0;

}
@media (min-width: 600px){
.property-list.property-grid{
grid-template-columns: 1fr 1fr;

}
}
@media (min-width: 992px){
.property-list.property-grid{
grid-template-columns: 1fr 1fr 1fr;

}
}
.property-list.property-grid > li{
min-width: 0;

width: 100%;

scroll-snap-align: unset;

}
.property-card{
max-width: 500px;

margin-left: auto;

margin-right: auto;

}
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.header{
position: relative;

z-index: 10;

}
.header-top{
background: var(--prussian-blue);

padding-block: 15px;

}
.header-top .container,
.header-top-list{
display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}
.header-top .container{gap: 8px 20px;
}
.header-top-list{gap: 15px;
}
.header-top-link{
color: var(--white);

font-size: var(--fs-6);

font-weight: var(--fw-700);

display: flex;

justify-content: center;

align-items: center;

gap: 5px;

}
.header-top-link:is(:hover, :focus){color: var(--gold);
}
.header-top-link ion-icon{
color: var(--gold);

font-size: 15px;

--ionicon-stroke-width: 60px;

transition: color 0.2s;

}
body.dark-mode .header-top-link{
color: var(--cadet);

}
body.dark-mode .header-top-link ion-icon{
color: var(--gold);

}
.header-top .wrapper,
.header-top-social-list{
display: flex;

align-items: center;

}
.header-top .wrapper{gap: 20px;
}
.header-top-social-list{gap: 8px;
}
.header-top-social-link{
color: var(--white);

font-size: 15px;

transition: color 0.2s;

}
body.dark-mode .header-top-social-link{
color: var(--gold);

}
.header-top-btn{
background: var(--gold);

color: var(--white);

font-size: var(--fs-6);

font-weight: var(--fw-700);

padding: 4px 15px;

}
.header-top-btn:is(:hover, :focus){--orange-soda: hsl(7, 72%, 46%);
}
.header-bottom{
background: var(--white);

padding-block: 25px;

}
.header-bottom .logo img{margin-inline: auto;
}
.navbar{
background: var(--white);

position: fixed;

top: 0;

left: -310px;

max-width: 300px;

width: 100%;

height: 100%;

box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);

z-index: 20;

padding: 60px 20px;

visibility: hidden;

transition: 0.15s ease-in;

}
.navbar.active{
visibility: visible;

transform: translateX(310px);

transition: 0.25s ease-out;

}
.navbar-top{
display: flex;

justify-content: space-between;

align-items: center;

padding-bottom: 40px;

border-bottom: 1px solid var(--cultured-1);

margin-bottom: 25px;

}
.navbar-top .logo img{width: 200px;
}
.nav-close-btn ion-icon{
font-size: 20px;

--ionicon-stroke-width: 45px;

padding: 5px;

}
.navbar-link{
color: var(--cadet);

font-size: var(--fs-5);

font-weight: var(--fw-600);

text-transform: uppercase;

padding-block: 15px;

}
.navbar-link:is(:hover, :focus){color: var(--gold);
}
.overlay{
position: fixed;

inset: 0;

background: var(--black);

opacity: 0;

pointer-events: none;

transition: var(--transition);

z-index: 15;

}
.overlay.active{
opacity: 1;

pointer-events: all;

}
.header-bottom-actions{
background: var(--white);

position: fixed;

bottom: 0;

left: 0;

width: 100%;

display: flex;

justify-content: space-evenly;

padding-block: 15px 10px;

box-shadow: -2px 0 30px hsla(237, 71%, 52%, 0.2);

z-index: 3;

}
.header-bottom-actions-btn ion-icon{
color: hsl(0, 0%, 10%);

font-size: 20px;

margin-inline: auto;

margin-bottom: 5px;

--ionicon-stroke-width: 40px;

transition: var(--transition);

}
.header-bottom-actions-btn:is(:hover, :focus) ion-icon{color: var(--gold);
}
.header-bottom-actions-btn span{
color: var(--cadet);

font-family: var(--ff-poppins);

font-size: var(--fs-7);

font-weight: var(--fw-500);

}
/*-----------------------------------*\
#HERO
\*-----------------------------------*/
.hero{
background: var(--cultured-2);

padding-block: var(--section-padding);

position: relative;

z-index: 2;
/* Lower than header/navbar/overlay */
}
.hero-carousel{
position: relative;

overflow: hidden;

z-index: 2;
/* Lower than header/navbar/overlay */
}
.hero-content{
margin-bottom: 60px;

position: relative;

z-index: 2;
/* Lower than header/navbar/overlay */
}
.hero-subtitle{
display: flex;

justify-content: flex-start;

align-items: center;

gap: 5px;

margin-bottom: 20px;

}
.hero-subtitle ion-icon{color: var(--gold);
}
.hero-subtitle span{
color: var(--dark-jungle-green);

font-size: var(--fs-5);

font-weight: var(--fw-700);

}
.hero-title{margin-bottom: 20px;
}
.hero-text{
color: var(--cadet);

font-size: var(--fs-5);

line-height: 1.8;

padding-left: 15px;

border-left: 1px solid;

margin-bottom: 30px;

}
/*-----------------------------------*\
#ABOUT
\*-----------------------------------*/
.about{padding-block: var(--section-padding);
}
.about-banner{
position: relative;

margin-bottom: 40px;

}
.about-banner > img{
max-width: max-content;

width: 100%;

}
.about-banner .abs-img{
position: absolute;

bottom: 100px;

left: 15px;

width: 50%;

border-radius: 4px;

}
.about .section-subtitle{margin-inline: 0;
}
.about .section-title{
--text-align: left;

--margin-bottom: 15px;

}
.about-text{
color: var(--cadet);

font-size: var(--fs-5);

line-height: 1.7;

margin-bottom: 30px;

}
.about-list{margin-bottom: 30px;
}
.about-item{
display: flex;

justify-content: flex-start;

align-items: center;

gap: 10px;

margin-bottom: 15px;

}
.about-item-icon{
background: var(--misty-rose);

height: 45px;

min-width: 45px;

border-radius: 50%;

display: grid;

place-items: center;

}
.about-item-icon ion-icon{
color: var(--gold);

font-size: 18px;

}
.about-item-text{
color: var(--cadet);

font-size: var(--fs-5);

}
.about .callout{
background: var(--misty-rose);

color: var(--cadet);

font-size: var(--fs-5);

font-weight: var(--fw-500);

line-height: 1.8;

padding: 20px 25px;

border-left: 4px solid var(--gold);

margin-bottom: 40px;

}
.about .btn{
max-width: max-content;

--text-transform: uppercase;

}
/*-----------------------------------*\
#SERVICE
\*-----------------------------------*/
.service{
background: var(--cultured-2);

padding-block: var(--section-padding);

}
.service-list{
display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 30px;

}
.service-card{
position: relative;

background: var(--white);

text-align: center;

padding: 40px 30px;

box-shadow: var(--shadow-2);

}
.service-card .card-icon{
width: max-content;

margin-inline: auto;

margin-bottom: 20px;

}
.service-card .card-title{margin-bottom: 15px;
}
.service-card .card-title > a:is(:hover, :focus){color: var(--gold);
}
.service-card .card-text{
color: var(--cadet);

font-size: var(--fs-5);

line-height: 1.8;

margin-bottom: 25px;

}
.service-card .card-link{
color: var(--gold-dark);

font-size: var(--fs-5);

font-weight: var(--fw-600);

display: flex;

justify-content: center;

align-items: center;

gap: 5px;

}
.service-card:is(:hover, :focus) .card-link{color: var(--gold);
}
.service-card::after{
content: "";

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 4px;

background: var(--gold);

transition: var(--transition);

}
.service-card:is(:hover, :focus)::after{width: 100%;
}
/*-----------------------------------*\
#PROPERTY
\*-----------------------------------*/
.property{padding-block: var(--section-padding);
}
.property-card{
border: 1px solid var(--alice-blue);

box-shadow: var(--shadow-2);

}
.property-card .card-banner{
position: relative;

aspect-ratio: 2 / 1.5;

overflow: hidden;

}
.property-card .card-banner a{height: 100%;
}
.property-card .card-banner img{
height: 100%;

object-fit: cover;

transition: 0.5s ease;

}
.property-card:hover .card-banner img{transform: scale(1.1);
}
.property-card .card-banner::before{
content: "";

position: absolute;

inset: 0;

background: linear-gradient(to top, hsla(0, 0%, 0%, 0.95), transparent 30%);

pointer-events: none;

z-index: 1;

}
.property-card .banner-actions{
position: absolute;

bottom: 15px;

left: 15px;

right: 15px;

display: flex;

flex-wrap: wrap-reverse;

align-items: center;

gap: 15px 10px;

z-index: 1;

}
.banner-actions-btn{
color: var(--white);

font-size: var(--fs-6);

line-height: 1;

display: flex;

align-items: flex-end;

gap: 4px;

}
.banner-actions-btn ion-icon{font-size: 16px;
}
.banner-actions-btn:first-child{margin-right: auto;
}
.banner-actions-btn:is(:hover, :focus){color: var(--gold);
}
.property-card .card-content{
padding: 30px 15px 15px;

border-bottom: 1px solid var(--cultured-1);

}
.card-price{
color: var(--gold);

font-family: var(--ff-poppins);

font-size: var(--fs-5);

margin-bottom: 5px;

}
.card-price strong{
font-size: var(--fs-4);

font-weight: var(--fw-600);

}
.property-card .card-title{
--font-weight: var(--fw-600);

margin-bottom: 15px;

}
.property-card .card-title > a:is(:hover, :focus){color: var(--gold);
}
.property-card .card-text{
color: var(--cadet);

font-size: var(--fs-5);

line-height: 1.8;

margin-bottom: 25px;

}
.property-card .card-list{
display: flex;

flex-wrap: wrap;

align-items: center;

row-gap: 15px;

}
.property-card .card-item{
padding-block: 5px;

color: var(--cadet);

font-size: var(--fs-5);

}
.property-card .card-item:not(:last-child){
padding-right: 15px;

border-right: 1px solid var(--cultured-1);

margin-right: 20px;

}
.property-card .card-item :is(strong, ion-icon){display: inline-block;
}
.property-card .card-item ion-icon{
margin-left: 2px;

margin-bottom: -2px;

}
.property-card .card-item span{margin-top: 5px;
}
.card-footer{
padding: 15px;

display: flex;

flex-wrap: wrap-reverse;

justify-content: space-between;

align-items: center;

gap: 15px;

}
.card-author{
display: flex;

align-items: center;

gap: 10px;

}
.author-avatar{
width: 40px;

height: 40px;

overflow: hidden;

border-radius: 50%;

}
.author-name > a{
color: var(--dark-jungle-green);

font-family: var(--ff-poppins);

font-size: var(--fs-5);

font-weight: var(--fw-600);

margin-bottom: 3px;

}
.author-name > a:is(:hover, :focus){color: var(--gold);
}
.author-title{
color: var(--cadet);

font-size: var(--fs-7);

}
.card-footer-actions{
display: flex;

align-items: center;

gap: 10px;

}
.card-footer-actions-btn{
background: var(--cultured-2);

color: var(--cadet);

width: 35px;

height: 35px;

display: grid;

place-items: center;

font-size: 18px;

}
.card-footer-actions-btn:is(:hover, :focus){
background: var(--gold);

color: var(--white);

}
/*-----------------------------------*\
#FEATURES
\*-----------------------------------*/
.features{
background: var(--cultured-2);

padding-block: var(--section-padding);

}
.features-list{
display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 50px 20px;

}
.features-list > li{width: calc(50% - 10px);
}
.features-card{
position: relative;

background: var(--white);

padding: 40px 15px;

border-radius: 12px;

display: flex;

flex-direction: column;

height: 100%;

justify-content: center;

align-items: center;

gap: 10px;

box-shadow: var(--shadow-1);

}
.features-card:is(:hover, :focus){background: var(--gold);
}
.features-card .card-icon{
background: var(--seashell);

color: var(--gold);

width: 60px;

height: 60px;

display: grid;

place-items: center;

border-radius: 50%;

font-size: 28px;

}
.features-card .card-icon ion-icon{--ionicon-stroke-width: 20px;
}
.features-card .card-title{
color: var(--dark-jungle-green);

font-family: var(--ff-poppins);

font-size: var(--fs-6);

font-weight: var(--fw-600);

text-align: center;

transition: var(--transition);

}
.features-card:is(:hover, :focus) .card-title{color: var(--white);
}
.features-card .card-btn{
background: var(--white);

color: var(--cadet);

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%, 50%);

width: 40px;

height: 40px;

display: grid;

place-items: center;

font-size: 20px;

border-radius: 50%;

box-shadow: 0 0 10px hsla(219, 56%, 21%, 0.1);

transition: var(--transition);

}
.features-card:is(:hover, :focus) .card-btn{color: var(--gold-dark);
}
/*-----------------------------------*\
#BLOG
\*-----------------------------------*/
.blog{padding-block: var(--section-padding);
}
.blog-card{box-shadow: var(--shadow-2);
}
.blog-card .card-banner{
overflow: hidden;

aspect-ratio: 2 / 1.5;

}
.blog-card .card-banner img{
height: 100%;

object-fit: cover;

transition: 0.5s ease;

}
.blog-card:is(:hover, :focus) .card-banner img{transform: scale(1.1);
}
.blog-content{padding: 30px;
}
.blog-card .card-meta-list{
display: flex;

align-items: center;

gap: 10px;

margin-bottom: 15px;

}
.blog-card :is(.card-meta-link, .publish-date){
color: var(--cadet);

font-size: var(--fs-7);

font-weight: var(--fw-600);

display: flex;

align-items: center;

gap: 5px;

transition: var(--transition);

}
.blog-card :is(.card-meta-link, .publish-date) ion-icon{color: var(--gold);
}
.blog-card .card-meta-link:is(:hover, :focus){color: var(--gold);
}
.blog-title{
font-size: 1rem;

--font-weight: var(--fw-600);

}
.blog-card .blog-title:is(:hover, :focus){color: var(--gold);
}
.blog-content-bottom{
padding-top: 20px;

border-top: 1px solid var(--gold-dark);

margin-top: 20px;

display: flex;

justify-content: space-between;

align-items: center;

}
.blog-card .read-more-btn{
color: var(--gold);

font-size: var(--fs-7);

font-weight: var(--fw-600);

text-transform: uppercase;

}
/*-----------------------------------*\
#CTA
\*-----------------------------------*/
.cta{
background: linear-gradient(to bottom, var(--white) 50%, var(--raisin-black-1) 50%);

}
.cta-card{
background: var(--gold);

padding: 50px 25px;

box-shadow: var(--shadow-2);

}
.cta-card .card-content{
max-width: max-content;

margin-inline: auto;

margin-bottom: 30px;

}
.cta-card .card-title{
color: var(--white);

line-height: 1.3;

margin-bottom: 15px;

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

font-size: var(--fs-5);

line-height: 1.8;

}
.cta-btn{
display: flex;

align-items: center;

gap: 10px;

color: var(--dark-bg);

background: var(--white);

box-shadow: var(--shadow-2);

border-color: var(--white);

margin-inline: auto;

}
.cta-btn:is(:hover, :focus){
background: none;

color: var(--white);

border-color: transparent;

}
.cta-btn::before{background: var(--gold-dark);
}
/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/
.footer{
background: var(--raisin-black-1);

color: var(--white);

margin-bottom: 68px;

}
.footer .container{padding-inline: 30px;
}
.footer a{color: inherit;
}
.footer-top{
padding-top: 80px;

padding-bottom: 40px;

}
.footer-brand{margin-bottom: 20px;
}
.footer-brand .logo{margin-bottom: 10px;
}
.footer-brand .logo img{
max-width: 160px;

height: auto;

display: block;

margin: 0 auto;

}
@media (max-width: 600px){
.footer-brand .logo img{
max-width: 160px;

}
}
.section-text{
font-size: var(--fs-5);

line-height: 1.8;

margin-bottom: 30px;

max-width: 45ch;

}
.contact-list{
display: grid;

gap: 15px;

margin-bottom: 30px;

}
.contact-link{
display: flex;

align-items: flex-start;

gap: 10px;

}
.contact-link ion-icon{font-size: 18px;
}
.contact-link :is(address, span){
font-size: var(--fs-5);

transition: var(--transition);

}
.contact-link:is(:hover, :focus) span{color: var(--gold);
}
.social-list{
display: flex;

align-items: center;

gap: 20px;

}
.footer-list:not(:last-child){margin-bottom: 50px;
}
.footer-list-title{
font-family: var(--ff-poppins);

font-size: var(--fs-3);

font-weight: var(--fw-700);

margin-bottom: 15px;

}
.footer-link{
font-size: var(--fs-5);

padding-block: 10px;

}
.footer-link:is(:hover, :focus){color: var(--gold);
}
.footer-bottom{
background: var(--raisin-black-2);

padding-block: 25px;

}
.copyright{
font-size: var(--fs-5);

text-align: center;

}
.copyright a{display: inline-block;
}
.copyright a:is(:hover, :focus){color: var(--gold);
}
/*-----------------------------------*\
#MEDIA QUERIES
\*-----------------------------------*/
/**
* responsive for larger than 600px screen
*/
@media (min-width: 600px){
/**
* CUSTOM PROPERTY
*/
:root{
/**
* typography
*/
--fs-2: 1.875rem;

}
/**
* REUSED STYLE
*/
.container{
max-width: 550px;

margin-inline: auto;

}
.has-scrollbar{
gap: 25px;

margin-inline: -25px;

padding-inline: 25px;

scroll-padding-left: 25px;

}
.has-scrollbar > li{min-width: calc(50% - 12.5px);
}
/**
* SERVICE
*/
.service-list > li{width: calc(50% - 15px);
}
/**
* PROPERTY
*/
.property .container{
max-width: unset;

padding-inline: 25px;

}
/**
* CTA
*/
.cta-card{--fs-2: 1.5rem;
}
/**
* FOOTER
*/
.footer-link-box{
display: flex;

justify-content: space-between;

gap: 20px;

}
}
/**
* responsive for larger than 768px screen
*/
@media (min-width: 768px){
/**
* CUSTOM PROPERTY
*/
:root{
/**
* typography
*/
--fs-1: 2.5rem;

--fs-5: 0.938rem;

--fs-6: 0.875rem;

}
/**
* REUSED STYLE
*/
.container{max-width: 720px;
}
.btn{
--fs-5: 1rem;

padding: 12px 28px;

}
/**
* HEADER
*/
.header-top{padding-block: 5px;
}
.header-top .wrapper{margin-left: auto;
}
.header-top-social-list{gap: 12px;
}
.header-top-social-link{font-size: 1rem;
}
.header-top-btn{padding: 10px 20px;
}
.header-bottom-actions{
all: unset;

display: flex;

align-items: center;

gap: 10px;

}
.header-bottom .container{
display: flex;

justify-content: space-between;

align-items: center;

}
.header-bottom-actions-btn ion-icon{margin-bottom: 0;
}
.header-bottom-actions-btn span{display: none;
}
.header-bottom-actions-btn{
display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 50px;

width: 50px;

min-height: 44px;

min-width: 44px;

box-shadow: var(--shadow-2);

background: var(--white);

border: none;

padding: 8px;

}
.header-bottom-actions-btn ion-icon{
margin-bottom: 0;

margin-inline: 0;

display: block;

font-size: 24px;

}
/**
* HERO
*/
.hero-content{max-width: 400px;
}
/**
* ABOUT
*/
.about .section-title{max-width: 30ch;
}
.about-text{max-width: 55ch }
.about-list{
display: grid;

grid-template-columns: 1fr 1fr;

}
/**
* FEATURES
*/
.features-list > li{width: calc(33.33% - 13.33px);
}
.features-card{gap: 20px;
}
.features-card .card-icon{
width: 80px;

height: 80px;

font-size: 32px;

}
.features-card .card-title{--fs-6: 1.125rem;
}
/**
* BLOG
*/
.blog-card{--fs-7: 0.875rem;
}
.blog-title{font-size: 1.25rem;
}
.blog .card-meta-list{gap: 30px;
}
/**
* CTA
*/
.cta-card{--fs-2: 1.625rem;
}
/**
* FOOTER
*/
.footer{margin-bottom: 0;
}
}
/**
* responsive for larger than 992px screen
*/
@media (min-width: 992px){
/**
* CUSTOM PROPERTY
*/
:root{
/**
* typography
*/
--fs-1: 3.125rem;

--fs-4: 1.375rem;

}
/**
* REUSED STYLE
*/
.container{max-width: 970px;
}
.btn{padding: 15px 40px;
}
/**
* HEADER
*/
.header-top-list,
.header-top .wrapper{gap: 30px;
}
.header-bottom-actions-btn[aria-label="Home"],
.header-bottom-actions-btn[aria-label="Properties"]{
display: none !important;

}
.header-bottom .header-bottom-actions{
margin-left: 200px;

margin-right: 0;

}
/**
* HERO
*/
.hero-content{
max-width: unset;

margin-bottom: 0;

}
.hero .container{
display: grid;

grid-template-columns: 1fr 1fr;

align-items: center;

}
/**
* ABOUT
*/
.about .container{
display: grid;

grid-template-columns: 1fr 1fr;

align-items: center;

gap: 60px;

}
.about-banner{margin-bottom: 0;
}
.about-banner > img{width: 100%;
}
/**
* SERVICE
*/
.service-list > li{width: calc(33.33% - 20px);
}
/**
* PROPERTY
*/
.property-card .card-content{padding-inline: 30px;
}
.card-footer{padding: 20px 30px 30px;
}
/**
* FEATURES
*/
.features-list{column-gap: 30px;
}
.features-list > li{width: calc(25% - 30px);
}
/**
* BLOG
*/
.blog-title{font-size: 1.375rem;
}
/**
* CTA
*/
.cta-card{
--fs-2: 1.875rem;

--fs-5: 1rem;

display: flex;

justify-content: space-between;

align-items: center;

padding: 50px;

}
.cta-card :is(.card-content, .cta-btn){margin: 0;
}
/**
* FOOTER
*/
.footer-top .container{
display: flex;

justify-content: space-between;

}
.footer-brand{
max-width: 300px;

margin-bottom: 0;

}
.footer-link-box{flex-basis: 550px;
}
.header-bottom{
padding-block: 0;

height: 90px;

display: flex;

align-items: center;

}
.header-bottom .container{
display: flex;

align-items: center;

height: 100%;

}
.header-bottom .logo{
margin-right: 170px;

margin-left: 0;

position: relative;

z-index: 2;

/* Left align logo and title */
}
.header-bottom .logo-img{
max-width: 120px;

height: 76px;

/* Allow logo to overflow if needed */
position: relative;

top: 0;

left: 0;

}
}
/**
* responsive for larger than 1200px screen
*/
@media (min-width: 1200px){
/**
* CUSTOM PROPERTY
*/
:root{
/**
* typography
*/
--fs-2: 2.75rem;

--fs-4: 1.5rem;

}
/**
* REUSED STYLE
*/
.container{max-width: 1200px;
}
.has-scrollbar > li{min-width: calc(33.33% - 16.66px);
}
.service-list > li{width: calc(25% - 22.5px);
}
/**
* HEADER
*/
.header-bottom{padding-block: 30px;
}
.header-bottom-actions-btn:last-child,
.navbar-top,
.overlay{display: none;
}
.navbar,
.navbar.active{all: unset;
}
.navbar-list{
display: flex;

align-items: center;

gap: 30px;

}
.navbar-link{
color: var(--dark-jungle-green);

--fs-5: 1.125rem;

text-transform: capitalize;

}
.header{padding-bottom: 114px;
}
.header-bottom{
position: absolute;

left: 0;

bottom: 0;

width: 100%;

}
.header.active .header-bottom{
position: fixed;

bottom: auto;

top: -94px;

padding-block: 20px;

box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2);

animation: slideDown 0.25s ease-out forwards;

}
@keyframes slideDown{
0%{transform: translateY(0);
}
100%{transform: translateY(100%);
}
}
/**
* HERO
*/
.hero-text{
padding-left: 30px;

max-width: 450px;

margin-bottom: 40px;

}
/**
* FEATURES
*/
.features-card .card-icon{
width: 100px;

height: 100px;

font-size: 45px;

}
.features-card .card-title{--fs-6: 1.375rem;
}
/**
* CTA
*/
.cta-card{
--fs-2: 2.25rem;

padding-inline: 60px;

}
/**
* FOOTER
*/
.footer{--fs-5: 1rem;
}
.footer-link-box{flex-basis: 700px;
}
}
/*-----------------------------------*\
#TESTIMONIALS
\*-----------------------------------*/
/* Redesigned testimonials section for single-card carousel */
.testimonials{
padding-block: var(--section-padding, 100px);

background: var(--alice-blue, #f0f8ff);

position: relative;

overflow: hidden;

}
/* Testimonials Carousel: Only one card visible, always centered */
.testimonials-carousel{
position: relative;

max-width: 500px;

margin: 50px auto 0 auto;

padding: 0 20px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 350px;

}
.testimonials-track{
display: flex;

justify-content: center;

align-items: center;

width: 100%;

min-height: 320px;

position: relative;

overflow: visible;

}
.testimonial-card{
position: absolute;

left: 50%;

top: 0;

transform: translateX(-50%) scale(0.96);

opacity: 0;

z-index: 1;

min-width: 100%;

max-width: 100%;

background: var(--white, #fff);

border-radius: 20px;

padding: 40px 30px 30px 30px;

box-shadow: 0 8px 32px rgba(0,0,0,0.12);

border: 1px solid rgba(0,0,0,0.07);

display: none;

flex-direction: column;

align-items: center;

transition: opacity 0.5s, transform 0.5s;

}
.testimonial-card.active{
opacity: 1;

transform: translateX(-50%) scale(1);

z-index: 2;

display: flex;

border-color: var(--gold, #ff4500);

box-shadow: 0 12px 40px rgba(255, 69, 0, 0.10);

}
@media (max-width: 600px){
.testimonials-carousel{
max-width: 98vw;

min-height: 250px;

}
.testimonials-track{
min-height: 200px;

}
.testimonial-card{
padding: 20px 8px 18px 8px;

min-width: 100%;

max-width: 100%;

}
}
.testimonial-content{
text-align: center;

position: relative;

z-index: 2;

}
.testimonial-rating{
display: flex;

justify-content: center;

gap: 4px;

margin-bottom: 18px;

}
.testimonial-rating ion-icon{
color: #ffd700;

font-size: 20px;

}
.testimonial-text{
font-size: 1.1rem;

line-height: 1.7;

color: var(--cadet, #5e6e82);

margin-bottom: 28px;

font-style: italic;

padding: 0 10px;

position: relative;

z-index: 2;

}
.testimonial-author{
display: flex;

align-items: center;

gap: 18px;

justify-content: center;

margin-top: 18px;

padding-top: 18px;

border-top: 1px solid rgba(0,0,0,0.07);

}
.author-avatar{
width: 56px;

height: 56px;

border-radius: 50%;

overflow: hidden;

border: 2.5px solid var(--gold, #ff4500);

box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}
.author-avatar img{
width: 100%;

height: 100%;

object-fit: cover;

}
.author-info{
text-align: left;

}
.author-name{
font-size: 1.1rem;

font-weight: 600;

color: var(--dark-jungle-green, #0a2a2f);

margin-bottom: 2px;

}
.author-position{
font-size: 0.95rem;

color: var(--gold, #ff4500);

font-weight: 500;

margin-bottom: 1px;

}
.author-company{
font-size: 0.85rem;

color: var(--cadet, #5e6e82);

}
/* Navigation arrows */
.testimonials-arrows{
display: flex;

justify-content: center;

align-items: center;

gap: 30px;

margin: 30px 0 0 0;

}
.testimonials-arrow{
background: var(--white, #fff);

border: 1.5px solid var(--gold, #ff4500);

color: var(--gold, #ff4500);

border-radius: 50%;

width: 44px;

height: 44px;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.7rem;

cursor: pointer;

box-shadow: 0 2px 8px rgba(255,69,0,0.07);

transition: background 0.2s, color 0.2s;

}
.testimonials-arrow:disabled{
opacity: 0.4;

cursor: not-allowed;

}
.testimonials-arrow:hover:not(:disabled){
background: var(--gold, #ff4500);

color: #fff;

}
/* Dots */
.testimonials-dots{
display: flex;

justify-content: center;

gap: 10px;

margin-top: 18px;

position: relative;

z-index: 3;

}
.dot{
width: 12px;

height: 12px;

border-radius: 50%;

background: var(--cadet, #5e6e82);

cursor: pointer;

transition: background 0.2s, transform 0.2s, opacity 0.2s;

opacity: 0.5;

}
.dot.active{
background: var(--gold, #ff4500);

opacity: 1;

transform: scale(1.2);

}
/* Responsive */
@media (max-width: 600px){
.testimonials-carousel{
max-width: 98vw;

padding: 0 2vw;

}
.testimonial-card{
padding: 25px 8px 20px 8px;

border-radius: 14px;

}
.author-avatar{
width: 40px;

height: 40px;

}
.author-name{
font-size: 1rem;

}
.testimonial-text{
font-size: 1rem;

}
}
/* Add fallback values for testimonials section */
:root{
/* Already defined colors, typography, etc. above */
--section-padding: 100px;

--alice-blue: hsl(210, 100%, 97%);

--white: #fff;

--gold: hsl(9, 100%, 62%);

--shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);

--shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1);

--transition: 0.25s ease;

--cadet: hsl(200, 15%, 43%);

--dark-jungle-green: hsl(188, 63%, 7%);

--fs-4: 1.5rem;

--fs-5: 1rem;

--fs-6: 0.875rem;

--fs-7: 0.75rem;

--fw-500: 500;

--fw-600: 600;

}
/* Fallbacks for testimonials section */
.testimonials{
padding-block: var(--section-padding, 100px);

background: var(--alice-blue, #f0f8ff);

}
.testimonial-card{
background: var(--white, #fff);

box-shadow: var(--shadow-1, 0 5px 20px 0 rgba(0,0,0,0.1));

border: 1px solid rgba(0,0,0,0.1);

border-radius: 15px;

transition: var(--transition, 0.25s ease);

}
.testimonial-card.active{
border-color: var(--gold, #ff4500);

box-shadow: 0 10px 30px rgba(255, 69, 0, 0.2);

}
.testimonial-rating ion-icon{
color: #ffd700;

}
.testimonial-text{
font-size: var(--fs-5, 1rem);

color: var(--cadet, #5e6e82);

}
.author-name{
font-size: var(--fs-4, 1.5rem);

font-weight: var(--fw-600, 600);

color: var(--dark-jungle-green, #0a2a2f);

}
.author-position{
font-size: var(--fs-6, 0.875rem);

color: var(--gold, #ff4500);

font-weight: var(--fw-500, 500);

}
.author-company{
font-size: var(--fs-7, 0.75rem);

color: var(--cadet, #5e6e82);

}
/* Search Modal Styles */
.search-modal{display: none;
align-items: center;
justify-content: center;
}
.search-modal[style*='display: flex']{display: flex !important;
}
body.search-modal-open{overflow: hidden;
}
@media (max-width: 500px){
.search-modal > div{max-width: 98vw !important;
padding: 1em 0.5em !important;
}
}
.logo{
display: flex;

align-items: center;

gap: 0.2em;

}
.logo span{
font-size: 1.5em;

font-weight: 700;

color: #222;

font-family: 'Poppins', sans-serif;

}
.logo-img{
max-width: 120px;

height: 76px;

width: auto;

object-fit: contain;

display: inline-block;

vertical-align: middle;

}
@media (max-width: 600px){
.header-bottom .logo img,
.navbar-top .logo img,
.logo-img{
max-width: 120px;

height: 120px;

margin-right: 20px;

margin-left: 2px;

}
.header-bottom .logo span,
.navbar-top .logo span,
.logo span{
font-size: 1.2em;

height: 100px;

display: flex;

align-items: center;

margin-left: 0;

margin-right: 200px;

padding-left: -40px;

padding-right: 0;

line-height: 1.1;

}
}
/* Improved Preloader Styles */
/* Edgescape-style Preloader */
#preloader{
position: fixed;

inset: 0;

width: 100vw;

height: 100vh;

background: #e2a63e;
/* goldish */
z-index: 99999;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1);

opacity: 1;

pointer-events: all;

overflow: hidden;

}
#preloader.fade-out{
opacity: 0;

pointer-events: none;

}
.preloader-house-spinner{
display: flex;

align-items: center;

justify-content: center;

margin-bottom: 32px;

width: 64px;

height: 64px;

animation: preloader-pulse 1.2s infinite ease-in-out;

}
.preloader-house-spinner svg{
width: 64px;

height: 64px;

display: block;

}
.preloader-house-spinner .house-roof{
transform-origin: 32px 28px;

animation: preloader-roof-bounce 1.2s infinite cubic-bezier(0.4,0,0.2,1);

}
.preloader-house-spinner .house-body rect{
fill: #181818 !important;
/* blackish */
}
.preloader-house-spinner .house-body rect:last-child{
fill: #fff !important;
/* door stays white */
}
.preloader-house-spinner .house-roof polygon{
fill: #222 !important;
/* dark roof */
}
@media (max-width: 600px){
.preloader-house-spinner{
width: 36px;

height: 36px;

margin-bottom: 18px;

}
.preloader-house-spinner svg{
width: 36px;

height: 36px;

}
}
@keyframes preloader-roof-bounce{
0%, 100%{transform: translateY(0);
}
20%{transform: translateY(-6px);
}
40%{transform: translateY(0);
}
60%{transform: translateY(-3px);
}
80%{transform: translateY(0);
}
}
@keyframes preloader-pulse{
0%, 100%{filter: brightness(1);
}
50%{filter: brightness(1.15);
}
}
.preloader-text{
display: flex;

gap: 0.22em;

font-size: 4em;

font-family: 'Poppins', 'Nunito Sans', Arial, sans-serif;

font-weight: 900;

letter-spacing: 0.18em;

color: #e0e0e0;

user-select: none;

position: relative;

}
.preloader-text span{
display: inline-block;

position: relative;

overflow: hidden;

color: #e0e0e0;

min-width: 0.9em;

min-height: 1em;

text-shadow: 0 2px 8px rgba(0,0,0,0.08);

}
.preloader-text span::after{
content: attr(data-letter);

position: absolute;

left: 0;
top: 0;

width: 0%;

height: 100%;

color: #111;

font-weight: 900;

white-space: pre;

z-index: 2;

background: linear-gradient(90deg, #111 60%, #222 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

text-fill-color: transparent;

transition: width 0.5s cubic-bezier(0.4,0,0.2,1);

pointer-events: none;

}
.preloader-text span.filled::after{
width: 100%;

}
@media (max-width: 600px){
.preloader-text{
font-size: 2em;

}
}
/* Hero Carousel Styles */
.hero-carousel{
position: relative;

overflow: hidden;

}
.hero-carousel-bg{
position: absolute;

top: 0;
left: 0;
right: 0;
bottom: 0;

width: 100%;

height: 100%;

z-index: 0;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

transition: background-image 1s cubic-bezier(0.4,0,0.2,1);

/* Add a dark overlay for readability */
}
.hero-carousel-bg::after{
content: '';

position: absolute;

top: 0;
left: 0;
right: 0;
bottom: 0;

background: rgba(10,42,47,0.45);
/* dark overlay */
z-index: 1;

}
.hero-carousel .container,
.hero-carousel .hero-content{
position: relative;

z-index: 2;

}
.hero-carousel .hero-content{
color: #fff;

text-shadow: 0 2px 16px rgba(0,0,0,0.25);

}
@media (max-width: 600px){
.hero-carousel .hero-content{
padding: 0 10px;

}
}
/* Force white text in hero carousel overlay */
.hero-carousel .hero-content,
.hero-carousel .hero-content *{
color: #fff !important;

text-shadow: 0 2px 16px rgba(0,0,0,0.25);

}
.hero-carousel .btn{
background: var(--gold);

color: #fff !important;

border: 1px solid var(--gold);

}
.hero-carousel .btn:is(:hover, :focus){
background: var(--black);

color: #fff !important;

border-color: var(--black);

}
/* Dark mode overrides for footer, contact, and bottom nav */
body.dark-mode .footer,
body.dark-mode .footer *,
body.dark-mode .footer a,
body.dark-mode .footer .contact-link,
body.dark-mode .footer .footer-link,
body.dark-mode .footer .footer-list-title,
body.dark-mode .footer .section-text,
body.dark-mode .footer .copyright{
color: #fff !important;

}
body.dark-mode .footer-bottom{
background: var(--raisin-black-2);

}
body.dark-mode .contact,
body.dark-mode .contact *,
body.dark-mode .contact label,
body.dark-mode .contact input,
body.dark-mode .contact textarea{
color: #fff !important;

background-color: transparent !important;

border-color: #fff !important;

}
body.dark-mode .contact input,
body.dark-mode .contact textarea{
background: rgba(255,255,255,0.05) !important;

}
body.dark-mode .header-bottom-actions-btn ion-icon,
body.dark-mode .header-bottom-actions-btn span{
color: #fff !important;

}
/* Always keep Send Message button orange with white text, even in dark mode */
.contact-form .btn{
background: var(--gold) !important;

color: #fff !important;

border: 1px solid var(--gold) !important;

}
.contact-form .btn:is(:hover, :focus){
background: var(--black) !important;

color: #fff !important;

border-color: var(--black) !important;

}
body.dark-mode .contact-form .btn{
background: var(--gold) !important;

color: #fff !important;

border: 1px solid var(--gold) !important;

}
body.dark-mode .contact-form .btn:is(:hover, :focus){
background: var(--black) !important;

color: #fff !important;

border-color: var(--black) !important;

}
/* Keep banner-actions icons and text white in all modes */
.banner-actions-btn,
.banner-actions-btn ion-icon,
.banner-actions-btn address,
.banner-actions-btn span{
color: #fff !important;

}
body.dark-mode .banner-actions-btn,
body.dark-mode .banner-actions-btn ion-icon,
body.dark-mode .banner-actions-btn address,
body.dark-mode .banner-actions-btn span{
color: #fff !important;

}
/* --- Improved dark mode overrides for property-details page --- */
body.dark-mode .property-details,
body.dark-mode .property-details *{
color: var(--white) !important;

background-color: transparent !important;

}
body.dark-mode .property-details h1,
body.dark-mode .property-details h2,
body.dark-mode .property-details h3,
body.dark-mode .property-details .section-title,
body.dark-mode .property-details .property-section-title,
body.dark-mode .property-details .card-badge,
body.dark-mode .property-details .property-badge,
body.dark-mode .property-details .card-price,
body.dark-mode .property-details .property-price,
body.dark-mode .property-details .author-name,
body.dark-mode .property-details .author-title,
body.dark-mode .property-details strong{
color: var(--gold) !important;

}
body.dark-mode .property-details a{
color: var(--gold) !important;

}
body.dark-mode .property-details th,
body.dark-mode .property-details td,
body.dark-mode .property-details .property-units-table th,
body.dark-mode .property-details .property-units-table td{
background: #222 !important;

color: var(--white) !important;

border-color: #444 !important;

}
body.dark-mode .property-details .card-badge,
body.dark-mode .property-details .property-badge{
background: #333 !important;

color: var(--gold) !important;

}
body.dark-mode .property-details li[style*='background'],
body.dark-mode .property-details .property-amenities-list li{
background: #333 !important;

color: var(--white) !important;

}
body.dark-mode .property-details [style*='color: var(--text-dark)'],
body.dark-mode .property-details [style*='color: #222'],
body.dark-mode .property-details [style*='color: black']{
color: var(--white) !important;

}
body.dark-mode .property-details > p,
body.dark-mode .property-details p{
color: var(--white) !important;

}
body.dark-mode .property-details .property-location{
color: var(--white) !important;

}
body.dark-mode .property-details .property-payment-list li{
color: var(--white) !important;

}
body.dark-mode .property-details .amenity-icon{
color: var(--gold) !important;

}
/* Fix for inline style or hardcoded color on property-details */
body.dark-mode .property-details [style*='color: #000'],
body.dark-mode .property-details [style*='color: #111'],
body.dark-mode .property-details [style*='color: #181818']{
color: var(--white) !important;

}
body.dark-mode .property-details [style*='background: #fff'],
body.dark-mode .property-details [style*='background: #f5f5f5'],
body.dark-mode .property-details [style*='background: #fffbe6']{
background: #222 !important;

}
/* Floating WhatsApp Button Styles */
.floating-whatsapp-btn{
position: fixed;

left: 24px;

bottom: 24px;

z-index: 9999;

display: flex;

align-items: center;

gap: 0.7em;

background: #25d366;

color: #fff;

padding: 0.8em 1.4em;

border-radius: 32px;

box-shadow: 0 4px 16px rgba(0,0,0,0.18);

font-family: var(--ff-poppins, sans-serif);

font-size: 1.1rem;

font-weight: 600;

text-decoration: none;

transition: background 0.2s, box-shadow 0.2s, transform 0.2s;

}
.floating-whatsapp-btn:hover, .floating-whatsapp-btn:focus{
background: #128c7e;

color: #fff;

box-shadow: 0 6px 24px rgba(0,0,0,0.22);

transform: translateY(-2px) scale(1.04);

}
.floating-whatsapp-btn ion-icon{
font-size: 1.5em;

color: #fff;

}
.floating-whatsapp-text{
display: inline;

}
@media (max-width: 600px){
.floating-whatsapp-btn{
left: 12px;

bottom: 72px;

padding: 0.6em 0.7em;
/* Reduced horizontal padding */
font-size: 0.95em;
 /* Slightly smaller font */
border-radius: 50px;

}
.floating-whatsapp-text{
display: inline;

}
.floating-whatsapp-btn ion-icon{
font-size: 1.2em;

}
}
body.dark-mode .testimonial-card{
box-shadow: 0 8px 32px rgba(255,255,255,0.12) !important;

}
body.dark-mode .testimonial-card.active{
box-shadow: 0 12px 40px rgba(255,255,255,0.16) !important;

}
@media (max-width: 600px){
.service-card{
padding: 20px 10px;

}
}
.agent-profile .property-list.property-grid{
display: grid;

grid-template-columns: 1fr;

gap: 32px;

}
@media (min-width: 600px){
.agent-profile .property-list.property-grid{
grid-template-columns: 1fr 1fr;

}
}
@media (min-width: 992px){
.agent-profile .property-list.property-grid{
grid-template-columns: 1fr 1fr;

}
}
.agent-profile .property-list.property-grid > li{
max-width: 700px;

width: 100%;

margin-left: auto;

margin-right: auto;

}
@media (max-width: 600px){
.testimonials-arrows-responsive{
display: none !important;

}
}