/* =========================================================
   REALTORX — HEADER
   Modern Realtor / Real Estate Header
   ========================================================= */


/* =========================================================
   1. HEADER BASE
   ========================================================= */

.site-header {
	position: relative;
	z-index: 1000;
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid rgba(17, 24, 39, 0.08);
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.3s ease;
}


/* =========================================================
   2. NAVBAR
   ========================================================= */

.site-header .navbar {
	min-height: 86px;
	padding: 0;
	background: #ffffff !important;
}

.site-header .navbar > .container {
	display: flex;
	align-items: center;
	min-height: 86px;
}


/* =========================================================
   3. BRANDING
   ========================================================= */

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding .navbar-brand {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: #111827;
	text-decoration: none;
}

.site-title {
	display: inline-block;
	color: #111827;
	font-family: var(--rx-font-heading);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.site-branding .navbar-brand:hover .site-title {
	color: var(--rx-primary);
}


/* =========================================================
   4. CUSTOM LOGO
   ========================================================= */

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	max-width: 190px;
	max-height: 58px;
	object-fit: contain;
}


/* =========================================================
   5. NAVIGATION AREA
   ========================================================= */

#primary-menu-wrapper {
	align-items: center;
}

#primary-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* =========================================================
   6. NAVIGATION ITEMS
   ========================================================= */

#primary-menu > .nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

#primary-menu > .nav-item > .nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 86px;
	padding: 0 16px !important;

	color: #374151;

	font-family: var(--rx-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;

	text-decoration: none;
	white-space: nowrap;

	transition:
		color 0.25s ease,
		background-color 0.25s ease;
}


/* =========================================================
   7. NAVIGATION HOVER UNDERLINE
   ========================================================= */

#primary-menu > .nav-item > .nav-link::after {
	content: "";

	position: absolute;

	right: 16px;
	bottom: 19px;
	left: 16px;

	width: auto;
	height: 2px;

	background: var(--rx-primary);

	transform: scaleX(0);
	transform-origin: center;

	transition: transform 0.25s ease;
}

#primary-menu > .nav-item:hover > .nav-link::after,
#primary-menu > .nav-item.current-menu-item > .nav-link::after,
#primary-menu > .nav-item.current-menu-ancestor > .nav-link::after {
	transform: scaleX(1);
}


/* =========================================================
   8. ACTIVE / HOVER STATES
   ========================================================= */

#primary-menu > .nav-item:hover > .nav-link,
#primary-menu > .nav-item.current-menu-item > .nav-link,
#primary-menu > .nav-item.current-menu-ancestor > .nav-link {
	color: var(--rx-primary);
}


/* =========================================================
   9. DROPDOWN PARENT
   ========================================================= */

#primary-menu > .menu-item-has-children > .nav-link {
	padding-right: 35px !important;
}

#primary-menu > .menu-item-has-children > .nav-link::before {
	content: "\f107";

	position: absolute;
	top: 50%;
	right: 16px;

	color: currentColor;

	font-family: "Font Awesome 6 Free";
	font-size: 11px;
	font-weight: 900;

	transform: translateY(-50%);

	transition: transform 0.25s ease;
}

#primary-menu > .menu-item-has-children:hover > .nav-link::before {
	transform: translateY(-50%) rotate(180deg);
}


/* =========================================================
   10. DROPDOWN MENU
   ========================================================= */

#primary-menu .sub-menu {
	position: absolute;

	top: calc(100% + 1px);
	left: 0;

	min-width: 220px;

	margin: 0;
	padding: 10px;

	list-style: none;

	background: #ffffff;

	border: 1px solid rgba(17, 24, 39, 0.08);
	border-radius: 10px;

	box-shadow:
		0 15px 45px rgba(15, 23, 42, 0.10),
		0 3px 10px rgba(15, 23, 42, 0.04);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.25s ease;

	z-index: 1001;
}


/* Show dropdown on desktop */

#primary-menu > .menu-item-has-children:hover > .sub-menu,
#primary-menu > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* =========================================================
   11. DROPDOWN ITEMS
   ========================================================= */

#primary-menu .sub-menu .nav-item {
	position: relative;
	display: block;
	width: 100%;
}

#primary-menu .sub-menu .nav-link {
	display: flex;
	align-items: center;
	width: 100%;

	padding: 11px 13px !important;

	color: #374151;

	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;

	border-radius: 6px;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		padding-left 0.2s ease;
}

#primary-menu .sub-menu .nav-link:hover {
	padding-left: 17px !important;

	color: var(--rx-primary);

	background: rgba(13, 110, 253, 0.06);
}


/* Remove main-menu underline from dropdown links */

#primary-menu .sub-menu .nav-link::after {
	display: none;
}


/* =========================================================
   12. DROPDOWN SUBMENU ARROW
   ========================================================= */

#primary-menu .sub-menu .menu-item-has-children > .nav-link {
	padding-right: 30px !important;
}

#primary-menu .sub-menu .menu-item-has-children > .nav-link::before {
	content: "\f105";

	position: absolute;
	right: 13px;

	font-family: "Font Awesome 6 Free";
	font-size: 10px;
	font-weight: 900;
}


/* =========================================================
   13. HEADER CTA
   ========================================================= */

/*
 * Optional:
 *
 * If we later add a CTA button such as:
 *
 * "Schedule a Consultation"
 *
 * give it the class:
 *
 * .header-cta
 *
 */

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	margin-left: 20px;
	padding: 12px 20px;

	color: #ffffff !important;

	background: var(--rx-primary);

	border: 1px solid var(--rx-primary);
	border-radius: 6px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	white-space: nowrap;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.header-cta:hover {
	color: #ffffff !important;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 8px 20px rgba(13, 110, 253, 0.18);
}


/* =========================================================
   14. MOBILE TOGGLE
   ========================================================= */

.site-header .navbar-toggler {
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	margin-left: auto;
	padding: 0;

	background: #ffffff;

	border: 1px solid rgba(17, 24, 39, 0.10);
	border-radius: 6px;

	box-shadow: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.site-header .navbar-toggler:hover {
	background: #f8fafc;
	border-color: rgba(17, 24, 39, 0.18);
}

.site-header .navbar-toggler:focus {
	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}


/* =========================================================
   15. MOBILE MENU ICON
   ========================================================= */

.site-header .navbar-toggler-icon {
	width: 20px;
	height: 20px;

	background-image: none;

	position: relative;
}

.site-header .navbar-toggler-icon::before,
.site-header .navbar-toggler-icon::after,
.site-header .navbar-toggler-icon {
	background-repeat: no-repeat;
}


/*
 * Bootstrap's default hamburger icon is disabled
 * and replaced with a lightweight CSS icon.
 */

.site-header .navbar-toggler-icon::before,
.site-header .navbar-toggler-icon::after {
	content: "";

	position: absolute;
	left: 0;

	width: 20px;
	height: 2px;

	background: #111827;

	border-radius: 2px;
}

.site-header .navbar-toggler-icon::before {
	top: 5px;
}

.site-header .navbar-toggler-icon::after {
	bottom: 5px;
}


/* =========================================================
   16. STICKY HEADER
   ========================================================= */

.site-header.is-sticky {
	position: fixed;

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

	background: rgba(255, 255, 255, 0.96);

	border-bottom-color: rgba(17, 24, 39, 0.06);

	box-shadow:
		0 8px 30px rgba(15, 23, 42, 0.06);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	animation: realtorxHeaderDown 0.3s ease both;
}

.site-header.is-sticky .navbar {
	min-height: 76px;
}

.site-header.is-sticky .navbar > .container {
	min-height: 76px;
}

.site-header.is-sticky #primary-menu > .nav-item > .nav-link {
	min-height: 76px;
}


/* =========================================================
   17. STICKY HEADER ANIMATION
   ========================================================= */

@keyframes realtorxHeaderDown {

	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


/* =========================================================
   18. WORDPRESS ADMIN BAR
   ========================================================= */

.admin-bar .site-header.is-sticky {
	top: 32px;
}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

	.site-header .navbar > .container {
		padding-right: 20px;
		padding-left: 20px;
	}

	#primary-menu > .nav-item > .nav-link {
		padding-right: 12px !important;
		padding-left: 12px !important;
		font-size: 13px;
	}

	#primary-menu > .nav-item > .nav-link::after {
		right: 12px;
		left: 12px;
	}

	#primary-menu > .menu-item-has-children > .nav-link {
		padding-right: 30px !important;
	}

	#primary-menu > .menu-item-has-children > .nav-link::before {
		right: 12px;
	}

	.header-cta {
		margin-left: 12px;
		padding-right: 16px;
		padding-left: 16px;
	}

}


