/* ----------------------------------------------------------------

	Canvas: Real Estate

-----------------------------------------------------------------*/



:root {

	--cnvs-themecolor: #2C3E50;

	--cnvs-themecolor-rgb: 44, 62, 80;

	--cnvs-secondary-color: #F0AD4E;

	--cnvs-body-font: 'Roboto', sans-serif;

	--cnvs-primary-font: 'Rubik', sans-serif;

	--cnvs-secondary-font: 'Lora', serif;

}



#header {

	--cnvs-primary-menu-font-weight: 500;

	--cnvs-primary-menu-font-size:	1rem;

	--cnvs-primary-menu-submenu-font-weight:	400;

	--cnvs-primary-menu-submenu-hover-font-weight: 500;

}



@media (min-width: 992px) {



	#header {

		--cnvs-primary-menu-tt: uppercase;

		--cnvs-primary-menu-ls: 1px;

		--cnvs-primary-menu-submenu-tt: uppercase;

		--cnvs-primary-menu-color: var(--cnvs-contrast-800);

		--cnvs-primary-menu-hover-color: var(--cnvs-contrast-900);

	}



	#header.header-size-md + .include-header.include-topbar {

		margin-top: calc( -80px - 2px - 46px );

	}



	#top-bar.transparent-topbar {

		background: transparent;

		z-index: 399;

	}



	.top-links-container > .top-links-item { border: 0; }



	.top-links-container > .top-links-item > a {

		padding-left: 17px;

		padding-right: 17px;

		color: #EEE;

		font-weight: normal;

		text-transform: capitalize;

		font-size: 0.875rem;

	}



	.top-links-container > .top-links-item:hover { background-color: transparent; }



	.top-links-container > .top-links-item.top-bar-highlight > a {

		margin-top: 7px;

		margin-bottom: 7px;

		padding-top: 5px;

		padding-bottom: 5px;

		border: 1px solid #EEE;

		border-radius: 16px;

		-webkit-transition: all .3s ease;

		-o-transition: all .3s ease;

		transition: all .3s ease;

	}



	.top-links-container > .top-links-item.top-bar-highlight:hover > a {

		background-color: #FFF;

		color: #222;

	}



	.top-links-item a { font-family: var(--cnvs-primary-font); }



	.sub-menu-container:not(.mega-menu-column) {

		width: 210px;

		padding: 0 !important;

		border-radius: 3px;

		border: 0;

		background-color: var(--cnvs-themecolor);

	}



	.sub-menu-container .menu-item:not(:first-child) { border-top: 1px dotted rgba(255,255,255,0.1) !important; }



	.sub-menu-container .menu-item > .menu-link {

		font-size: 12px;

		letter-spacing: 1px;

		font-weight: 400;

		padding: 12px 17px;

		color: #FFF;

		font-family: var(--cnvs-primary-font) !important;

	}



	.sub-menu-container .menu-item:hover > .menu-link { padding-left: 20px; }



	.dark .primary-menu:not(.not-dark) .sub-menu-container,

	.dark .primary-menu:not(.not-dark) .mega-menu-content,

	.primary-menu.dark .sub-menu-container,

	.primary-menu.dark .mega-menu-content { background-color: var(--cnvs-themecolor); }



	.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item > .menu-link,

	.primary-menu.dark .sub-menu-container .menu-item > .menu-link { color: #CCC !important; }



	.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item:hover > .menu-link,

	.primary-menu.dark .sub-menu-container .menu-item:hover > .menu-link {

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

		color: var(--cnvs-secondary-color) !important;

		border-radius: 3px;

	}



}





.dark #header:not(.transparent-header),

#header.dark:not(.transparent-header),

#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark),

#footer.dark { background-color: var(--cnvs-themecolor); }



.dark #header:not(.transparent-header),

#header.dark:not(.transparent-header) { border-bottom: 1px solid rgba(255,255,255,0.1); }







.menu-link {

	padding-left: 17px;

	padding-right: 17px;

	font-weight: 400;

	font-size: 13px;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}





/* ----------------------------------------------------------------

	Advanced Property Search

-----------------------------------------------------------------*/





.advanced-real-estate-tabs.tabs,

.advanced-real-estate-tabs .canvas-tabs {

	--bs-nav-tabs-border-width: 0;

	--bs-nav-link-padding-x: 20px;

	--cnvs-tabs-bg-color: var(--cnvs-themecolor);

	--bs-nav-link-color: #FFF;

	--bs-nav-link-font-size : 15px;

	--bs-nav-link-font-weight: 600;

	--cnvs-tabs-active-bg-color: var(--cnvs-secondary-color);

	--cnvs-tabs-active-color: #FFF;

}



