/* START LISTING INFORMATION */
.listingInformationContainer {
	margin-top: 						40px;
	margin-bottom: 						170px;
}

.listingInformationContainer .informationGrid {
	display: 							grid;
	column-gap: 						25px;
	grid-template-areas: 				"A A A A A A"
										"G G G G G G"
										"B C C C D D"
										"B C C C D D"
										"B C C C D D"
										"E E E E F F";
	grid-template-columns: 				repeat(4, 1fr) minmax(150px, 150px) minmax(150px, 150px);
}

.listingInformationContainer .titleAndPrice {
	position:							relative;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content: 					space-between;
	grid-area: 							A;
}

.listingInformationContainer .titleAndPrice .title {
	font-weight: 						400;
}

.listingInformationContainer .titleAndPrice .price {
	font-weight: 						400;
	font-family: 						"DM Sans";
	margin-right: 						30px;
}

.listingInformationContainer .titleAndPrice .favoriteContainer {
	width: 								20px;
	height: 							25px;
	background-image: 					url("../images/unfavorite.svg");
	background-position: 				center center;
	background-repeat: 					no-repeat;
	background-size: 					20px 25px;
	position: 							absolute;
	top: 								15px;
	right: 								0;
	cursor: 							pointer;
	transition: 						all 0.3s ease-in-out;
}

.listingInformationContainer .titleAndPrice .favoriteContainer.added {
	background-image: 					url("../images/favorite.svg");
}

.listingInformationContainer .location {
	display: 							flex;
	align-items: 						center;
	color: 								var(--brown);
	margin-bottom: 						40px;
	grid-area: 							G;
}

.listingInformationContainer .location::before {
	content: 							"";
	width: 								20px;
	height: 							20px;
	mask: 								url("../images/location.svg") center center no-repeat;
	mask-size: 							initial;
	background-color: 					var(--black);
}

.listingInformationContainer .galleryContainer {
	height: 							550px;
	overflow: 							auto;
	margin-bottom: 						40px;
	padding-right: 						5px;
	grid-area: 							B;
}

.listingInformationContainer .galleryContainer .listImage {
	width: 								100%;
	height: 							170px;
	object-fit: 						cover;
	object-position: 					center center;
	border-radius: 						30px;
	margin-bottom: 						25px;
	cursor: 							pointer;

	&:last-of-type {
		margin-bottom: 					0;
	}
}

.listingInformationContainer .mainImage {
	height: 							550px;
	grid-area: 							C;
	margin-bottom: 						40px;
}

.listingInformationContainer .mainImage .image {
	width: 								100%;
	height: 							100%;
	object-fit: 						cover;
	object-position: 					center center;
	border-radius: 						30px;
	cursor: 							pointer;
}

.listingInformationContainer .mapContainer {
	display: 							flex;
	align-items: 						center;
	height: 							550px;
	border-radius: 						30px;
	overflow: 							hidden;
	grid-area: 							D;
	margin-bottom: 						40px;
}

.listingInformationContainer .mapContainer > iframe {
	width: 								100%;
	height: 							145%;
}

.listingInformationContainer .information {
	padding-right: 						75px;
	grid-area: 							E;
}

.listingInformationContainer .information .title {
	font-weight: 						700;
	margin-bottom: 						20px;
}

.listingInformationContainer .information > p {
	font-weight: 						300;
	color: 								var(--brown);
	margin-bottom: 						20px;
}

.listingInformationContainer .information .amenities {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								10px;
}

.listingInformationContainer .information .amenities .amenity {
	flex: 								1 0 0;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content: 					center;
	gap: 								15px;
	background-color: 					#FFFFFF;
	border-radius: 						15px;
	padding: 							15px 0;
}

.listingInformationContainer .information .amenities .amenity > img {
	width: 								initial;
	height: 							initial;
	object-fit: 						contain;
	object-position: 					center center;
}

.listingInformationContainer .information .amenities .downloadBrochure {
	display: 							flex;
	align-items: 						center;
	gap: 								10px;
	text-wrap: 							nowrap;
}

.listingInformationContainer .information .amenities .downloadBrochure::after {
	content: 							"";
	width: 								25px;
	height: 							25px;
	mask: 								url("../images/downloadBrochure.svg") center center no-repeat;
	mask-size:		 					25px 25px;
	background-color: 					var(--brown);
	transition: 						all 0.3s ease-in-out;
}

.listingInformationContainer .information .amenities .downloadBrochure:hover::after {
	background-color: 					var(--black);
}

.listingInformationContainer .schedule {
	position: 							relative;
	padding: 							10px;
	background-color: 					var(--brown);
	border-radius: 						30px;
	grid-area: 							F;
}

.listingInformationContainer .schedule .title {
	font-weight: 						700;
	color: 								var(--beige);
	padding: 							45px 150px 45px 20px;
}