/* =========================================================
   20. MOBILE / COLLAPSED NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {

	.site-header .navbar {
		min-height: 72px;
	}

	.site-header .navbar > .container {
		min-height: 72px;
	}

	.site-header .navbar-collapse {
		margin-top: 0;
		padding: 15px 0 20px;

		border-top: 1px solid rgba(17, 24, 39, 0.08);
	}

	#primary-menu {
		display: block;
		width: 100%;
	}

	#primary-menu > .nav-item {
		display: block;
		width: 100%;
	}

	#primary-menu > .nav-item > .nav-link {
		display: flex;
		align-items: center;

		width: 100%;
		min-height: auto;

		padding: 13px 5px !important;

		font-size: 14px;
	}

	#primary-menu > .nav-item > .nav-link::after {
		display: none;
	}


	/* -----------------------------------------
	   Mobile Parent Arrow
	   ----------------------------------------- */

	#primary-menu > .menu-item-has-children > .nav-link {
		padding-right: 35px !important;
	}

	#primary-menu > .menu-item-has-children > .nav-link::before {
		right: 8px;
	}


	/* -----------------------------------------
	   Mobile Dropdown
	   ----------------------------------------- */

	#primary-menu .sub-menu {
		position: static;

		display: block;

		min-width: 0;

		margin: 0 0 5px;
		padding: 5px 0 5px 15px;

		background: transparent;

		border: 0;
		border-left: 1px solid rgba(17, 24, 39, 0.10);
		border-radius: 0;

		box-shadow: none;

		opacity: 1;
		visibility: visible;

		transform: none;
	}

	#primary-menu .sub-menu .nav-link {
		padding: 10px 12px !important;

		font-size: 13px;

		border-radius: 5px;
	}

	#primary-menu .sub-menu .nav-link:hover {
		padding-left: 16px !important;
	}


	/* -----------------------------------------
	   Mobile CTA
	   ----------------------------------------- */

	.header-cta {
		display: flex;

		width: 100%;

		margin: 15px 0 0;

		padding: 13px 20px;
	}

	.site-branding .custom-logo {
		max-width: 160px;
		max-height: 50px;
	}

	.site-title {
		font-size: 1.25rem;
	}

}


/* =========================================================
   21. SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.site-header .navbar > .container {
		padding-right: 15px;
		padding-left: 15px;
	}

	.site-header .navbar {
		min-height: 68px;
	}

	.site-header .navbar > .container {
		min-height: 68px;
	}

	.site-branding .custom-logo {
		max-width: 145px;
		max-height: 46px;
	}

	.site-title {
		font-size: 1.15rem;
	}

	.site-header .navbar-toggler {
		width: 42px;
		height: 42px;
	}

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-header,
	.site-header *,
	.site-header::before,
	.site-header::after {
		transition: none !important;
		animation: none !important;
	}

}

/* =========================================================
   REALTORX — FOOTER
   Modern Realtor / Real Estate Footer
   ========================================================= */


/* =========================================================
   23. FOOTER BASE
   ========================================================= */

.site-footer {
	position: relative;

	padding: 80px 0 0;

	color: #9ca3af;

	overflow: hidden;
}

.site-footer a {
	color: #d1d5db;

	text-decoration: none;

	transition:
		color 0.25s ease,
		opacity 0.25s ease;
}

.site-footer a:hover {
	color: #ffffff;
}


/* =========================================================
   24. FOOTER TOP
   ========================================================= */

.site-footer > .container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   25. FOOTER BRAND
   ========================================================= */

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

.footer-site-title {
	display: inline-block;

	margin-bottom: 22px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;

	text-decoration: none;

	transition: color 0.25s ease;
}

.footer-site-title:hover {
	color: var(--rx-primary);
}


/* =========================================================
   26. FOOTER LOGO
   ========================================================= */

.footer-logo {
	margin-bottom: 22px;
}

.footer-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.footer-logo .custom-logo {
	display: block;

	width: auto;
	max-width: 190px;
	max-height: 60px;

	object-fit: contain;
}


/*
 * If the uploaded logo is dark,
 * provide a subtle option for dark footer.
 */

.footer-logo .custom-logo {
	/* filter can be enabled if required */
	/* filter: brightness(0) invert(1); */
}


/* =========================================================
   27. FOOTER DESCRIPTION
   ========================================================= */

.footer-description {
	max-width: 370px;

	margin: 0;

	color: #9ca3af;

	font-family: var(--rx-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
}


/* =========================================================
   28. FOOTER WIDGET
   ========================================================= */

.footer-widget {
	height: 100%;
}

.footer-widget-title {
	position: relative;

	margin: 0 0 26px;
	padding: 0 0 14px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}


/* =========================================================
   29. WIDGET TITLE ACCENT
   ========================================================= */

.footer-widget-title::after {
	content: "";

	position: absolute;

	bottom: 0;
	left: 0;

	width: 34px;
	height: 2px;

	background: var(--rx-primary);

	border-radius: 2px;
}


/* =========================================================
   30. FOOTER MENU
   ========================================================= */

.footer-menu {
	margin: 0;
	padding: 0;

	list-style: none;
}

.footer-menu li {
	margin: 0 0 11px;
	padding: 0;
}

.footer-menu li:last-child {
	margin-bottom: 0;
}

.footer-menu a {
	position: relative;

	display: inline-flex;
	align-items: center;

	color: #9ca3af;

	font-family: var(--rx-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

.footer-menu a::before {
	content: "\f105";

	display: inline-block;

	margin-right: 8px;

	color: var(--rx-primary);

	font-family: "Font Awesome 6 Free";
	font-size: 10px;
	font-weight: 900;

	transition: transform 0.25s ease;
}

.footer-menu a:hover {
	color: #ffffff;

	transform: translateX(2px);
}

.footer-menu a:hover::before {
	transform: translateX(2px);
}


/* =========================================================
   31. CONTACT LIST
   ========================================================= */

.footer-contact-list {
	display: flex;
	flex-direction: column;

	margin: 0;
	padding: 0;

	list-style: none;

	gap: 20px;
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;

	gap: 14px;

	margin: 0;
	padding: 0;
}


/* =========================================================
   32. CONTACT ICON
   ========================================================= */

.footer-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	color: var(--rx-primary);

	background: rgba(255, 255, 255, 0.06);

	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 7px;

	font-size: 14px;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.footer-contact-list li:hover .footer-contact-icon {
	color: #ffffff;

	background: var(--rx-primary);
	border-color: var(--rx-primary);

	transform: translateY(-2px);
}


/* =========================================================
   33. CONTACT CONTENT
   ========================================================= */

.footer-contact-content {
	display: flex;
	flex-direction: column;

	gap: 3px;

	min-width: 0;
}

.footer-contact-label {
	color: #6b7280;

	font-family: var(--rx-font-body);
	font-size: 11px;
	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footer-contact-content a {
	display: inline-block;

	color: #e5e7eb;

	font-family: var(--rx-font-body);
	font-size: 14px;
	font-weight: 500;

	line-height: 1.5;

	word-break: break-word;
}

.footer-contact-content a:hover {
	color: var(--rx-primary);
}


/* =========================================================
   34. FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
	margin-top: 70px;

	padding: 24px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   35. COPYRIGHT
   ========================================================= */

.copyright,
.footer-credit {
	margin: 0;

	color: #6b7280;

	font-family: var(--rx-font-body);
	font-size: 13px;
	font-weight: 400;

	line-height: 1.6;
}

.copyright a,
.footer-credit a {
	color: #d1d5db;

	font-weight: 500;
}

.copyright a:hover,
.footer-credit a:hover {
	color: var(--rx-primary);
}


/* =========================================================
   36. FOOTER SOCIAL ICONS
   ========================================================= */

/*
 * Reserved for future social media implementation.
 *
 * Example HTML:
 *
 * <ul class="footer-social">
 *     <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
 *     <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
 *     <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
 * </ul>
 */

.footer-social {
	display: flex;
	align-items: center;

	gap: 8px;

	margin: 25px 0 0;
	padding: 0;

	list-style: none;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	color: #9ca3af;

	background: rgba(255, 255, 255, 0.05);

	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;

	font-size: 13px;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.footer-social a:hover {
	color: #ffffff;

	background: var(--rx-primary);
	border-color: var(--rx-primary);

	transform: translateY(-2px);
}


/* =========================================================
   37. FOOTER DECORATIVE ELEMENT
   ========================================================= */

.site-footer::before {
	content: "";

	position: absolute;

	top: -180px;
	right: -120px;

	width: 420px;
	height: 420px;

	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.035) 0%,
		rgba(255, 255, 255, 0) 70%
	);

	pointer-events: none;
}

.site-footer::after {
	content: "";

	position: absolute;

	bottom: -220px;
	left: -150px;

	width: 420px;
	height: 420px;

	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.025) 0%,
		rgba(255, 255, 255, 0) 70%
	);

	pointer-events: none;
}


/* =========================================================
   38. BACK TO TOP
   ========================================================= */

.back-to-top {
	position: fixed;

	right: 25px;
	bottom: 25px;

	z-index: 999;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	color: #ffffff;

	background: var(--rx-primary);

	border: 1px solid var(--rx-primary);
	border-radius: 6px;

	font-size: 13px;

	text-decoration: none;

	opacity: 0;
	visibility: hidden;

	transform: translateY(10px);

	box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.25s ease,
		background-color 0.25s ease;
}

.back-to-top:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);
}