.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link {

	padding: 0 20px;

	height: 42px;

	line-height: 42px;

	font-family: var(--cnvs-primary-font);

	letter-spacing: 1px;

	text-transform: uppercase;

}



.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link:hover,

.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link:focus {

	color: #FFF;

}



.advanced-real-estate-tabs .nav-tabs .nav-item.ui-tabs-active .nav-link {

	top: 0;

	background-color: var(--bs-nav-pills-link-active-bg);

}



.advanced-real-estate-tabs .nav-tabs .nav-item.ui-tabs-active .nav-link .badge.bg-warning {

	background-color: var(--cnvs-themecolor);

}



.advanced-real-estate-tabs .nav-tabs .nav-item .badge { margin-left: 5px; }



.advanced-real-estate-tabs .tab-content {

	padding: 30px;

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

	border-top: 3px solid var(--cnvs-secondary-color);

}



.advanced-real-estate-tabs.tabs label {

	font-weight: 600;

	text-transform: uppercase;

	font-size: .875rem;

	letter-spacing: 1px;

}



#slider + .advanced-real-estate-tabs {

	top: -42px;

	margin-bottom: -42px;

	z-index: 3;

}



#slider + .advanced-real-estate-tabs .tab-content {

	background-color: var(--cnvs-contrast-200);

	padding: 50px;

}



.promo.bg-color .button:not(:hover) {

	color: #FFF;

	background-color: var(--cnvs-secondary-color);

	border-color: var(--cnvs-secondary-color);

}



.promo.bg-color .button:hover {

	background-color: #FFF;

	color: var(--cnvs-themecolor);

	text-shadow: none;

}





/* ----------------------------------------------------------------

	Real Estate Items

-----------------------------------------------------------------*/



.owl-carousel .owl-nav [class*=owl-] {

	border-color: transparent;

	color: #FFF;

	background-color: var(--cnvs-themecolor);

}



.owl-carousel.real-estate .owl-nav [class*=owl-]:hover { background-color: var(--cnvs-secondary-color) !important; }





.real-estate-item { position: relative; }



.real-estate-item-image {

	position: relative;

	width: 100%;

}



.real-estate-item-image::before {

	position: absolute;

	content: '';

	pointer-events: none;

	z-index: 1;

	opacity: 0.90;

	top: auto;

	bottom: 0;

	width: 100%;

	height: 50%;

	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.85))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* IE10+ */

	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}



.real-estate-item-image > a,

.real-estate-item-image > img {

	display: block;

	width: 100%;

	height: auto;

}





.real-estate-item-image .badge {

	display: block;

	position: absolute;

	top: 20px;

	left: 20px;

	z-index: 1;

	font-size: 11px;

	padding: 5px 8px;

	text-transform: uppercase;

	font-weight: 400;

	letter-spacing: 1px;

}





.real-estate-item-price {

	position: absolute;

	right: 20px;

	bottom: 20px;

	z-index: 1;

	font-size: 26px;

	font-weight: 400;

	letter-spacing: 1px;

	line-height: 1;

	color: #FFF;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

}



.real-estate-item-price span {

	display: block;

	margin-top: 3px;

	font-weight: 300;

	font-size: 12px;

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

	text-align: right;

}



.real-estate-item-info {

	position: absolute;

	left: 20px;

	bottom: 20px;

	z-index: 1;

}



.real-estate-item-info a {

	display: block;

	float: left;

	color: #FFF;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

	font-size: 12px;

	line-height: 1;

	text-align: center;

	padding: 8px;

	background-color: rgba(0,0,0,0.25);

	border-radius: 4px;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}



.real-estate-item-info a:hover { background-color: rgba(0,0,0,0.75); }



.real-estate-item-info a i {

	width: 12px;

	height: 12px;

}



.real-estate-item-info a:not(:first-child) { margin-left: 5px; }





.real-estate-item-desc {

	position: relative;

	margin-top: 20px;

	padding: 0 20px;

}





.real-estate-item-desc h3 { font-size: 21px; }



.real-estate-item-desc h3 + span {

	display: block;

	margin-top: -27px;

	color: #999;

}