.listingInformationContainer .schedule .image {
	object-fit: 						contain;
	object-position: 					center center;
	position: 							absolute;
	top: 								10px;
	right: 								10px;
}
/* END LISTING INFORMATION */

/* START MORTGAGE CALCULATOR */
.calculator {
	margin-bottom: 						130px;
}

.calculator .title {
	font-weight: 						700;
	text-align: 						center;
	color: 								var(--beige);
	letter-spacing: 					3px;
	margin-bottom: 						20px;
	text-transform: 					uppercase;
}

.calculator .informationValues {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								15px;
	border-radius: 						30px;
	padding: 							15px;
	background-color: 					#FFFFFF;
}

.calculator .informationValues .data {
	flex: 								0 0 calc(100% / 5 - (15px * 4 / 5));
	border-radius: 						20px;
	background-color: 					#FFFFFF;
	position: 							relative;
}

.calculator .informationValues .data .dataTitle {
	font-weight: 						300;
	margin-bottom: 						5px;
}

.calculator .informationValues .data > input {
	color: 								var(--brown);
	padding-block: 						10px;
	padding-inline: 					20px;
}

.calculator .informationValues .data > input:disabled {
	opacity: 							0.5;
	cursor: 							not-allowed;
}

.calculator .informationValues .data:nth-of-type(1) > input,
.calculator .informationValues .data:nth-of-type(3) > input,
.calculator .informationValues .data:nth-of-type(4) > input {
	padding-inline: 					10px 50px;
}

.calculator .informationValues .data .currency,
.calculator .informationValues .data .years,
.calculator .informationValues .data .percent {
	font-size: 							14px;
	font-weight: 						700;
	color: 								var(--beige);
	position: 							absolute;
	right: 								10px;
	bottom: 							12px;
}

.calculator .informationValues .data .money {
	font-size: 							14px;
	font-weight: 						700;
	color: 								var(--beige);
	position: 							absolute;
	left: 								10px;
	bottom: 							12px;
}
/* END MORTGAGE CALCULATOR */

/* START ENJOY */
.enjoy {
	margin-bottom: 						130px;
}

.enjoy .title {
	font-weight: 						700;
	text-align: 						center;
	color: 								var(--beige);
	letter-spacing: 					3px;
	margin-bottom: 						20px;
	text-transform: 					uppercase;
}

.enjoy .description {
	font-weight: 						250;
	text-align: 						center;
	color: 								var(--brown);
	margin-bottom: 						35px;
}

.enjoy .btnContainer {
	display: 							flex;
	flex-flow: 							row wrap;
	gap: 								10px;
	margin-bottom: 						60px;
}

.enjoy .btnContainer .btnEnjoy {
	flex:  								1 0 auto;
	padding: 							20px 10px;
	display: 							flex;
	align-items: 						center;
	justify-content: 					center;
	gap: 								20px;
	background-color: 					#FFFFFF;
	border-radius: 						15px;
}

.enjoy .btnContainer .btnEnjoy .icon {
	width: 								25px;
	height: 							25px;
	object-fit: 						contain;
	object-position: 					center center;
}

.enjoy .videoContainer {
	width: 								100%;
	aspect-ratio: 						16/9;
	margin-bottom: 						60px;
}

.enjoy .gallery {
	display: 							flex;
	flex-flow: 							row wrap;
	gap: 								25px;
}

.enjoy .gallery .imageContainer {
	flex: 								0 0 calc(100% / 3 - (25px * 2 / 3));
	height: 							550px;
	border-radius: 						30px;
	overflow: 							hidden;
}

.enjoy .gallery .imageContainer .image {
	width: 								100%;
	height: 							100%;
	object-fit: 						cover;
	object-position: 					center center;
	cursor: 							pointer;
}
/* END ENJOY */

/* START MODAL */
.modal-dialog {
	max-width: 							95svw;
}

.modal-content {
	height: 							90svh;
	border-radius: 						30px;
	padding: 							20px;
}

.modal-body {
	display: 							flex;
	flex-flow: 							column nowrap;
	padding: 							0;
}

.modal-body > #vizualizerImagePresentation {
	flex: 								1 0 0;
	width: 								100%;
	height: 							0;
	object-fit: 						contain;
	object-position:  					center center;
	margin-bottom: 						20px;
	border-radius: 						30px;
}

.modal-body > .vizualizerGalleryContainer {
	flex: 								0 0 auto;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	overflow: 							auto;
	padding-bottom: 					5px;
	margin-top: 						auto;
}

.modal-body > .vizualizerGalleryContainer .vizualizerListImage {
	width: 								150px;
	aspect-ratio: 						1;
	object-fit: 						cover;
	object-position:  					center center;
	border-radius: 						30px;
	cursor: 							pointer;
}
/* END MODAL */