/*
 * Add .is-visible with JavaScript when
 * the user scrolls down.
 */

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* =========================================================
   39. TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.site-footer {
		padding-top: 65px;
	}

	.footer-brand {
		max-width: 100%;
	}

	.footer-bottom {
		margin-top: 55px;
	}

}


/* =========================================================
   40. MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.site-footer {
		padding-top: 55px;
	}

	.footer-widget {
		height: auto;
	}

	.footer-bottom {
		margin-top: 45px;
	}

	.footer-credit {
		text-align: left !important;
	}

	.back-to-top {
		right: 18px;
		bottom: 18px;

		width: 42px;
		height: 42px;
	}

}


/* =========================================================
   41. SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.site-footer {
		padding-top: 50px;
	}

	.footer-site-title {
		font-size: 1.3rem;
	}

	.footer-logo .custom-logo {
		max-width: 160px;
		max-height: 50px;
	}

	.footer-description {
		font-size: 13px;
		line-height: 1.75;
	}

	.footer-bottom {
		margin-top: 40px;
		padding: 20px 0;
	}

	.footer-contact-list {
		gap: 16px;
	}

	.footer-contact-icon {
		flex-basis: 40px;

		width: 40px;
		height: 40px;
	}

	.copyright,
	.footer-credit {
		font-size: 12px;
	}

}


/* =========================================================
   42. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-footer *,
	.site-footer::before,
	.site-footer::after,
	.back-to-top {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   HERO
   ========================================================= */

.hero-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item {
	width: 100%;
	height: 680px;
}

.hero-section .carousel-item {
	position: relative;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(5, 15, 30, 0.82) 0%,
			rgba(5, 15, 30, 0.62) 42%,
			rgba(5, 15, 30, 0.18) 100%
	);
}

.hero-section .container {
	position: relative;
	z-index: 2;

	height: 100%;
}

.hero-content {
	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	max-width: 720px;
	height: 100%;

	padding: 80px 0;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 20px;

	color: #ffffff;

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-eyebrow::before {
	content: "";

	width: 32px;
	height: 2px;

	background: var(--rx-primary);
}

.hero-title {
	max-width: 700px;

	margin: 0 0 22px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: clamp(42px, 5vw, 72px);
	font-weight: 700;
	line-height: 1.05;

	letter-spacing: -0.045em;
}

.hero-title span {
	display: block;
	color: #ffffff;
}

.hero-description {
	max-width: 590px;

	margin: 0 0 32px;

	color: rgba(255, 255, 255, 0.82);

	font-size: 16px;
	line-height: 1.8;
}

.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	min-height: 52px;

	padding: 14px 24px;

	font-size: 13px;
	font-weight: 700;

	border-radius: 5px;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.hero-btn:hover {
	transform: translateY(-2px);

	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.hero-btn i {
	font-size: 11px;
}

.hero-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	color: #ffffff;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none;

	transition:
		color 0.25s ease,
		gap 0.25s ease;
}

.hero-link:hover {
	color: #ffffff;
	gap: 13px;
}

.hero-link i {
	font-size: 10px;
}


/* =========================================================
   HERO CONTROLS
   ========================================================= */

.hero-slider-control {
	top: auto;
	bottom: 42px;

	width: 44px;
	height: 44px;

	margin: 0;

	opacity: 1;

	background: rgba(255, 255, 255, 0.10);

	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 5px;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.hero-slider-control:hover {
	background: var(--rx-primary);
	border-color: var(--rx-primary);
}

.hero-slider-control.carousel-control-prev {
	right: 80px;
	left: auto;
}

.hero-slider-control.carousel-control-next {
	right: 25px;
}

.hero-slider-control .carousel-control-prev-icon,
.hero-slider-control .carousel-control-next-icon {
	width: 14px;
	height: 14px;
}


/* =========================================================
   HERO INDICATORS
   ========================================================= */

.hero-section .carousel-indicators {
	right: auto;
	bottom: 45px;
	left: 0;

	justify-content: flex-start;

	width: auto;

	margin: 0;

	padding-left: max(
		15px,
		calc((100% - 1320px) / 2)
	);
}

.hero-section .carousel-indicators button {
	width: 28px;
	height: 2px;

	margin: 0 5px;

	background-color: rgba(255, 255, 255, 0.45);

	border: 0;

	opacity: 1;

	transition:
		width 0.3s ease,
		background-color 0.3s ease;
}

.hero-section .carousel-indicators button.active {
	width: 50px;

	background-color: #ffffff;
}


/* =========================================================
   HERO SLIDE ANIMATION
   ========================================================= */

.hero-section .carousel-item {
	transition:
		transform 0.8s ease-in-out,
		opacity 0.8s ease-in-out;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.hero-section .carousel,
	.hero-section .carousel-inner,
	.hero-section .carousel-item {
		height: 600px;
	}

	.hero-content {
		max-width: 650px;
		padding: 60px 20px;
	}

	.hero-title {
		font-size: clamp(40px, 7vw, 58px);
	}

	.hero-description {
		font-size: 15px;
	}

	.hero-section .carousel-indicators {
		padding-left: 20px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.hero-section .carousel,
	.hero-section .carousel-inner,
	.hero-section .carousel-item {
		height: 600px;
	}

	.hero-overlay {
		background:
			linear-gradient(
				90deg,
				rgba(5, 15, 30, 0.78) 0%,
				rgba(5, 15, 30, 0.58) 100%
			);
	}

	.hero-content {
		max-width: 100%;

		padding: 50px 15px 100px;
	}

	.hero-eyebrow {
		margin-bottom: 16px;

		font-size: 10px;
	}

	.hero-title {
		margin-bottom: 18px;

		font-size: clamp(36px, 11vw, 48px);
		line-height: 1.08;
	}

	.hero-description {
		max-width: 500px;

		margin-bottom: 25px;

		font-size: 14px;
		line-height: 1.7;
	}

	.hero-actions {
		gap: 18px;
	}

	.hero-btn {
		min-height: 48px;
		padding: 12px 19px;
	}

	.hero-slider-control {
		bottom: 25px;

		width: 40px;
		height: 40px;
	}

	.hero-slider-control.carousel-control-prev {
		right: 70px;
	}

	.hero-slider-control.carousel-control-next {
		right: 20px;
	}

	.hero-section .carousel-indicators {
		bottom: 38px;

		padding-left: 15px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.hero-section .carousel,
	.hero-section .carousel-inner,
	.hero-section .carousel-item {
		height: 570px;
	}

	.hero-content {
		padding: 40px 15px 95px;
	}

	.hero-title {
		font-size: 36px;
	}

	.hero-description {
		font-size: 13px;
	}

	.hero-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 15px;
	}

	.hero-btn {
		width: auto;
	}

}


/* =========================================================
   FEATURED LISTINGS
   ========================================================= */

.featured-listings-section {
	padding: 5rem 0;
	background: #ffffff;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 30px;

	margin-bottom: 45px;
}

.section-heading {
	max-width: 650px;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 14px;

	color: var(--rx-primary);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section-eyebrow::before {
	content: "";

	width: 28px;
	height: 2px;

	background: var(--rx-primary);
}

.section-title {
	margin: 0;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.1;

	letter-spacing: -0.04em;
}

.section-title span {
	display: block;
	color: var(--rx-primary);
}

.section-heading-action {
	flex-shrink: 0;
	padding-bottom: 5px;
}

.section-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	color: var(--rx-heading);

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color 0.25s ease,
		gap 0.25s ease;
}

.section-link:hover {
	color: var(--rx-primary);
	gap: 14px;
}

.section-link i {
	font-size: 10px;
}


/* =========================================================
   PROPERTY CARD
   ========================================================= */

.property-card {
	position: relative;

	background: #f8fafc;

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

	overflow: hidden;
}

.property-image {
	position: relative;

	width: 100%;
	height: 100%;
	min-height: 480px;

	overflow: hidden;
}

.property-image::after {
	content: "";

	position: absolute;
	inset: 0;

	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0) 45%,
		rgba(0, 0, 0, 0.18) 100%
	);

	pointer-events: none;
}

.property-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.7s ease;
}