.real-estate-item-desc h3 a { color: #333; }



.real-estate-item-desc h3 a:hover { color: #555; }





.real-estate-item-features { margin-top: 15px; }



.real-estate-item-features [class^=col-] { margin-top: 5px; }



.real-estate-item-features i {

	position: relative;

	top: 1px;

	margin-left: 3px;

}





.real-estate-item-link {

	position: absolute;

	top: 2px;

	right: 20px;

	width: 32px;

	height: 32px;

	line-height: 30px;

	text-align: center;

	font-size: 16px;

	color: #555;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

	border: 1px solid #555;

	border-radius: 50%;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}



.real-estate-item-link:hover {

	border-color: transparent;

	background-color: var(--cnvs-themecolor);

	color: #FFF;

}







/* ----------------------------------------------------------------

	Real Estate City Properties

-----------------------------------------------------------------*/



.real-estate-properties [class^=col-] {

	position: relative;

	margin-bottom: 30px;

}



.real-estate-properties [class^=col-] > a {

	display: block;

	position: relative;

	height: 250px;

	background-color: #EEE;

}



.real-estate-properties [class^=col-] img { display: block; }



.real-estate-properties [class^=col-] > a::before {

	content: '';

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background-color: rgba(0,0,0,0.4);

	opacity: 0.4;

	-webkit-transition: opacity .3s ease;

	-o-transition: opacity .3s ease;

	transition: opacity .3s ease;

}



.real-estate-properties [class^=col-] > a:hover::before { opacity: 1; }





/* ----------------------------------------------------------------

	Real Estate Popular Links

-----------------------------------------------------------------*/



.widget_real_estate_popular { margin-left: 0; }



.widget_real_estate_popular li::before {

	opacity: 0.5;

}





#side-panel { background-color: #FFF; }



body.side-panel-open #side-panel {

	-webkit-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	-moz-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

}



@media (min-width: 992px) {



	#side-panel {

		right: -400px;

		width: 400px;

	}



	#side-panel .side-panel-wrap { width: 430px; }



	#side-panel .widget { width: 320px; }



	body.side-push-panel.side-panel-open.stretched #wrapper,

	body.side-push-panel.side-panel-open.stretched #header.sticky-header .container { right: 400px; }



	body.side-push-panel.side-panel-open.stretched .slider-inner { left: -400px; }



}





/* ----------------------------------------------------------------

	Real Estate Hero Slider Overlay

-----------------------------------------------------------------*/



.real-estate-video-overlay {

	background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */

	background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}





#gotoTop {

	background-color: var(--cnvs-themecolor);

	border-radius: 50%;

}



#gotoTop:hover { background-color: var(--cnvs-secondary-color) !important; }





.color-2 { color: var(--cnvs-secondary-color) !important; }

.bg-color2 { background-color: var(--cnvs-secondary-color) !important; }


/* ----------------------------------------------------------------

	Mobile Menu Improvements

-----------------------------------------------------------------*/

/* Verberg desktop menu elementen op mobiel en tablet */
@media (max-width: 991.98px) {

	/* Verberg alle desktop menu elementen */
	#top-menu-right,
	#top-menu-left {
		display: none !important;
	}

	/* Solide navbar achtergrond op mobiel en tablet - altijd zichtbaar */
	#header {
		background-color: var(--color-primary-500) !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#header-wrap {
		background-color: var(--color-primary-500) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Zorg ervoor dat transparante header ook solide wordt */
	#header.transparent-header {
		background-color: var(--color-primary-500) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#header.transparent-header #header-wrap {
		background-color: var(--color-primary-500) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Ook bij sticky header */
	#header.sticky-header #header-wrap {
		background-color: var(--color-primary-500) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Overschrijf alle mogelijke fade/transition effecten */
	#header,
	#header-wrap,
	#header.transparent-header,
	#header.transparent-header #header-wrap,
	#header.sticky-header #header-wrap {
		transition: none !important;
		animation: none !important;
	}
}

