/* ---- from legacy header.php, lines 197-231 ---- */

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}

}	
/* ============ small devices .end// ============ */


/* ---- from legacy header.php, lines 309-1073 ---- */
/* ====================================================
   PROPERTY CARD - Modern Vertical Card Redesign
   ==================================================== */

/* Row: equal-height cards */
.list-layout .col-lg-6.col-md-12 {
	display: flex;
	margin-bottom: 24px;
}

/* Center the entire property grid section */
.list-layout .row {
	justify-content: center;
	margin: 0 auto;
}

/* Center achievement section row */
.row:has(.achievement-wrap) {
	justify-content: center;
}

/* Footer description text visibility */
.footer-description p {
	color: #ffffff !important;
	line-height: 1.6 !important;
}

/* Footer navigation links visibility */
.footer-menu a {
	color: #cbd5e1 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 2.2 !important;
	transition: color 0.2s ease !important;
}
.footer-menu a:hover {
	color: #ffffff !important;
}
.footer-menu i {
	color: #C89A3C !important;
	margin-right: 8px !important;
}

/* Card shell */
.property-listing.property-1 {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	border-radius: 14px !important;
	overflow: visible !important;
	border: 1px solid #e6e9ec !important;
	background-clip: padding-box !important;
	background: #ffffff !important;
	position: relative !important;
	transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1), filter 0.3s ease !important;
}
.property-listing.property-1::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 14px !important;
	padding: 2px !important;
	background: linear-gradient(135deg, #197003, #ff4f6a) !important;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask-composite: exclude !important;
	opacity: 0.50 !important;
	pointer-events: none !important;
	transition: opacity 0.35s ease !important;
	z-index: 1 !important;
}
.property-listing.property-1:hover {
	transform: translateY(-6px) scale(1.015) !important;
	box-shadow:none !important;
	filter: brightness(1.02) !important;
}
.property-listing.property-1:hover::before {
	opacity: 1 !important;
}

/* Wishlist (save) + Share + Compare floating buttons, overlaid on the card image */
.property-listing.property-1 .cp-card-fabs {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 9px !important;
	z-index: 3 !important;
}
/* Higher specificity than ".listing-img-wrapper a{height:auto!important}" (which was
   squashing these to ~14px tall and turning the circles into stretched pills) —
   scoping through .cp-card-fabs adds the extra class needed to win the cascade. */
.property-listing.property-1 .cp-card-fabs .cp-fab-btn {
	width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	flex: 0 0 36px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255,255,255,0.96) !important;
	color: #334155 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	border: 1px solid rgba(255,255,255,0.6) !important;
	box-shadow: 0 3px 12px rgba(15,23,42,0.18) !important;
	backdrop-filter: blur(6px) !important;
	transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
}
.property-listing.property-1 .cp-card-fabs .cp-fab-btn:hover {
	transform: translateY(-2px) scale(1.06) !important;
	background: #ffffff !important;
	box-shadow: 0 6px 18px rgba(15,23,42,0.24) !important;
	text-decoration: none !important;
}
.property-listing.property-1 .cp-card-fabs .cp-fab-btn.cp-fab-saved,
.property-listing.property-1 .cp-card-fabs .cp-fab-btn:hover.cp-fab-wish {
	color: #f43f5e !important;
}
.property-listing.property-1 .cp-card-fabs .cp-fab-btn.cp-fab-wish:hover {
	color: #f43f5e !important;
}
.property-listing.property-1 .cp-card-fabs .cp-fab-btn.cp-fab-share:hover {
	color: #197003 !important;
}
.property-listing.property-1 .cp-card-fabs .cp-fab-btn.cp-compare-toggle:hover {
	color: #197003 !important;
}

/* Image: full width on top */
.property-listing.property-1 .listing-img-wrapper {
	width: 100% !important;
	height: 190px !important;
	flex: 0 0 190px !important;
	float: none !important;
	overflow: hidden;
	position: relative;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
}
.property-listing.property-1 .listing-img-wrapper a {
	display: block;
	min-height: 0 !important;
	height: auto !important;
}
.property-listing.property-1 .listing-img-wrapper img {
	width: 100% !important;
	height: 190px !important;
	min-height: 190px !important;
	max-height: 190px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	float: none !important;
	transition: transform 0.5s ease, filter 0.3s ease;
}
.property-listing.property-1:hover .listing-img-wrapper img {
	transform: scale(1.08) !important;
	filter: brightness(0.95) !important;
}