@media (max-width: 991px) {
	/* START LISTING INFORMATION */
	.listingInformationContainer {
		margin-bottom: 						50px;
	}

	.listingInformationContainer .container {
		padding: 							0;
	}

	.listingInformationContainer .informationGrid {
		row-gap: 							10px;
		column-gap: 						10px;
		grid-template-areas: 				"A A A A"
											"B B B B"
											"C C C C"
											"D D D D"
											"E E E E"
											"F F F F";
		grid-template-columns: 				repeat(4, 1fr);
	}

	.listingInformationContainer .titleAndPrice {
		padding-inline: 					calc(0.5 * 1.5rem);
		grid-area: 							C;
	}

	.listingInformationContainer .titleAndPrice .title {
		font-size: 							25px;
	}

	.listingInformationContainer .titleAndPrice .price {
		display: 							none;
	}

	.listingInformationContainer .titleAndPrice .favoriteContainer {
		top: 								0;
		right: 								15px;
	}

	.listingInformationContainer .location {
		margin-top: 						-10px;
		padding-inline: 					calc(0.5 * 1rem);
		font-size: 							12px;
		margin-bottom: 						0;
		grid-area: 							D;
	}

	.listingInformationContainer .galleryContainer {
		display: 							flex;
		flex-flow: 							row nowrap;
		align-items: 						center;
		gap: 								10px;
		height: 							100px;
		overflow: 							auto;
		margin-bottom: 						10px;
		padding-right: 						0;
		padding-bottom: 					5px;
		grid-area: 							B;
	}

	.listingInformationContainer .galleryContainer .listImage {
		width: 								95px;
		flex-shrink: 						0;
		height: 							100%;
		border-radius: 						20px;
		margin-bottom: 						0;
	}

	.listingInformationContainer .mainImage {
		height: 							350px;
		grid-area: 							A;
		margin-bottom: 						0;
	}

	.listingInformationContainer .mapContainer {
		height: 							350px;
		grid-area: 							F;
		margin-bottom: 						0;
		padding-bottom: 					5px;
		border-radius: 						20px;
	}

	.listingInformationContainer .mapContainer > iframe {
		width: 								100%;
		height: 							265%;
	}

	.listingInformationContainer .information {
		padding-inline: 					calc(0.5 * 1.5rem);
		grid-area: 							E;
	}

	.listingInformationContainer .information .title {
		display: 							none;
	}

	.listingInformationContainer .information > p {
		margin-bottom: 						10px;
	}

	.listingInformationContainer .information .amenities {
		overflow-x: 						auto;
		padding-bottom: 					5px;
	}

	.listingInformationContainer .information .amenities .amenity {
		flex: 								1 0 auto;
		padding: 							15px 10px;
	}

	.listingInformationContainer .schedule {
		display: 							none;
	}	

	.listingInformationContainer .mobileBottomBar {
		display: 							flex;
		flex-flow: 							row nowrap;
		align-items: 						center;
		justify-content: 					space-between;
		padding: 							20px;
		background-color: 					#FFFFFF;
		box-shadow: 						0px -20px 50px 0px #00000033;
		position: 							fixed;
		left: 								0;
		right: 								0;
		bottom: 							0;
		z-index: 							999;

	}

	.listingInformationContainer .mobileBottomBar > h4 {
		font-size: 							20px;
		font-weight: 						400;
	}

	.listingInformationContainer .mobileBottomBar > a {
		gap: 								15px;
	}
	/* END LISTING INFORMATION */

	/* START MORTGAGE CALCULATOR */
	.calculator {
		margin-bottom: 						50px;
	}

	.calculator .title {
		margin-bottom: 						10px;
	}

	.calculator .informationValues {
		display: 							flex;
		flex-flow: 							row wrap;
		gap: 								10px;
	}

	.calculator .informationValues .data {
		flex: 								0 0 calc(100% / 2 - (10px * 1 / 2));
	}

	.calculator .informationValues .data .dataTitle {
		text-align: 						center;
	}
	/* END MORTGAGE CALCULATOR */

	/* START ENJOY */
	.enjoy {
		margin-bottom: 						50px;
	}

	.enjoy .title {
		padding-inline: 					30px;
		margin-bottom: 						10px;
	}

	.enjoy .description {
		font-size: 							25px;
		margin-bottom: 						20px;
	}

	.enjoy .btnContainer {
		flex-flow: 							row wrap;
		margin-bottom: 						20px;
	}

	.enjoy .gallery {
		gap: 								10px;
	}

	.enjoy .gallery .imageContainer {
		flex: 								0 0 calc(100% / 2 - (10px * 1 / 2));
		height: 							300px;
		border-radius: 						20px;
	}
	/* END ENJOY */

	/* START MODAL */
	.modal-dialog {
		max-width: 							100svw;
	}

	.modal-content {
		height: 							50svh;
	}

	.modal-body > .vizualizerGalleryContainer .vizualizerListImage {
		width: 								80px;
		border-radius: 						20px;
	}
	/* END MODAL */

	/* JUST IN THIS PAGE TO NOT HIDE THE WHATS APP BUTTON */
	.floatWA {
        bottom: 95px;
    }
}