/* Verbeterde hamburger menu styling voor mobiel en tablet */
@media (max-width: 991.98px) {

	/* Hamburger menu trigger styling */
	.primary-menu-trigger {
		padding: 0.5rem;
		border-radius: 6px;
		transition: all 0.3s ease;
	}

	.primary-menu-trigger:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	/* Verbeterde hamburger icon styling */
	.cnvs-hamburger {
		--cnvs-hamburger-size: 1.5rem;
		--cnvs-hamburger-width: 3px;
		position: relative;
		z-index: 1000;
	}

	.cnvs-hamburger .cnvs-hamburger-inner,
	.cnvs-hamburger .cnvs-hamburger-inner::before,
	.cnvs-hamburger .cnvs-hamburger-inner::after {
		background-color: #fff;
		border-radius: 2px;
		transition: all 0.3s ease;
	}

	/* Actieve staat van hamburger (X vorm) */
	.primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner {
		background-color: transparent;
	}

	.primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner::before {
		transform: rotate(45deg) translate(0, 0);
		background-color: #fff;
	}

	.primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner::after {
		transform: rotate(-45deg) translate(0, 0);
		background-color: #fff;
	}

	/* Nieuw mobiel menu styling - volledig onder navbar */
	.mobile-menu-overlay .menu-container {
		background-color: var(--color-primary-600);
		border-radius: 0 0 8px 8px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		margin: 0;
		padding: 1rem 0;
		max-height: 80vh;
		overflow-y: auto;
		border: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1000;
	}

	/* Mobile menu list styling */
	.mobile-menu-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Menu items styling */
	.mobile-menu-list .menu-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.mobile-menu-list .menu-item:last-child {
		border-bottom: none;
	}

	.mobile-menu-list .menu-link {
		padding: 1rem 1.5rem;
		color: #fff;
		font-weight: 500;
		font-size: 1rem;
		text-decoration: none;
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
	}

	.mobile-menu-list .menu-link:hover {
		background-color: rgba(255, 255, 255, 0.1);
		color: var(--cnvs-secondary-color);
		transform: translateX(5px);
	}

	/* Sub menu styling */
	.mobile-menu-list .sub-menu-container {
		background-color: var(--color-primary-700);
		margin: 0;
		padding: 0;
		border: none;
		display: none;
	}

	.mobile-menu-list .sub-menu-container .menu-link {
		padding: 0.75rem 2.5rem;
		font-size: 0.9rem;
		color: rgba(255, 255, 255, 0.9);
	}

	.mobile-menu-list .sub-menu-container .menu-link:hover {
		background-color: rgba(255, 255, 255, 0.1);
		color: #fff;
		transform: translateX(3px);
	}

	/* Submenu toggle styling */
	.mobile-menu-list .has-submenu > .menu-link {
		cursor: pointer;
	}

	.mobile-menu-list .has-submenu.active .sub-menu-container {
		display: block;
		animation: slideDown 0.3s ease-out;
	}

	.mobile-menu-list .has-submenu.active > .menu-link .bi-chevron-down {
		transform: rotate(180deg);
	}

	/* Menu divider */
	.menu-divider {
		height: 1px;
		background-color: rgba(255, 255, 255, 0.2);
		margin: 0.5rem 1.5rem;
	}

	/* Mobile search container */
	.mobile-search-container {
		padding: 1rem 1.5rem;
	}

	.mobile-search-container .form-control {
		background-color: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: #fff;
	}

	.mobile-search-container .form-control::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}

	.mobile-search-container .btn-outline-light {
		border-color: rgba(255, 255, 255, 0.3);
		color: #fff;
	}

	.mobile-search-container .btn-outline-light:hover {
		background-color: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.5);
	}

	/* Mobile language switcher */
	.mobile-language-switcher {
		padding: 1rem 1.5rem;
	}

	.mobile-language-switcher .btn {
		border-color: rgba(255, 255, 255, 0.3);
		color: #fff;
	}

	.mobile-language-switcher .btn:hover {
		background-color: rgba(255, 255, 255, 0.1);
		border-color: rgba(255, 255, 255, 0.5);
	}

	/* Animatie voor menu opening */
	.mobile-menu-overlay .menu-container.d-block {
		animation: slideDown 0.3s ease-out;
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Overlay effect wanneer menu open is */
	body.primary-menu-open::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 298;
		opacity: 0;
		animation: fadeIn 0.3s ease-out forwards;
	}

	@keyframes fadeIn {
		to {
			opacity: 1;
		}
	}

	/* Zorg ervoor dat het menu boven de overlay staat */
	.mobile-menu-overlay {
		position: relative;
		z-index: 999;
	}
}

/* Tablet specifieke styling (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {

	/* Grotere hamburger voor tablet */
	.cnvs-hamburger {
		--cnvs-hamburger-size: 1.75rem;
	}

	/* Menu container volledige breedte voor tablet */
	.mobile-menu-overlay .menu-container {
		width: 100%;
		left: 0;
		right: 0;
		margin: 0;
		border-radius: 0 0 8px 8px;
	}

	/* Grotere menu items voor tablet */
	.mobile-menu-list .menu-link {
		padding: 1.25rem 2rem;
		font-size: 1.1rem;
	}

	.mobile-menu-list .sub-menu-container .menu-link {
		padding: 1rem 2.5rem;
		font-size: 1rem;
	}
}

/* Extra kleine schermen (mobiel portrait) */
@media (max-width: 575.98px) {

	/* Kleinere hamburger voor zeer kleine schermen */
	.cnvs-hamburger {
		--cnvs-hamburger-size: 1.25rem;
	}

	/* Menu container volledige breedte */
	.mobile-menu-overlay .menu-container {
		width: 100%;
		left: 0;
		right: 0;
		margin: 0;
		max-height: 60vh;
		border-radius: 0 0 8px 8px;
	}

	/* Compactere menu items */
	.mobile-menu-list .menu-link {
		padding: 0.875rem 1rem;
		font-size: 0.95rem;
	}

	.mobile-menu-list .sub-menu-container .menu-link {
		padding: 0.625rem 1.5rem;
		font-size: 0.875rem;
	}
}