/* Content area */
.property-listing.property-1 .listing-content {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 18px 20px 16px 24px !important;
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
}

/* Wrapper box */
.property-listing.property-1 .listing-detail-wrapper-box {
	width: 100% !important;
	margin-bottom: 8px !important;
	overflow: visible !important;
}

/* Title + price row */
.property-listing.property-1 .listing-detail-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-bottom: 0 !important;
	flex-wrap: wrap !important;
	overflow: visible !important;
}
.property-listing.property-1 .listing-short-detail {
	flex: 1 !important;
	min-width: 0 !important;
	overflow: visible !important;
	position: relative !important;
}
.property-listing.property-1 .listing-name {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	margin: 0 0 6px !important;
	color: #1a2c4e !important;
	word-wrap: break-word !important;
}
.property-listing.property-1 .listing-name a {
	color: #1a2c4e !important;
	text-decoration: none !important;
}
.property-listing.property-1 .listing-name a:hover {
	color: #ff4f6a !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}
.property-listing.property-1 .fr-can-rating {
	display: none !important;
}
/* FOR SALE badge — in text flow, above title, consistent spacing */
.property-listing.property-1 .prt-types.sale {
	display: inline-block !important;
	position: relative !important;
	background: #F43F5E !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 4px 12px !important;
	font-size: 10.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	margin: 0 0 8px 0 !important;
	box-shadow: 0 2px 8px rgba(244,63,94,0.35) !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
}
.property-listing.property-1 .prt-types.sale::before {
	display: none !important;
}
.property-listing.property-1 .prt-types.sale::after {
	display: none !important;
}
.property-listing.property-1 .list-price {
	flex-shrink: 0 !important;
	text-align: right !important;
	min-width: 0 !important;
}
.property-listing.property-1 .list-price h6 {
	margin: 0 !important;
}
.property-listing.property-1 .listing-card-info-price {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #197003 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}
.property-listing.property-1 .list-price font {
	color: #666 !important;
	font-size: 10px !important;
}

/* Status line — soft green pill badge (own row, sits above ID and footer) */
.property-listing.property-1 .price-features-wrapper {
	display: block !important;
	float: none !important;
	clear: both;
	text-align: left !important;
	margin: 6px 0 4px !important;
	padding: 0 !important;
}
.property-listing.property-1 .list-fx-features {
	float: none !important;
	position: static !important;
	display: inline-block !important;
	background-color: #E6F4E6 !important;
	color: #197003 !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	line-height: 1.4 !important;
}
/* Pill is its own surface — kill the legacy green dot */
.property-listing.property-1 .list-fx-features::before {
	display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   UNIFORM CARD INNER LAYOUT — symmetrical across all cards
   ────────────────────────────────────────────────────────────────
   Rule: NO negative margins anywhere. Use padding-top on
   .listing-content so FOR SALE always starts at the same pixel.
   ════════════════════════════════════════════════════════════════ */
.property-listing.property-1 .listing-content {
	padding: 14px 16px 16px 16px !important;
	margin: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
.property-listing.property-1 .cp-card-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 14px !important;
	width: 100% !important;
}
.property-listing.property-1 .cp-card-stack {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}
.property-listing.property-1 .cp-card-cta {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 6px !important;
	min-height: 100% !important;
}

/* Level 1: FOR SALE pill */
.property-listing.property-1 .cp-card-stack .cp-badge-top,
.property-listing.property-1 .cp-card-stack .prt-types.sale {
	align-self: flex-start !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	z-index: auto !important;
	margin: 0 !important;
	padding: 4px 12px !important;
	background: #F43F5E !important;
	color: #ffffff !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25) !important;
	border: none !important;
}

/* Level 2: Title + Price block */
.property-listing.property-1 .cp-price-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 !important;
}
.property-listing.property-1 .cp-price-block .listing-name {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #1a2c4e !important;
}
.property-listing.property-1 .cp-price-block .listing-name a {
	color: #1a2c4e !important;
	text-decoration: none !important;
}
.property-listing.property-1 .cp-price-block .listing-card-info-price {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #197003 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
}

/* Title in new stack — full text always shown, wraps to as many lines as
   it needs instead of clamping/truncating (cards in a row may end up
   slightly different heights when titles differ in length). */
.property-listing.property-1 .cp-card-stack .listing-name {
	margin: 0 !important;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.3 !important;
	color: #16233f !important;
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
.property-listing.property-1 .cp-card-stack .listing-name a {
	color: #1a2c4e !important;
	text-decoration: none !important;
}

/* Level 3: Status pill — premium gradient green badge, compact */
.property-listing.property-1 .cp-status-pill {
	align-self: flex-start !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
	background: linear-gradient(135deg, #E6F4E6, #E6F4E6) !important;
	color: #197003 !important;
	padding: 3px 11px !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	border: 1px solid rgba(16, 185, 129, 0.2) !important;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

/* Level 4: Location with pin icon — full text, wraps instead of truncating */
.property-listing.property-1 .cp-location {
	display: flex !important;
	align-items: flex-start;
	gap: 6px;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	line-height: 1.4 !important;
	white-space: normal !important;
	word-wrap: break-word !important;
}
.property-listing.property-1 .cp-location i {
	color: #C89A3C !important;
	font-size: 13px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* Level 4b: Trust tagline — small italic caption under location */
.property-listing.property-1 .cp-card-tagline {
	font-size: 11px !important;
	font-style: italic !important;
	color: #94a3b8 !important;
	margin-top: 0 !important;
	display: block !important;
	white-space: normal !important;
	word-wrap: break-word !important;
}

/* Property ID — top of right column, no negative margin */
.property-listing.property-1 .cp-card-cta .cp-card-id {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	color: #64748B !important;
	line-height: 1.4 !important;
	text-align: right;
	white-space: nowrap !important;
}

/* Right column: Price (large navy, above View button) */
.property-listing.property-1 .cp-card-cta .cp-card-price {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #197003 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-align: right !important;
	white-space: nowrap !important;
}

/* Total Area — right column, small gold-tinted pill matching the rate
   badge's visual weight, sitting between it and the View button. Moved
   here from the left column (was crowding title/status/location into one
   tight stack) to spread the card's "spec" data across both columns. */
.property-listing.property-1 .cp-card-cta .cp-card-total-area {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #197003 !important;
	background: #F4F1EA !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}
.property-listing.property-1 .cp-card-cta .cp-card-total-area i {
	color: #197003 !important;
	font-size: 10.5px !important;
}

/* View button — vibrant navy, pinned right, with a sliding-arrow micro-interaction */
.property-listing.property-1 .cp-card-cta .more-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #197003 !important;
	color: #ffffff !important;
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	letter-spacing: 0.02em;
	padding: 9px 18px !important;
	border-radius: 999px !important;
	border: none !important;
	box-shadow:none !important;
	transition: transform 0.22s cubic-bezier(.22,1,.36,1), box-shadow 0.22s ease, filter 0.18s ease;
	white-space: nowrap !important;
}
.property-listing.property-1 .cp-card-cta .more-btn::after {
	content: '\f061' !important;
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900 !important;
	font-size: 10.5px !important;
	transition: transform 0.22s cubic-bezier(.22,1,.36,1) !important;
}
.property-listing.property-1 .cp-card-cta .more-btn:hover {
	transform: translateY(-1px) scale(1.03);
	filter: brightness(1.06);
	box-shadow:none !important;
}
.property-listing.property-1 .cp-card-cta .more-btn:hover::after {
	transform: translateX(3px) !important;
}

/* Mobile: compact card — same content, tighter sizing.
   cp-card-cta previously stayed flex-direction:column (inherited from
   desktop), so ID/Price/Button each rendered as their own full-width
   stacked block — three tall rows instead of one compact footer. Now
   it wraps as a row: ID takes its own line (flex-basis 100%), then
   Price and the View button share the line below it. */
@media (max-width: 576px) {
	.property-listing.property-1 .listing-img-wrapper {
		height: 160px !important;
		flex: 0 0 160px !important;
	}
	.property-listing.property-1 .listing-img-wrapper img {
		height: 160px !important;
		min-height: 160px !important;
		max-height: 160px !important;
	}
	.property-listing.property-1 .listing-content {
		padding: 12px 14px 14px 14px !important;
	}
	.property-listing.property-1 .cp-card-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.property-listing.property-1 .cp-card-stack {
		gap: 5px !important;
	}
	.property-listing.property-1 .cp-card-stack .listing-name {
		font-size: 14px !important;
		min-height: 36px !important;
	}
	.property-listing.property-1 .cp-location {
		font-size: 12px !important;
	}
	.property-listing.property-1 .cp-card-cta {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-self: stretch !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 0 !important;
		gap: 4px 10px !important;
		margin-top: 2px !important;
		padding-top: 8px !important;
		border-top: 1px solid #f1f5f9 !important;
	}
	.property-listing.property-1 .cp-card-cta .cp-card-id {
		flex: 0 0 100% !important;
		order: 0 !important;
		text-align: left !important;
	}
	.property-listing.property-1 .cp-card-cta .cp-card-price {
		order: 1 !important;
		font-size: 17px !important;
		text-align: left !important;
	}
	.property-listing.property-1 .cp-card-cta .more-btn {
		order: 2 !important;
		padding: 7px 16px !important;
		font-size: 12px !important;
	}
}

/* Footer: location left | View button right */
.property-listing.property-1 .listing-footer-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: auto !important;
	padding-top: 12px !important;
	border-top: 1px solid #f0f2f5 !important;
}
.property-listing.property-1 .listing-locate {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
}
.property-listing.property-1 .listing-location {
	display: block !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: 13px !important;
	color: #666 !important;
}
.property-listing.property-1 .listing-detail-btn {
	flex-shrink: 0 !important;
}
.property-listing.property-1 .listing-detail-btn .more-btn {
	display: inline-block !important;
	background: #197003 !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 10px 28px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	min-width: 88px !important;
	text-align: center !important;
	white-space: nowrap !important;
	border: none !important;
	box-shadow: none !important;
	transition: all 0.3s ease !important;
}
.property-listing.property-1 .listing-detail-btn .more-btn:hover {
	background: #135402 !important;
	box-shadow: none !important;
	transform: translateY(-2px) scale(1.05) !important;
	filter: brightness(1.1) !important;
}

@media (max-width: 991px) {
	.property-listing.property-1 .listing-img-wrapper img {
		height: 185px !important;
	}
	.property-listing.property-1 .listing-content {
		padding: 16px 18px 14px !important;
	}
	.property-listing.property-1 .listing-footer-wrapper {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}
}

@media (max-width: 576px) {
	.property-listing.property-1 .listing-content {
		padding: 14px 16px 12px !important;
	}
	.property-listing.property-1 .listing-detail-wrapper {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
	}
	.property-listing.property-1 .list-price {
		text-align: left !important;
	}
	.property-listing.property-1 .listing-footer-wrapper {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.property-listing.property-1 .listing-detail-btn .more-btn {
		width: 100% !important;
		padding: 12px 20px !important;
	}
	.property-listing.property-1 .prt-types.sale {
		padding: 3px 12px 3px 16px !important;
		font-size: 10px !important;
	}
}

/* ===== CTA BUTTON ANIMATIONS ===== */
@keyframes cta-pulse {
	0%,100% { box-shadow: none; transform: scale(1); }
	50%      { box-shadow: none; transform: scale(1.03); }
}
@keyframes cta-shine {
	0%   { background-position: -200% center; }
	60%,100% { background-position: 250% center; }
}
@keyframes cta-bounce {
	0%,100% { transform: translateY(0); }
	30%     { transform: translateY(-4px); }
	60%     { transform: translateY(-2px); }
}
li.add-listing.cta-btn {
	animation: cta-pulse 2.2s ease-in-out infinite, cta-bounce 4s ease-in-out infinite !important;
	position: relative;
	overflow: hidden;
	border-radius: 6px !important;
}
li.add-listing.cta-btn::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 200%; height: 100%;
	background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: cta-shine 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
li.add-listing.cta-btn a {
	position: relative;
	z-index: 2;
}
li.add-listing.cta-btn:hover {
	animation: none !important;
	transform: translateY(-3px) scale(1.05) !important;
	box-shadow: none !important;
	filter: brightness(1.15) !important;
}
li.add-listing:hover {
	transform: translateY(-4px) scale(1.06) !important;
	box-shadow: none !important;
	filter: brightness(1.18) saturate(1.2);
}
li.add-listing:active {
	transform: translateY(-2px) scale(1.03) !important;
	box-shadow: none !important;
}
li.add-listing a {
	transition: letter-spacing 0.22s ease !important;
}
li.add-listing:hover a {
	letter-spacing: 0.4px !important;
}

/* ===== PROPERTY BLOCK HEADER — Compact Height ===== */
.property_block_wrap.style-2 .property_block_wrap_header {
	padding: 0.5rem 1.2rem !important;
}
.property_block_wrap.style-2 .property_block_wrap_header h4 {
	font-size: 15px !important;
	line-height: 1.4 !important;
}
.property_block_wrap.style-2 .property_block_wrap_header h4:after {
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	font-size: 14px !important;
}


/* ---- from legacy header.php, lines 1082-1107 ---- */
        /* Overrides styles.css's #preloader/.preloader (a 50x50 double pulsing-dot
           loader) with a pulsing logo instead. #preloader's own fixed-fullscreen-
           overlay behavior (position/z-index/background) is left untouched —
           only what sits inside it changes. */
        .preloader, .preloader span { display: none !important; }
        .cp-preloader-badge {
          position: absolute;
          top: 50%; left: 50%;
          width: 44px; height: 44px;
          margin: -22px 0 0 -22px;
          border-radius: 50%;
          /* cplogo.jpg is a tall canvas — the round icon on top, the
             "Walajabad Property.com" wordmark underneath — so a plain
             object-fit:cover crop (constrained by width, since the source is
             taller than it is wide) still pulls in a sliver of the text below
             the icon. Rendered as a zoomed-in background instead, so the crop
             can be tightened past what object-fit's min-to-cover scale allows. */
          background-image: url('/cplogo.jpg');
          background-size: 230% auto;
          background-position: top center;
          background-repeat: no-repeat;
          animation: cpPreloaderPulse 1.1s ease-in-out infinite;
        }
        @keyframes cpPreloaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.88); opacity: 0.6; } }

/* ---- from legacy header.php, lines 1131-1432 ---- */
/* ===== STICKY HEADER WRAPPER ===== */
.cp-sticky-header{
  position:fixed;top:0;left:0;right:0;
  z-index:99999;
  background:#ffffff;
  box-shadow:none;
  transition:box-shadow .3s ease,padding .25s ease;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.cp-sticky-header.scrolled{
  background:#ffffff;
  box-shadow:0 4px 24px rgba(0,0,0,0.10);
}

/* ===== NATIVE APP FEEL (mobile) =====
   Removes the gray tap-flash Android/webkit shows on every link/button
   tap by default — that flash is one of the biggest "this is just a
   website" tells. Also smoother momentum scrolling on iOS. */
@media(max-width:768px){
  a, button, .cp-nav-btn, .cp-bn-item, .tab button, .cp-mobile-nav-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  html { -webkit-overflow-scrolling: touch; }
}

/* ===== MATERIAL-STYLE RIPPLE (Android app feel) =====
   Real Android apps flash a ripple from the tap point on every button/tab
   press. Applied via JS (below) to buttons, tabs, the hamburger and the
   bottom nav — .cp-ripple just reserves the clipping box. */
.cp-ripple{position:relative;overflow:hidden}
.cp-ripple-ink{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;animation:cpRippleAnim .55s ease-out forwards;z-index:5}
.cp-ripple-ink.cp-ripple-light{background:rgba(255,255,255,.55)}
.cp-ripple-ink.cp-ripple-dark{background:rgba(25, 112, 3,.22)}
@keyframes cpRippleAnim{to{transform:scale(2.6);opacity:0}}

/* ===== PROFESSIONAL HEADER NAV =====
   max-width was 1200px — on a wide desktop monitor (1920px etc.) that
   leaves ~360px of dead margin on each side, centering the logo well
   away from the actual left edge instead of anchoring it near it like
   most sites. Widened so the whole row (logo included) sits closer to
   the edges on large screens; unaffected below this width since the
   container was never actually reaching 1400px there anyway. */
/* max-width was 1400px — on genuinely wide desktop screens (1600px+) that
   left a large empty margin on both sides, making the logo look pulled in
   from the left edge compared to laptop widths (where the viewport itself
   is narrower than 1400px, so the bar already fills edge-to-edge). Raising
   it keeps laptop unchanged and lets the logo sit closer to the true left
   edge on wide desktops too. */
.cp-header-nav{display:flex;align-items:center;justify-content:space-between;max-width:1800px;margin:0 auto;padding:28px 20px;gap:16px;flex-wrap:nowrap}
.cp-header-logo{display:flex;align-items:center;flex-shrink:0;margin-left:120px}
.cp-header-logo img{height:100px;width:auto;transition:transform .2s}
.cp-header-logo img:hover{transform:scale(1.04)}
.cp-header-navlinks{display:flex;align-items:center;gap:26px;flex-shrink:0}
.cp-header-navlinks a{color:#1a2c4e;font-size:14.5px;font-weight:700;font-family:'Montserrat','Inter',sans-serif;text-decoration:none!important;letter-spacing:.2px;white-space:nowrap;transition:color .2s ease}
.cp-header-navlinks a:hover,.cp-header-navlinks a.active{color:#197003}
.cp-header-actions{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;margin-right:60px}

/* ===== SOLID FLAT NAVY PILLS — every header button (Post Property,
   Post Requirements, Govt Services, Tools & Guides, Sign In / My Account)
   uses the same flat #197003 fill, fully rounded, matching the removed
   Contact Us button's look instead of each having its own gradient/navy
   color. ===== */
.cp-nav-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:700;font-family:'Montserrat','Inter',sans-serif;text-decoration:none;border:none;cursor:pointer;transition:background .2s ease;letter-spacing:.3px;white-space:nowrap;background:#197003;color:#fff !important;box-shadow:none}
.cp-nav-btn i,.cp-nav-btn svg{font-size:15px}
.cp-nav-btn:hover,.cp-nav-btn:focus,.cp-nav-btn:active{background:#135402;box-shadow:none;color:#fff !important;text-decoration:none !important}
.cp-free-badge{background:#f9ae31;color:#1a2c4e;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:999px;line-height:1.6;margin-left:2px}

/* ── Tools & Guides dropdown toggle — same flat navy pill as its
   siblings; only the flyout panel below it keeps its own card surface. ── */
.cp-tools-wrap{position:relative;}
.cp-btn-tools .cp-tools-chevron{font-size:10px;transition:transform .2s ease;}
.cp-btn-tools.cp-tools-open .cp-tools-chevron{transform:rotate(180deg);}
.cp-tools-dropdown{
    display:none;position:absolute;top:calc(100% + 10px);left:0;width:250px;
    background:#fff;border:1px solid #e2e8f0;border-radius:12px;
    box-shadow:0 16px 40px rgba(15,23,42,.16);padding:8px;z-index:100002;
}
.cp-tools-dropdown.cp-tools-open{display:block;animation:cpToolsIn .18s ease;}
@keyframes cpToolsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cp-tools-dropdown a{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
    font-size:13px;font-weight:600;color:#334155 !important;text-decoration:none !important;
    transition:background .15s ease;
}
.cp-tools-dropdown a:hover{background:#F4F1EA;color:#197003 !important;}
.cp-tools-dropdown a i{width:18px;text-align:center;color:#197003;font-size:14px;flex-shrink:0;}
.cp-btn-logout{background:#ff4f6a;color:#fff !important;box-shadow:none;border-radius:8px}
.cp-btn-logout:hover,.cp-btn-logout:focus,.cp-btn-logout:active{background:#e6193f;box-shadow:none;color:#fff !important;text-decoration:none !important}
.cp-nav-btn:hover,.cp-nav-btn:focus,.cp-nav-btn:active{text-decoration:none !important}
.cp-social-icons{display:flex;align-items:center;gap:6px;margin-left:8px}
.cp-social-icons a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f0f2f5;color:#444;font-size:15px;text-decoration:none;transition:all .25s ease}
.cp-social-icons a:hover{background:#197003;color:#fff;transform:translateY(-3px);box-shadow:none;height:32px;background:linear-gradient(to bottom,transparent,#ddd,transparent);margin:0 6px}

/* ===== MOBILE HAMBURGER MENU =====
   Solid navy rounded-rectangle button (not a faint outline circle) so it
   reads as an obviously clickable, highlighted control at a glance. */
.cp-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0;width:46px;height:40px;background:#197003;border:none;border-radius:10px;box-shadow:none;z-index:100001;flex-shrink:0}
.cp-hamburger span{display:block;width:21px;height:2.6px;background:#fff;border-radius:2px;transition:all .3s ease}
.cp-hamburger.active{background:#135402}
.cp-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.cp-hamburger.active span:nth-child(2){opacity:0}
.cp-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

.cp-mobile-menu{
  position:fixed;top:0;right:-100%;width:280px;height:100vh;
  background:#f8fafc;z-index:100000;
  box-shadow:-5px 0 30px rgba(0,0,0,0.15);
  transition:right .3s ease;
  padding:80px 15px 20px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:12px;
  align-content:start;
}
.cp-mobile-menu.active{right:0}
.cp-mobile-menu-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.5);
  z-index:99999;
  opacity:0;visibility:hidden;
  transition:all .3s ease
}
.cp-mobile-menu-overlay.active{opacity:1;visibility:visible}

/* ── Mobile nav "card" — each drawer item is its own white card with icon
   accent box + left-aligned text, instead of a plain centered text link. ── */
.cp-mobile-nav-item{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;
  width:100%;
  height:auto!important;min-height:56px!important;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px 16px!important;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  font-size:14px;
  font-weight:600;
  color:#1e293b;
  text-decoration:none;
  overflow:visible!important;
  white-space:normal!important;
  transition:all .2s ease;
}
.cp-mobile-nav-item:hover,
.cp-mobile-nav-item:active{
  background:#F4F1EA;
  border-color:#197003;
  color:#197003;
}
.cp-mnav-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:10px;
  background:#f1f5f9;
  color:#197003;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  transition:background .2s ease;
}
.cp-mobile-nav-item:hover .cp-mnav-icon,
.cp-mobile-nav-item:active .cp-mnav-icon{background:#F4F1EA;}
.cp-mnav-text{flex:1;text-align:left!important;min-width:0;white-space:normal!important;line-height:1.35!important;}
.cp-mobile-nav-item .cp-free-badge{margin-left:auto;flex-shrink:0;}

/* ── Section divider (e.g. "TOOLS & GUIDES") — a grid item of its own,
   spanning full width, muted uppercase label rather than another card. ── */
.cp-mnav-section{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:#64748b;
  text-transform:uppercase;
  margin-top:15px;
  margin-bottom:8px;
  padding:0 4px;
}
.cp-mnav-section:first-child{margin-top:0;}
.cp-mobile-social{display:flex;justify-content:center;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #f0f2f5}
.cp-mobile-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f0f2f5;color:#444;font-size:16px;text-decoration:none;transition:all .25s ease}
.cp-mobile-social a:hover{background:#197003;color:#fff}

/* ===== CONTENT OFFSET to prevent hiding behind fixed header =====
   This reserves exactly the fixed header's own measured height (via the
   --cp-header-h JS-set variable) as padding-top on #main-wrapper — but
   #main-wrapper's own box was measured starting ~26px below the actual
   viewport top regardless (verified: html/body both sit at 0 with zero
   margin/padding, yet #main-wrapper's rendered top offset is still ~26px
   off), so the reserved padding overshot the header's real bottom edge by
   that same ~26px, showing up as visible empty space between the header
   and the hero below it. Trimmed out here since the exact mechanism
   wasn't isolated but the fix is safe either way: even if that phantom
   offset shrinks or vanishes later, a 24px cut leaves comfortable
   clearance rather than shaving it razor-thin against the header. */
#main-wrapper { padding-top:calc(var(--cp-header-h, 80px) - 24px); }

@media(max-width:992px){
  #main-wrapper { padding-top:calc(var(--cp-header-h, 70px) - 24px); }
}
/* Widened from 768px to 1150px: with 5 nav buttons + divider + 5 social
   icons all forced onto one flex-wrap:nowrap row, that row already
   overflowed off-screen well before 992px once "Govt Services" was added
   (verified with a real screenshot at 1024px — a 4th button was clipped
   at the viewport edge and the divider/social icons were pushed off
   entirely). Everything in this block is still reachable at those widths
   via the hamburger drawer (#cpMobileMenu), which already mirrors every
   item in .cp-header-actions, so nothing becomes inaccessible — it just
   moves into the drawer sooner instead of silently overflowing. */
/* Intermediate tightening for common laptop widths (1366/1440/1536px) —
   .cp-header-nav is capped at max-width:1200px (see above), so once the
   Tools & Guides dropdown became the 5th persistent button, the row's
   natural width (measured: 1082px) started exceeding the ~940px actually
   left over after the logo, overflowing ~150px past the header-nav's own
   right edge (confirmed with a computed-style check at 1440px). Rather
   than dropping this whole very-common width range to the hamburger
   drawer, shrink padding/gaps and drop the Govt Services button's Tamil
   suffix (still shown in full on the mobile drawer's copy of this link)
   to reclaim the space instead. */
@media(max-width:1500px){
  .cp-header-actions{gap:8px;margin-right:24px;}
  .cp-nav-btn{padding:9px 14px;font-size:13px;}
  .cp-govt-tamil-suffix{display:none;}
}
@media(max-width:1150px){
  #main-wrapper { padding-top:calc(var(--cp-header-h, 62px) - 24px); }
  .cp-header-nav{padding:6px 14px;gap:8px}
  .cp-nav-btn{padding:7px 12px;font-size:12px}
  .cp-social-icons a{width:30px;height:30px;font-size:13px}
  .cp-header-logo{margin-left:0 !important}
  .cp-header-logo img{height:74px}
  .cp-header-divider{display:none}
  .cp-hamburger{display:flex}
  .cp-header-actions{display:none}
  .cp-header-navlinks{display:none}
}
@media(max-width:480px){
  #main-wrapper { padding-top:calc(var(--cp-header-h, 58px) - 24px); }
  .cp-header-actions{gap:6px;margin-right:0}
  .cp-nav-btn{padding:6px 10px;font-size:11px;border-radius:6px;gap:5px}
  .cp-nav-btn i{font-size:12px}
  .cp-social-icons{display:none}
  .cp-header-divider{display:none}
  .cp-header-logo img{height:62px}
  .cp-mobile-menu{width:260px}
}

/* ===== APP-STYLE BOTTOM TAB BAR (mobile only) =====
   The single biggest signal for "feels like an app" — a fixed bottom
   navigation bar with icon+label tabs, matching how OLX/99acres/most
   marketplace apps structure primary navigation on phones. Hidden on
   desktop/tablet; only takes over on real phone widths. */
.cp-bottom-nav{display:none}
@media(max-width:768px){
  .cp-bottom-nav{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    height:60px;
    background:#fff;
    border-top:1px solid #eef0f3;
    box-shadow:0 -4px 20px rgba(0,0,0,0.08);
    z-index:99998;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .cp-bn-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#8a94a6;
    text-decoration:none;
    font-size:10.5px;
    font-weight:600;
    font-family:'Montserrat','Inter',sans-serif;
  }
  .cp-bn-item i{font-size:19px;line-height:1}
  .cp-bn-item.active{color:#197003}
  .cp-bn-item:hover{text-decoration:none;color:#197003}
  .cp-bn-post{position:relative;margin-top:-22px}
  .cp-bn-post-circle{
    width:48px;height:48px;border-radius:50%;
    background:#197003;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:21px;
    box-shadow:none;
    border:4px solid #fff;
    margin-bottom:2px;
  }
  .cp-bn-post.active .cp-bn-post-circle{background:#135402}
  .cp-bn-post span{color:#197003;font-weight:700}
  body{padding-bottom:60px;}
  .fab-stack{bottom:78px !important;}
}
@media(max-width:360px){
  .cp-bn-item{font-size:9.5px}
  .cp-bn-item i{font-size:17px}
}