/* virtual staging */

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

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

		.digital_twins__logo {
			display: flex;
			flex-direction: column;
			gap: 16px;
			align-items: start;
			padding-left: 72px;

			@media (max-width:767px){
				padding-left: 0px;
				width: calc(100vw - 32px);
			}

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

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

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

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

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

				video {
					width: 100%;
					border-radius: 32px;
				}

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

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

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

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

	}

	 #digital_twins_marketing {
		position: relative;
		overflow: hidden;
		background: url('/common/images/pages/digital_twins/marketing.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media (max-width:767px){
			padding: 80px 0 320px;
		}
	  
		.marketing-bg {
		  position: relative;
		  width: 100%;
		 
		  flex-direction: column;
		  display: flex;
		  align-items: stretch;
		  gap: 80px;
	  
			@media (max-width:767px){
				gap: 16px;
			}	

		  .block-logo {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 4px;
			left: -48px;
			position: relative;

			@media (max-width:767px){
				left: 0;
				justify-content: end;
			}	
	  
			.title {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			  text-wrap: nowrap;
			}
	  
			.subTitle {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			}
	  
			.logo {
			  z-index: 100;
			  position: relative;
			  width: 49px;
			}
		  }
		}
	  
		.marketing-overlay {
			position: absolute;
			left: 0; top: 0; bottom: 0; width: 60%;
			background: linear-gradient(90deg, #ff3c1a 0%, rgba(255,60,26,0.85) 60%, rgba(255,60,26,0.0) 100%);
			z-index: 1;
			pointer-events: none;

			@media (max-width:767px){
				background: linear-gradient(to top, rgba(255,255,255,0) 0%, #ff3c1a 50%);
				width: 100%;
			}
		}
	  
		.marketing-flex {
		  position: relative;
		  z-index: 2;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		}
	  
		.marketing-left {
		  flex: 1 1 100%;
		  color: #fff;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;

			@media (max-width:767px){
		  		padding: 0;
				width: 100%;
			}
	  
		  .section-container-title {
			text-align: left;
			display: flex;
			flex-direction: column;
			gap: 16px;
	  
			h2, span {
			  color: #fff;
			  text-align: left;
			  margin: 0;
			}
		  }
		}
	  
		.marketing-right {
		  flex: 1 1 50%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 40px 40px 40px 0;
		}
	  }  

	  #digital_twins__floorPlans {
		.digital_twins__floorPlans {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 100px;
			background: #F2F2F2;

			@media (max-width:767px){
				height: auto;
				flex-direction: column;
				border-radius: 40px;
				display: inline-block;
			}	
		}
		.digital_twins__column.img-blur {
			position: relative;
		}
		.digital_twins__column.img-blur img {
			position: relative;
			z-index: 1;
			border-radius: 100px 0 0 100px;
			height: 341px;
			width: 100%;

			@media (max-width:767px){
				border-radius: 40px 40px 0 0;
			}
		}

		.digital_twins__column p, h2 {
			text-wrap: auto;
			margin: 0;
		}

		.digital_twins__column p {
			padding-top: 16px;
		}

		.digital_twins__column br {
			display: none;
		}


		.digital_twins__column.img-blur::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0; 
			bottom: 0; 
			left: 5%;
			background: linear-gradient(to  right, rgba(255,255,255,0) 0%, #F2F2F2 100%);
			z-index: 2;
			pointer-events: none;

			@media (max-width:767px){
				background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #F2F2F2 80%);
				left: 0%;
			}
		}
		.digital_twins__column.text {
			padding: 59px;
			text-align: end;
			text-wrap: nowrap;

			@media (max-width:767px){
				padding: 0;
				text-align: start;
				padding: 16px;
				box-sizing: border-box;
			}
		}
	}

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

			@media (max-width:767px){
				position: relative;
			}
		}
		
		.digital_twins__pricing {
			.flex {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
			}
		}

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

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

				img {
				  margin-right: 8px;
			    }

				.text {
					text-align: start;
					text-wrap: nowrap;
					position: absolute;
					padding-left: 107px;
					top: 4%;
				}
	    	}

			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;
		}
	}

	.section__aparts__features-35 {
		width: 45%;
	}

	.flex-grow {
		flex-grow: 1;
	};

	.right-side { 
		gap: 35px;
	}

	.section__aparts__column {
		video, iframe {
			aspect-ratio: auto;
		}
	}
}