/* virtual staging */

.floorplans {
	box-shadow: rgb(17 15 15 / 42%) 0px 2px 6px;
    background: white;
	position: relative;

	#floorplans__logo{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(/common/images/pages/floorplans/header.jpg) center center no-repeat;
		background-size: cover;
		height: calc( 100vh );
		position: relative;
		overflow: hidden;

		.floorplans__logo {
			display: flex;
			flex-direction: column;
			gap: 16px;
			align-items: start;

			@media (max-width:767px){
				gap: 24px;
			}

			.floorplans__logo--title {
				text-align: left;
			}
			.floorplans__logo--description {
				text-align: left;
			}
			.floorplans__logo--buttons {
				display: flex;
				flex-direction: row;
				gap: 16px;

				@media (max-width:767px){
					flex-direction: column-reverse;
					align-items: start;
				}
			}
		}
	}

	#floorplans__aparts {
		.floorplans__aparts {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 48px;

			@media (max-width:767px){
				flex-direction: column;
			}

			.floorplans__column { 
				display: flex;
				flex-direction: column;
				align-items: start;
				text-align: left;
				gap: 16px;

				.floorplans__image {
					width: 360px;
					margin: 0 auto;
				}

				.floorplans__features {
					display: flex;
					flex-direction: column;
					gap: 8px;

					.li {
						padding-right: 16px;
					}
				}
			}
			.floorplans__column:first-child { 
				width: 50%;

				@media (max-width:767px){
					width: 100%;
				}
			}
		}

	}

	#floorplans__virttual-staging {
		position: relative;
		padding: 80px 0;

		.container {
			position: relative;
			z-index: 99;
			pointer-events: none;
		}

		.floorplans__virttual-staging {
			display: flex;
			justify-content: space-between;
			align-items: start;
			flex-direction: column;
			gap: 50px;

			.block { 
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				gap: 32px;;

				@media (max-width:767px){
					flex-direction: column;
				}

				.floorplans__column--left {
					width: 50%;
					align-items: start;

					.section-title-L, .section-title-XL {
						font-size: 3.5rem;
					}

					@media (max-width:767px){
						width: 100%;
					}
				}

				.floorplans__column--right {
					width: 50%;
					min-height: 400px;
					height: 100%;
					position: relative;

					.twentytwenty-wrapper {
						position: absolute;
						width: 100%;
						pointer-events: all;
					}

					@media (max-width:767px){
						width: 100%;
					}
				}
			}

			@media (max-width:767px){
				gap: 28px;
			}
		
			.floorplans__virttual-staging--header {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8px;
				padding-bottom: 32px;

				@media (max-width:767px){
    				left: 0;
					display: flex;
					justify-content: end;
					width: 100%;
				}

				img {
					width: 48px;
				}
			}
		}

		.floorplans__column {
			display: flex;
			flex-direction: column;
            gap: 16px;

			.img-blur {
				position: relative;

				img {
					position: relative;
					z-index: 1;
					width: 100%;
				}
			}

			.text {
				text-align: start;
				text-wrap: nowrap;

				@media (max-width:767px){
					padding: 0;
				}
			}

			.title, .subtitle {
				text-align: start;
			}
		}

		.twentytwenty-wrapper {
			/* position: relative;
			z-index: 1;

			@media (max-width:767px){
				padding-top: 280px;		
			} */
		}
	}
	
	#floorplans__virttual-staging::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0; 
			bottom: 0; 
			right: 0%;
			background: linear-gradient(90deg, #ff3c1a 40%, rgba(255,60,26,0.8) 60%, rgba(255,60,26,0.8) 100%);
			z-index: 4;
			pointer-events: none;
	}
	
	section {
		@media (max-width:767px){
			padding-top: 24px !important;
		}
	}

	#floorplans__pricing {
		.container {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);

			@media (max-width:767px){
				position: relative;
			}
		}


		
		.floorplans__pricing {
			.flex {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				margin-top: -4%;
			}
		}

		
		.floorplans__column{
			display: flex;
			flex-direction: column;
			gap: 8px;
			justify-content: center;
			align-items: center;

			h2, p {
				margin-bottom: 0;
			}

			.floorplans__features {
				display: flex;
				flex-direction: column;
				gap: 8px;

				img {
				  margin-right: 8px;
			    }
	    	}

			img {
				max-width: 280px;
			}
		}
		.bg-tour {
			padding-top: 150px;
		}	
	}

	@media (max-width:767px){
		.main-title {
			font-size: 3.3125rem;
		}

		.main-title-bold {
			font-size: 3.3125rem;
		}
	}
}