.carousel-item.active .property-image img {
	transform: scale(1.01);
}


/* =========================================================
   PROPERTY STATUS
   ========================================================= */

.property-status {
	position: absolute;

	top: 22px;
	left: 22px;

	z-index: 2;

	display: inline-flex;
	align-items: center;

	padding: 8px 13px;

	color: #ffffff;

	background: var(--rx-primary);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.08em;
	text-transform: uppercase;

	border-radius: 3px;
}


/* =========================================================
   FEATURED BADGE
   ========================================================= */

.property-featured {
	position: absolute;

	top: 22px;
	right: 22px;

	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 8px 12px;

	color: #ffffff;

	background: rgba(15, 23, 42, 0.78);

	font-size: 10px;
	font-weight: 600;

	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 3px;

	backdrop-filter: blur(8px);
}

.property-featured i {
	color: #f59e0b;
	font-size: 9px;
}


/* =========================================================
   PROPERTY CONTENT
   ========================================================= */

.property-content {
	display: flex;
	flex-direction: column;

	justify-content: center;

	height: 100%;

	padding: 55px 50px;
}

.property-price {
	margin-bottom: 14px;

	color: var(--rx-primary);

	font-family: var(--rx-font-heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.property-title {
	margin: 0 0 12px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;

	letter-spacing: -0.03em;
}

.property-location {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-bottom: 25px;

	color: var(--rx-text);

	font-size: 13px;
	font-weight: 500;
}

.property-location i {
	color: var(--rx-primary);

	font-size: 12px;
}

.property-description {
	margin: 0 0 30px;

	color: var(--rx-text);

	font-size: 14px;
	line-height: 1.8;
}


/* =========================================================
   PROPERTY META
   ========================================================= */

.property-meta {
	display: flex;
	align-items: center;

	margin-bottom: 32px;
	padding: 20px 0;

	border-top: 1px solid var(--rx-border);
	border-bottom: 1px solid var(--rx-border);
}

.property-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;

	flex: 1;

	padding-right: 15px;

	border-right: 1px solid var(--rx-border);
}

.property-meta-item:last-child {
	padding-right: 0;
	padding-left: 15px;

	border-right: 0;
}

.property-meta-item:nth-child(2) {
	padding-left: 15px;
}

.property-meta-item i {
	color: var(--rx-primary);

	font-size: 14px;
}

.property-meta-item div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.property-meta-item strong {
	color: var(--rx-heading);

	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.property-meta-item span {
	color: var(--rx-text);

	font-size: 10px;
	line-height: 1.2;
}


/* =========================================================
   PROPERTY BUTTON
   ========================================================= */

.property-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	align-self: flex-start;

	min-height: 48px;

	padding: 13px 22px;

	color: #ffffff;

	background: var(--rx-primary);

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;

	border-radius: 4px;

	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.property-button:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.property-button i {
	font-size: 9px;
}


/* =========================================================
   SLIDER CONTROLS
   ========================================================= */

.featured-slider-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 8px;

	margin-top: 25px;
}

.featured-slider-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	color: var(--rx-heading);

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	font-size: 12px;

	cursor: pointer;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.featured-slider-button:hover {
	color: #ffffff;

	background: var(--rx-primary);
	border-color: var(--rx-primary);

	transform: translateY(-2px);
}


/* =========================================================
   SLIDER TRANSITION
   ========================================================= */

#featuredListingsSlider .carousel-item {
	transition:
		transform 0.65s ease-in-out,
		opacity 0.65s ease-in-out;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.featured-listings-section {
		padding: 80px 0;
	}

	.section-heading-row {
		align-items: flex-start;
		flex-direction: column;

		margin-bottom: 35px;
	}

	.property-image {
		height: 450px;
		min-height: 450px;
	}

	.property-content {
		padding: 45px 35px;
	}

	.property-title {
		font-size: 27px;
	}

	.featured-slider-controls {
		margin-top: 20px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.featured-listings-section {
		padding: 65px 0;
	}

	.section-title {
		font-size: 36px;
	}

	.property-image {
		height: 350px;
		min-height: 350px;
	}

	.property-status {
		top: 15px;
		left: 15px;
	}

	.property-featured {
		top: 15px;
		right: 15px;
	}

	.property-content {
		padding: 35px 25px;
	}

	.property-price {
		font-size: 23px;
	}

	.property-title {
		font-size: 25px;
	}

	.property-description {
		font-size: 13px;
	}

	.property-meta {
		margin-bottom: 25px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.featured-listings-section {
		padding: 55px 0;
	}

	.section-title {
		font-size: 32px;
	}

	.property-image {
		height: 290px;
		min-height: 290px;
	}

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

	.property-title {
		font-size: 23px;
	}

	.property-meta-item {
		gap: 7px;
	}

	.property-meta-item:nth-child(2) {
		padding-left: 8px;
	}

	.property-meta-item:last-child {
		padding-left: 8px;
	}

	.property-meta-item strong {
		font-size: 13px;
	}

	.property-meta-item span {
		font-size: 9px;
	}

	.property-button {
		width: 100%;
	}

	.featured-slider-controls {
		justify-content: flex-start;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.featured-listings-section *,
	.featured-listings-section img {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   KEY POINTS
   ========================================================= */

.key-points-section {
	padding: 0;

	background: #ffffff;
}

.key-points-row {
	border-top: 1px solid var(--rx-border);
	border-bottom: 1px solid var(--rx-border);
}


/* =========================================================
   KEY POINT
   ========================================================= */

.key-point {
	display: flex;
	align-items: flex-start;

	height: 100%;

	padding: 38px 30px;

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

	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.key-points-row > div:last-child .key-point {
	border-right: 0;
}

.key-point:hover {
	background: #f8fafc;
}


/* =========================================================
   KEY POINT ICON
   ========================================================= */

.key-point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 46px;

	width: 46px;
	height: 46px;

	margin-right: 18px;

	color: var(--rx-primary);

	background: rgba(15, 118, 110, 0.08);

	border-radius: 5px;

	font-size: 15px;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		transform 0.25s ease;
}

.key-point:hover .key-point-icon {
	color: #ffffff;

	background: var(--rx-primary);

	transform: translateY(-2px);
}


/* =========================================================
   KEY POINT CONTENT
   ========================================================= */

.key-point-content {
	min-width: 0;
}

.key-point-content h3 {
	margin: 1px 0 8px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;

	letter-spacing: -0.01em;
}

.key-point-content p {
	margin: 0;

	color: var(--rx-text);

	font-size: 12px;
	line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.key-point {
		min-height: 170px;

		padding: 30px 25px;

		border-bottom: 1px solid var(--rx-border);
	}

	.key-points-row > div:nth-child(2) .key-point {
		border-right: 0;
	}

	.key-points-row > div:nth-child(3) .key-point,
	.key-points-row > div:nth-child(4) .key-point {
		border-bottom: 0;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.key-point {
		min-height: auto;

		padding: 28px 20px;

		border-right: 0 !important;
		border-bottom: 1px solid var(--rx-border);
	}

	.key-points-row > div:last-child .key-point {
		border-bottom: 0;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.key-point {
		padding: 25px 15px;
	}

	.key-point-icon {
		flex-basis: 42px;

		width: 42px;
		height: 42px;

		margin-right: 14px;

		font-size: 13px;
	}

	.key-point-content h3 {
		font-size: 14px;
	}

	.key-point-content p {
		font-size: 12px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.key-points-section *,
	.key-point {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   ABOUT REALTOR
   ========================================================= */

.about-realtor-section {
	position: relative;

	padding: 110px 0;

	background: #f8fafc;

	overflow: hidden;
}

.about-realtor-section::before {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	width: 38%;
	height: 100%;

	background: #ffffff;

	pointer-events: none;
}

.about-realtor-section .container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   INTRO
   ========================================================= */

.about-realtor-intro {
	position: relative;

	padding-right: 30px;
}

.about-realtor-intro .section-eyebrow {
	margin-bottom: 20px;
}

.about-realtor-title {
	margin: 0;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: clamp(48px, 6vw, 78px);
	font-weight: 700;
	line-height: 0.95;

	letter-spacing: -0.055em;
}

.about-realtor-company {
	margin-top: 20px;
}

.about-realtor-company span {
	color: var(--rx-primary);

	font-size: 12px;
	font-weight: 700;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* =========================================================
   SECTION NUMBER
   ========================================================= */

.about-realtor-number {
	display: flex;
	align-items: center;
	gap: 15px;

	margin-top: 55px;
}

.about-realtor-number::after {
	content: "";

	width: 80px;
	height: 1px;

	background: var(--rx-border);
}

.about-realtor-number span {
	color: var(--rx-muted);

	font-family: var(--rx-font-heading);
	font-size: 12px;
	font-weight: 600;

	letter-spacing: 0.08em;
}


/* =========================================================
   CONTENT
   ========================================================= */

.about-realtor-content {
	max-width: 680px;

	padding: 10px 0 10px 50px;
}

.about-realtor-content p {
	margin: 0 0 20px;

	color: var(--rx-text);

	font-size: 14px;
	line-height: 1.85;
}

.about-realtor-content p:last-of-type {
	margin-bottom: 0;
}

.about-realtor-lead {
	margin-bottom: 25px !important;

	color: var(--rx-heading) !important;

	font-family: var(--rx-font-heading);

	font-size: 23px !important;
	font-weight: 600;

	line-height: 1.45 !important;

	letter-spacing: -0.02em;
}


/* =========================================================
   CTA
   ========================================================= */

.about-realtor-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: 38px;
	padding: 22px 22px 22px 25px;

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 5px;

	box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
}

.about-realtor-cta-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.about-realtor-cta-content span {
	color: var(--rx-muted);

	font-size: 11px;
	font-weight: 600;

	letter-spacing: 0.03em;
}

.about-realtor-cta-content a {
	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none;

	transition: color 0.25s ease;
}

.about-realtor-cta-content a:hover {
	color: var(--rx-primary);
}


/* =========================================================
   CALL BUTTON
   ========================================================= */

.about-realtor-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 46px;

	width: 46px;
	height: 46px;

	color: #ffffff;

	background: var(--rx-primary);

	border-radius: 4px;

	font-size: 13px;

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.about-realtor-call:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);

	transform: translateY(-2px);

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.about-realtor-section {
		padding: 85px 0;
	}

	.about-realtor-section::before {
		display: none;
	}

	.about-realtor-intro {
		padding-right: 0;
	}

	.about-realtor-number {
		margin-top: 35px;
	}

	.about-realtor-content {
		max-width: 100%;

		padding: 0;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.about-realtor-section {
		padding: 70px 0;
	}

	.about-realtor-title {
		font-size: 52px;
	}

	.about-realtor-company {
		margin-top: 15px;
	}

	.about-realtor-number {
		margin-top: 30px;
	}

	.about-realtor-content {
		margin-top: 10px;
	}

	.about-realtor-lead {
		font-size: 20px !important;
	}

	.about-realtor-content p {
		font-size: 13px;
		line-height: 1.8;
	}

	.about-realtor-cta {
		margin-top: 30px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.about-realtor-section {
		padding: 60px 0;
	}

	.about-realtor-title {
		font-size: 45px;
	}

	.about-realtor-company span {
		font-size: 10px;
	}

	.about-realtor-lead {
		font-size: 19px !important;
	}

	.about-realtor-cta {
		padding: 18px;
	}

	.about-realtor-cta-content a {
		font-size: 17px;
	}

	.about-realtor-call {
		flex-basis: 42px;

		width: 42px;
		height: 42px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.about-realtor-section *,
	.about-realtor-section::before {
		transition: none !important;
		animation: none !important;
	}

}




/* =========================================================
   QUICK CONTACT
   ========================================================= */

.quick-contact-section {
	position: relative;

	padding: 110px 0;

	background: var(--rx-dark);

	overflow: hidden;
}

.quick-contact-section::before {
	content: "";

	position: absolute;

	top: -250px;
	right: -180px;

	width: 550px;
	height: 550px;

	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0) 70%
	);

	pointer-events: none;
}

.quick-contact-section::after {
	content: "";

	position: absolute;

	bottom: -300px;
	left: -200px;

	width: 550px;
	height: 550px;

	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.035) 0%,
		rgba(255, 255, 255, 0) 70%
	);

	pointer-events: none;
}

.quick-contact-section .container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   CONTACT CONTENT
   ========================================================= */

.quick-contact-content {
	max-width: 500px;
}

.quick-contact-section .section-eyebrow {
	color: var(--rx-primary);
}

.quick-contact-title {
	margin: 0 0 25px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 700;
	line-height: 1.05;

	letter-spacing: -0.045em;
}

.quick-contact-title span {
	display: block;

	color: var(--rx-primary);
}

.quick-contact-description {
	margin: 0;

	color: rgba(255, 255, 255, 0.68);

	font-size: 14px;
	line-height: 1.85;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.quick-contact-details {
	display: flex;
	flex-direction: column;

	gap: 15px;

	margin-top: 35px;
}

.quick-contact-detail {
	display: flex;
	align-items: center;

	gap: 14px;

	color: #ffffff;

	text-decoration: none;
}

.quick-contact-detail:hover {
	color: #ffffff;
}

.quick-contact-detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	color: var(--rx-primary);

	background: rgba(255, 255, 255, 0.07);

	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;

	font-size: 13px;

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		transform 0.25s ease;
}

.quick-contact-detail:hover .quick-contact-detail-icon {
	color: #ffffff;

	background: var(--rx-primary);

	transform: translateY(-2px);
}

.quick-contact-detail-content {
	display: flex;
	flex-direction: column;

	gap: 3px;
}

.quick-contact-detail-content small {
	color: rgba(255, 255, 255, 0.42);

	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quick-contact-detail-content strong {
	color: #ffffff;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}


/* =========================================================
   FORM WRAPPER
   ========================================================= */

.quick-contact-form-wrapper {
	padding: 42px;

	background: #ffffff;

	border-radius: 6px;

	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

.quick-contact-form-heading {
	margin-bottom: 28px;
}

.quick-contact-form-heading h3 {
	margin: 0 0 8px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: -0.025em;
}

.quick-contact-form-heading p {
	margin: 0;

	color: var(--rx-text);

	font-size: 13px;
	line-height: 1.6;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.quick-contact-form .form-label {
	display: block;

	margin-bottom: 8px;

	color: var(--rx-heading);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.02em;
}

.quick-contact-form .form-control,
.quick-contact-form .form-select {
	min-height: 48px;

	padding: 12px 14px;

	color: var(--rx-heading);

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	font-family: var(--rx-font-body);
	font-size: 13px;

	box-shadow: none;

	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.quick-contact-form textarea.form-control {
	min-height: 120px;

	resize: vertical;
}

.quick-contact-form .form-control::placeholder {
	color: var(--rx-muted);
}

.quick-contact-form .form-control:focus,
.quick-contact-form .form-select:focus {
	color: var(--rx-heading);

	background: #ffffff;

	border-color: var(--rx-primary);

	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.quick-contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 11px;

	min-height: 50px;

	padding: 13px 24px;

	color: #ffffff;

	background: var(--rx-primary);

	border: 1px solid var(--rx-primary);
	border-radius: 4px;

	font-family: var(--rx-font-body);
	font-size: 12px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.quick-contact-submit:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.quick-contact-submit i {
	font-size: 9px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.quick-contact-section {
		padding: 85px 0;
	}

	.quick-contact-content {
		max-width: 650px;
	}

	.quick-contact-form-wrapper {
		padding: 35px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.quick-contact-section {
		padding: 70px 0;
	}

	.quick-contact-title {
		font-size: 42px;
	}

	.quick-contact-description {
		font-size: 13px;
	}

	.quick-contact-form-wrapper {
		padding: 30px 25px;
	}

	.quick-contact-form-heading h3 {
		font-size: 22px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.quick-contact-section {
		padding: 60px 0;
	}

	.quick-contact-title {
		font-size: 36px;
	}

	.quick-contact-form-wrapper {
		padding: 25px 20px;
	}

	.quick-contact-submit {
		width: 100%;
	}

	.quick-contact-detail-content strong {
		font-size: 13px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.quick-contact-section *,
	.quick-contact-section::before,
	.quick-contact-section::after {
		transition: none !important;
		animation: none !important;
	}

}



/* =========================================================
   BLOGS
   ========================================================= */

.blogs-section {
	padding: 110px 0;

	background: #ffffff;
}


/* =========================================================
   BLOG CARD
   ========================================================= */

.blog-card {
	height: 100%;

	background: #ffffff;

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

	overflow: hidden;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.blog-card:hover {
	transform: translateY(-5px);

	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   BLOG IMAGE
   ========================================================= */

.blog-card-image {
	position: relative;

	width: 100%;
	height: 270px;

	overflow: hidden;

	background: #f1f5f9;
}

.blog-card-image > a {
	display: block;

	width: 100%;
	height: 100%;
}

.blog-card-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.04);
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.blog-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: var(--rx-muted);

	background: #f1f5f9;

	font-size: 28px;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.blog-card-category {
    width: fit-content !important;
    height: auto !important;
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    display: flex !important;
    align-items: center;
    padding: 8px 12px;
    color: #ffffff;
    background: var(--rx-primary);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
}

.blog-card-category:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
}


/* =========================================================
   BLOG CONTENT
   ========================================================= */

.blog-card-content {
	display: flex;
	flex-direction: column;

	padding: 28px 28px 30px;
}


/* =========================================================
   BLOG META
   ========================================================= */

.blog-card-meta {
	display: flex;
	align-items: center;

	margin-bottom: 13px;

	color: var(--rx-muted);

	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.blog-card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.blog-card-meta i {
	color: var(--rx-primary);

	font-size: 10px;
}


/* =========================================================
   BLOG TITLE
   ========================================================= */

.blog-card-title {
	margin: 0 0 13px;

	font-family: var(--rx-font-heading);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;

	letter-spacing: -0.025em;
}

.blog-card-title a {
	color: var(--rx-heading);

	text-decoration: none;

	transition: color 0.25s ease;
}

.blog-card-title a:hover {
	color: var(--rx-primary);
}


/* =========================================================
   BLOG EXCERPT
   ========================================================= */

.blog-card-excerpt {
	margin-bottom: 22px;

	color: var(--rx-text);

	font-size: 13px;
	line-height: 1.75;
}


/* =========================================================
   BLOG LINK
   ========================================================= */

.blog-card-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	align-self: flex-start;

	margin-top: auto;

	color: var(--rx-heading);

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color 0.25s ease,
		gap 0.25s ease;
}

.blog-card-link:hover {
	color: var(--rx-primary);

	gap: 13px;
}

.blog-card-link i {
	font-size: 9px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.blogs-empty {
	max-width: 600px;

	margin: 0 auto;
	padding: 60px 30px;

	text-align: center;

	background: #f8fafc;

	border: 1px solid var(--rx-border);
}

.blogs-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;

	margin-bottom: 18px;

	color: var(--rx-primary);

	background: rgba(15, 118, 110, 0.08);

	border-radius: 5px;

	font-size: 18px;
}

.blogs-empty h3 {
	margin: 0 0 10px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: 22px;
	font-weight: 700;
}

.blogs-empty p {
	max-width: 450px;

	margin: 0 auto;

	color: var(--rx-text);

	font-size: 13px;
	line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.blogs-section {
		padding: 85px 0;
	}

	.blog-card-image {
		height: 250px;
	}

	.blog-card-content {
		padding: 25px;
	}

	.blog-card-title {
		font-size: 19px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.blogs-section {
		padding: 70px 0;
	}

	.blog-card-image {
		height: 280px;
	}

	.blog-card-content {
		padding: 25px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.blogs-section {
		padding: 60px 0;
	}

	.blog-card-image {
		height: 240px;
	}

	.blog-card-content {
		padding: 22px;
	}

	.blog-card-title {
		font-size: 20px;
	}

	.blog-card-excerpt {
		font-size: 12px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.blogs-section *,
	.blogs-section img {
		transition: none !important;
		animation: none !important;
	}

}

/* =========================================================
   SECONDARY HERO
   ========================================================= */

.secondary-hero {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 430px;

	padding: 100px 0;

	background-color: #17202a;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	overflow: hidden;
}

.secondary-hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(8, 18, 30, 0.88) 0%,
			rgba(8, 18, 30, 0.68) 50%,
			rgba(8, 18, 30, 0.35) 100%
		);

	pointer-events: none;
}

.secondary-hero .container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.secondary-hero-content {
	max-width: 760px;
}

.secondary-hero-title {
	margin: 18px 0 18px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: clamp(44px, 6vw, 72px);
	font-weight: 700;
	line-height: 1;

	letter-spacing: -0.045em;
}

.secondary-hero-description {
	max-width: 620px;

	margin: 0;

	color: rgba(255, 255, 255, 0.78);

	font-size: 15px;
	line-height: 1.8;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.secondary-hero-breadcrumb {
	margin-bottom: 5px;
}

.realtorx-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 10px;

	color: rgba(255, 255, 255, 0.65);

	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.realtorx-breadcrumb a {
	color: rgba(255, 255, 255, 0.65);

	text-decoration: none;

	transition: color 0.25s ease;
}

.realtorx-breadcrumb a:hover {
	color: #ffffff;
}

.breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	color: var(--rx-primary);

	font-size: 7px;
}

.breadcrumb-current {
	color: #ffffff;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.secondary-hero-pagination {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-top: 40px;
}

.secondary-hero-pagination-current,
.secondary-hero-pagination-total {
	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.08em;
}

.secondary-hero-pagination-current {
	color: var(--rx-primary);
}

.secondary-hero-pagination-total {
	color: rgba(255, 255, 255, 0.5);
}

.secondary-hero-pagination-line {
	width: 65px;
	height: 1px;

	background: rgba(255, 255, 255, 0.3);
}


/* =========================================================
   YOAST BREADCRUMB SUPPORT
   ========================================================= */

.realtorx-breadcrumb span {
	display: inline-flex;
	align-items: center;
}

.realtorx-breadcrumb span.separator {
	margin: 0 5px;

	color: rgba(255, 255, 255, 0.35);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.secondary-hero {
		min-height: 390px;

		padding: 85px 0;
	}

	.secondary-hero-title {
		font-size: 56px;
	}

	.secondary-hero-description {
		max-width: 570px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.secondary-hero {
		min-height: 350px;

		padding: 75px 0;
	}

	.secondary-hero-overlay {
		background:
			linear-gradient(
				90deg,
				rgba(8, 18, 30, 0.88),
				rgba(8, 18, 30, 0.65)
			);
	}

	.secondary-hero-title {
		margin-top: 15px;

		font-size: 46px;
	}

	.secondary-hero-description {
		font-size: 13px;
		line-height: 1.75;
	}

	.secondary-hero-pagination {
		margin-top: 30px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.secondary-hero {
		min-height: 320px;

		padding: 65px 0;
	}

	.secondary-hero-title {
		font-size: 40px;
	}

	.secondary-hero-description {
		font-size: 12px;
	}

	.secondary-hero-pagination-line {
		width: 45px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.secondary-hero *,
	.secondary-hero::before,
	.secondary-hero::after {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   ABOUT AUTHOR
   ========================================================= */

.about-author-section {
	position: relative;

	padding: 110px 0;

	background: #f8fafc;

	overflow: hidden;
}

.about-author-section::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 45%;
	height: 100%;

	background: #ffffff;
}

.about-author-section .container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   AUTHOR IMAGE
   ========================================================= */

.about-author-image {
	position: relative;

	width: 100%;
	max-width: 500px;

	margin: 0 auto;
}

.about-author-image::after {
	content: "";

	position: absolute;

	right: -18px;
	bottom: -18px;

	width: 70%;
	height: 70%;

	border-right: 1px solid var(--rx-primary);
	border-bottom: 1px solid var(--rx-primary);

	pointer-events: none;
}

.about-author-image img {
	position: relative;
	z-index: 2;

	display: block;

	width: 100%;
	height: 570px;

	object-fit: cover;

	border-radius: 4px;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.about-author-placeholder {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 570px;

	color: var(--rx-muted);

	background: #eef2f5;

	border-radius: 4px;

	font-size: 50px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.about-author-content {
	max-width: 650px;

	padding-left: 35px;
}

.about-author-title {
	margin: 12px 0 8px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: clamp(42px, 5vw, 64px);
	font-weight: 700;
	line-height: 1;

	letter-spacing: -0.045em;
}

.about-author-company {
	margin-bottom: 30px;
}

.about-author-company span {
	color: var(--rx-primary);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.about-author-description {
	max-width: 600px;
}

.about-author-description p {
	margin: 0 0 17px;

	color: var(--rx-text);

	font-size: 14px;
	line-height: 1.85;
}

.about-author-description p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.about-author-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 20px;

	margin-top: 35px;
}


/* =========================================================
   PHONE
   ========================================================= */

.about-author-phone {
	display: inline-flex;
	align-items: center;

	gap: 12px;

	color: var(--rx-heading);

	text-decoration: none;
}

.about-author-phone:hover {
	color: var(--rx-heading);
}

.about-author-phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	color: #ffffff;

	background: var(--rx-primary);

	border-radius: 4px;

	font-size: 12px;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.about-author-phone:hover .about-author-phone-icon {
	transform: translateY(-2px);

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

.about-author-phone-content {
	display: flex;
	flex-direction: column;

	gap: 3px;
}

.about-author-phone-content small {
	color: var(--rx-muted);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.about-author-phone-content strong {
	color: var(--rx-heading);

	font-size: 14px;
	font-weight: 700;
}


/* =========================================================
   BUTTON
   ========================================================= */

.about-author-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 46px;

	padding: 12px 20px;

	color: #ffffff;

	background: var(--rx-heading);

	border: 1px solid var(--rx-heading);
	border-radius: 4px;

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.about-author-button:hover {
	color: #ffffff;

	background: var(--rx-primary);
	border-color: var(--rx-primary);

	transform: translateY(-2px);
}

.about-author-button i {
	font-size: 9px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.about-author-section {
		padding: 85px 0;
	}

	.about-author-section::before {
		width: 50%;
	}

	.about-author-image {
		max-width: 600px;
	}

	.about-author-image img,
	.about-author-placeholder {
		height: 500px;
	}

	.about-author-content {
		padding-left: 0;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.about-author-section {
		padding: 70px 0;
	}

	.about-author-section::before {
		display: none;
	}

	.about-author-image {
		max-width: 100%;
	}

	.about-author-image::after {
		right: -10px;
		bottom: -10px;
	}

	.about-author-image img,
	.about-author-placeholder {
		height: 450px;
	}

	.about-author-title {
		font-size: 46px;
	}

	.about-author-content {
		margin-top: 15px;
	}

	.about-author-description p {
		font-size: 13px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.about-author-section {
		padding: 60px 0;
	}

	.about-author-image img,
	.about-author-placeholder {
		height: 380px;
	}

	.about-author-title {
		font-size: 40px;
	}

	.about-author-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.about-author-button {
		width: 100%;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.about-author-section *,
	.about-author-section::before {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-information-section {
	padding: 110px 0;

	background: #ffffff;
}


/* =========================================================
   MAP
   ========================================================= */

.contact-map {
	position: relative;

	width: 100%;
	height: 100%;

	min-height: 560px;

	background: #eef2f5;

	overflow: hidden;
}

.contact-map iframe {
	display: block;

	width: 100%;
	height: 100%;

	min-height: 560px;

	border: 0;

	filter: grayscale(0.15);
}


/* =========================================================
   CONTACT CONTENT
   ========================================================= */

.contact-information-content {
	display: flex;
	flex-direction: column;

	justify-content: center;

	height: 100%;
	min-height: 560px;

	padding: 60px 55px;

	background: var(--rx-dark);
}

.contact-information-content .section-eyebrow {
	color: var(--rx-primary);
}

.contact-information-title {
	margin: 14px 0 22px;

	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: clamp(40px, 5vw, 58px);
	font-weight: 700;
	line-height: 1;

	letter-spacing: -0.045em;
}

.contact-information-title span {
	display: block;

	color: var(--rx-primary);
}

.contact-information-description {
	max-width: 480px;

	margin: 0;

	color: rgba(255, 255, 255, 0.68);

	font-size: 13px;
	line-height: 1.85;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.contact-information-list {
	display: flex;
	flex-direction: column;

	margin-top: 35px;

	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-information-item {
	display: flex;
	align-items: center;

	gap: 15px;

	padding: 17px 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* =========================================================
   CONTACT ICON
   ========================================================= */

.contact-information-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	color: var(--rx-primary);

	background: rgba(255, 255, 255, 0.06);

	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;

	font-size: 12px;
}


/* =========================================================
   CONTACT ITEM CONTENT
   ========================================================= */

.contact-information-item-content {
	display: flex;
	flex-direction: column;

	gap: 4px;
}

.contact-information-item-content span {
	color: rgba(255, 255, 255, 0.4);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.contact-information-item-content a,
.contact-information-item-content strong {
	color: #ffffff;

	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;

	text-decoration: none;
}

.contact-information-item-content a {
	transition: color 0.25s ease;
}

.contact-information-item-content a:hover {
	color: var(--rx-primary);
}


/* =========================================================
   CTA
   ========================================================= */

.contact-information-cta {
	margin-top: 30px;
}

.contact-information-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 46px;

	padding: 12px 20px;

	color: #ffffff;

	background: var(--rx-primary);
	border: 1px solid var(--rx-primary);
	border-radius: 4px;

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.contact-information-button:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contact-information-button i {
	font-size: 9px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.contact-information-section {
		padding: 85px 0;
	}

	.contact-map,
	.contact-map iframe {
		min-height: 450px;
		height: 450px;
	}

	.contact-information-content {
		min-height: auto;

		padding: 50px 40px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.contact-information-section {
		padding: 70px 0;
	}

	.contact-map,
	.contact-map iframe {
		min-height: 380px;
		height: 380px;
	}

	.contact-information-content {
		padding: 45px 30px;
	}

	.contact-information-title {
		font-size: 43px;
	}

	.contact-information-description {
		font-size: 12px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.contact-information-section {
		padding: 60px 0;
	}

	.contact-map,
	.contact-map iframe {
		min-height: 320px;
		height: 320px;
	}

	.contact-information-content {
		padding: 40px 20px;
	}

	.contact-information-title {
		font-size: 38px;
	}

	.contact-information-item {
		gap: 12px;
	}

	.contact-information-icon {
		flex-basis: 38px;

		width: 38px;
		height: 38px;
	}

	.contact-information-item-content a,
	.contact-information-item-content strong {
		font-size: 12px;
	}

	.contact-information-button {
		width: 100%;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.contact-information-section *,
	.contact-information-section iframe {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   PRIMARY CONTACT FORM
   ========================================================= */

.primary-contact-form-section {
	padding: 110px 0;

	background: #f8fafc;
}

.primary-contact-form-wrapper {
	padding: 55px;

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 6px;

	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.05);
}


/* =========================================================
   FORM HEADER
   ========================================================= */

.primary-contact-form-header {
	max-width: 650px;

	margin: 0 auto 45px;
}

.primary-contact-form-header .section-eyebrow {
	margin-bottom: 15px;
}

.primary-contact-form-title {
	margin: 0 0 15px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: clamp(36px, 5vw, 50px);
	font-weight: 700;
	line-height: 1.05;

	letter-spacing: -0.04em;
}

.primary-contact-form-description {
	margin: 0;

	color: var(--rx-text);

	font-size: 13px;
	line-height: 1.8;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.primary-contact-form .form-group {
	width: 100%;
}

.primary-contact-form .form-label {
	display: block;

	margin-bottom: 9px;

	color: var(--rx-heading);

	font-size: 11px;
	font-weight: 700;

	line-height: 1.4;
}

.primary-contact-form .form-label span {
	color: var(--rx-primary);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.primary-contact-form .form-control,
.primary-contact-form .form-select {
	width: 100%;

	min-height: 52px;

	padding: 13px 15px;

	color: var(--rx-heading);

	background-color: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	font-family: var(--rx-font-body);
	font-size: 13px;

	box-shadow: none;

	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
}

.primary-contact-form textarea.form-control {
	min-height: 150px;

	resize: vertical;
}

.primary-contact-form .form-control::placeholder {
	color: var(--rx-muted);

	opacity: 0.8;
}

.primary-contact-form .form-control:hover,
.primary-contact-form .form-select:hover {
	border-color: #cbd5e1;
}

.primary-contact-form .form-control:focus,
.primary-contact-form .form-select:focus {
	color: var(--rx-heading);

	background-color: #ffffff;

	border-color: var(--rx-primary);

	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);

	outline: none;
}


/* =========================================================
   SELECT
   ========================================================= */

.primary-contact-form .form-select {
	cursor: pointer;
}

.primary-contact-form .form-select:invalid {
	color: var(--rx-muted);
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.primary-contact-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 25px;

	margin-top: 5px;
}


/* =========================================================
   PRIVACY NOTE
   ========================================================= */

.primary-contact-form-note {
	display: flex;
	align-items: flex-start;

	gap: 9px;

	max-width: 400px;

	color: var(--rx-muted);

	font-size: 10px;
	line-height: 1.6;
}

.primary-contact-form-note i {
	flex: 0 0 auto;

	margin-top: 2px;

	color: var(--rx-primary);

	font-size: 10px;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.primary-contact-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 11px;

	flex: 0 0 auto;

	min-height: 50px;

	padding: 13px 25px;

	color: #ffffff;

	background: var(--rx-primary);

	border: 1px solid var(--rx-primary);
	border-radius: 4px;

	font-family: var(--rx-font-body);
	font-size: 11px;
	font-weight: 700;

	line-height: 1;

	cursor: pointer;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.primary-contact-form-submit:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.primary-contact-form-submit:focus {
	color: #ffffff;

	outline: none;

	box-shadow:
		0 0 0 3px rgba(15, 118, 110, 0.15),
		0 8px 20px rgba(15, 23, 42, 0.1);
}

.primary-contact-form-submit i {
	font-size: 9px;
}


/* =========================================================
   VALIDATION
   ========================================================= */

.primary-contact-form .form-control:invalid:not(:placeholder-shown),
.primary-contact-form .form-select:invalid:not(:focus) {
	border-color: #dc3545;
}

.primary-contact-form .form-control:valid:not(:placeholder-shown),
.primary-contact-form .form-select:valid {
	border-color: var(--rx-border);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.primary-contact-form-section {
		padding: 85px 0;
	}

	.primary-contact-form-wrapper {
		padding: 45px;
	}

	.primary-contact-form-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.primary-contact-form-note {
		max-width: 100%;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.primary-contact-form-section {
		padding: 70px 0;
	}

	.primary-contact-form-wrapper {
		padding: 35px 25px;
	}

	.primary-contact-form-header {
		margin-bottom: 35px;
	}

	.primary-contact-form-title {
		font-size: 38px;
	}

	.primary-contact-form-description {
		font-size: 12px;
	}

	.primary-contact-form .form-control,
	.primary-contact-form .form-select {
		min-height: 48px;
	}

	.primary-contact-form-submit {
		width: 100%;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.primary-contact-form-section {
		padding: 60px 0;
	}

	.primary-contact-form-wrapper {
		padding: 30px 18px;
	}

	.primary-contact-form-title {
		font-size: 34px;
	}

	.primary-contact-form-footer {
		gap: 20px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.primary-contact-form-section *,
	.primary-contact-form-section::before,
	.primary-contact-form-section::after {
		transition: none !important;
		animation: none !important;
	}

}


/* =========================================================
   MORTGAGE CALCULATOR
   ========================================================= */

.mortgage-calculator-section {
	padding: 110px 0;

	background: #f8fafc;
}

.mortgage-calculator-content {
	max-width: 500px;
}

.mortgage-calculator-content .section-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
}

.mortgage-calculator-title {
	margin: 0 0 22px;

	color: var(--rx-heading);

	font-family: var(--rx-font-heading);
	font-size: clamp(40px, 5vw, 58px);
	font-weight: 700;
	line-height: 1;

	letter-spacing: -0.045em;
}

.mortgage-calculator-title span {
	display: block;
	color: var(--rx-primary);
}

.mortgage-calculator-description {
	max-width: 450px;

	margin: 0;

	color: var(--rx-text);

	font-size: 13px;
	line-height: 1.85;
}


/* =========================================================
   CALCULATOR POINTS
   ========================================================= */

.mortgage-calculator-points {
	margin-top: 35px;
}

.mortgage-calculator-point {
	display: flex;
	align-items: flex-start;

	gap: 14px;

	margin-bottom: 22px;
}

.mortgage-calculator-point:last-child {
	margin-bottom: 0;
}

.mortgage-calculator-point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 42px;

	width: 42px;
	height: 42px;

	color: var(--rx-primary);

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	font-size: 12px;
}

.mortgage-calculator-point strong {
	display: block;

	margin-bottom: 4px;

	color: var(--rx-heading);

	font-size: 12px;
	font-weight: 700;
}

.mortgage-calculator-point p {
	margin: 0;

	color: var(--rx-muted);

	font-size: 11px;
	line-height: 1.6;
}


/* =========================================================
   CALCULATOR CARD
   ========================================================= */

.mortgage-calculator-card {
	padding: 40px;

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 6px;

	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
}


/* =========================================================
   FORM
   ========================================================= */

.mortgage-form-group .form-label {
	display: block;

	margin-bottom: 9px;

	color: var(--rx-heading);

	font-size: 11px;
	font-weight: 700;
}

.mortgage-input-wrapper {
	position: relative;
}

.mortgage-input-wrapper .form-control,
.mortgage-input-wrapper .form-select {
	min-height: 50px;

	padding: 12px 14px;

	color: var(--rx-heading);

	background: #ffffff;

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	font-size: 13px;

	box-shadow: none;
}

.mortgage-input-wrapper .form-control:focus,
.mortgage-form-group .form-select:focus {
	border-color: var(--rx-primary);

	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.mortgage-input-prefix,
.mortgage-input-suffix {
	position: absolute;
	top: 50%;

	z-index: 2;

	color: var(--rx-muted);

	font-size: 13px;

	transform: translateY(-50%);

	pointer-events: none;
}

.mortgage-input-prefix {
	left: 14px;
}

.mortgage-input-suffix {
	right: 14px;
}

.mortgage-input-wrapper .mortgage-input-prefix + .form-control {
	padding-left: 28px;
}

.mortgage-input-percentage {
	padding-right: 35px !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.mortgage-calculator-divider {
	height: 1px;

	background: var(--rx-border);
}


/* =========================================================
   RESULT
   ========================================================= */

.mortgage-calculator-result {
	padding: 25px;

	text-align: center;

	background: var(--rx-heading);

	border-radius: 5px;
}

.mortgage-result-label {
	margin-bottom: 8px;

	color: rgba(255, 255, 255, 0.6);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mortgage-result-value {
	color: #ffffff;

	font-family: var(--rx-font-heading);
	font-size: clamp(35px, 5vw, 48px);
	font-weight: 700;
	line-height: 1;
}

.mortgage-result-note {
	margin-top: 8px;

	color: rgba(255, 255, 255, 0.45);

	font-size: 9px;
}


/* =========================================================
   BREAKDOWN
   ========================================================= */

.mortgage-calculator-breakdown {
	display: grid;

	grid-template-columns: repeat(2, 1fr);

	border: 1px solid var(--rx-border);
	border-radius: 4px;

	overflow: hidden;
}

.mortgage-breakdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 15px;

	padding: 13px 15px;

	border-right: 1px solid var(--rx-border);
	border-bottom: 1px solid var(--rx-border);
}

.mortgage-breakdown-item:nth-child(2n) {
	border-right: 0;
}

.mortgage-breakdown-item:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.mortgage-breakdown-item span {
	color: var(--rx-muted);

	font-size: 9px;
}

.mortgage-breakdown-item strong {
	color: var(--rx-heading);

	font-size: 10px;
	font-weight: 700;
}


/* =========================================================
   BUTTON
   ========================================================= */

.mortgage-calculator-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;
	min-height: 50px;

	padding: 13px 20px;

	color: #ffffff;

	background: var(--rx-primary);

	border: 1px solid var(--rx-primary);
	border-radius: 4px;

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.mortgage-calculator-button:hover {
	color: #ffffff;

	background: var(--rx-primary-dark);
	border-color: var(--rx-primary-dark);

	transform: translateY(-2px);

	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.mortgage-calculator-button i {
	font-size: 9px;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.mortgage-calculator-disclaimer {
	margin: 20px 0 0;

	color: var(--rx-muted);

	font-size: 9px;
	line-height: 1.7;
	text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

	.mortgage-calculator-section {
		padding: 85px 0;
	}

	.mortgage-calculator-content {
		max-width: 650px;
	}

	.mortgage-calculator-card {
		padding: 35px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

	.mortgage-calculator-section {
		padding: 70px 0;
	}

	.mortgage-calculator-title {
		font-size: 42px;
	}

	.mortgage-calculator-card {
		padding: 25px 20px;
	}

	.mortgage-calculator-breakdown {
		grid-template-columns: 1fr;
	}

	.mortgage-breakdown-item,
	.mortgage-breakdown-item:nth-child(2n) {
		border-right: 0;
		border-bottom: 1px solid var(--rx-border);
	}

	.mortgage-breakdown-item:last-child {
		border-bottom: 0;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

	.mortgage-calculator-section {
		padding: 60px 0;
	}

	.mortgage-calculator-title {
		font-size: 38px;
	}

	.mortgage-calculator-card {
		padding: 22px 16px;
	}

	.mortgage-calculator-result {
		padding: 22px 15px;
	}

}