/* virtual staging */

.ai_avatar {
	box-shadow: rgb(17 15 15 / 42%) 0px 2px 6px;
    background: white;
	position: relative;
	
	#ai_avatar__logo{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(/common/images/pages/ai_avatar/header.jpg) center center no-repeat;
		background-size: cover;
		height: calc( 100vh );
		position: relative;
		overflow: hidden;

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

			.ai_avatar__logo--title {
				text-align: left;
			}
			.ai_avatar__logo--description {
				text-align: left;
			}
			.ai_avatar__logo--buttons {
				display: flex;
				flex-direction: row;
				gap: 16px;
				margin-top: 32px;
				
				@media (max-width:767px){
					flex-direction: column-reverse;
					align-items: start;
				}
			}
		}
	}

	#ai_avatar__actions {
		.ai_avatar__actions {
			display: flex;
			justify-content: space-between;
			gap: 32px;

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

			.ai_avatar__left {
				width: 70%;
				aspect-ratio: 16/9;
			}
		
			.ai_avatar__right { 
				display: flex;
				flex-direction: column;
				align-items: start;
				text-align: left;
				gap: 16px;
				width: 30%;

				.title {
					@media (max-width:767px){
						text-wrap: auto;
					}
				}

				.icons {
					.desctop-icon, .phone-icon {
						width: 24px;
						height: 36px;
					}
				}

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

					iframe  {
						width: 100%;
					}
				}
			}
		}

		.order-btn {
			width: 100%;
		}
	}

	#ai_avatar__choose-from {
		background: linear-gradient(to right, #ff3c3c, #ff5722);

		.ai_avatar__choose-from {
			display: flex;
			justify-content: space-between;
			align-items: center;

			@media (max-width:767px){
				flex-direction: column;
				gap: 28px;
			}
			
			.ai_avatar__column { 
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: left;
				gap: 16px;
				width: 50%;
				position: relative;

				@media (max-width:767px){
					text-align: center;
				}

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

				.title {
					text-wrap: nowrap;
					@media (max-width:767px){
						text-wrap: auto;
					}
				}

				img {
					width: 80px;

					@media (min-width:768px){
						position: absolute;
						left: -2px;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			.ai_avatar__column:first-child {
				/* border-right: 3px solid #fff; */
				@media (max-width:767px){
					border-right: none;
					text-align: left;
					padding-right: 50%;
				}
			}

			.ai_avatar__column:nth-child(2) {
				.section-title {
					@media (max-width:767px){
						text-align: right;
						gap: 28px;
						padding-left: 55%;
					}
				}
			}

			.ai_avatar__column:nth-child(2)::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 4px; /* Adjust border width */
				height: 100%;
				background: linear-gradient(
					to bottom,
					white 0%,
					white 20%,
					transparent 20%,
					transparent 80%,
					white 80%,
					white 100%
				);

				@media (max-width:767px){
					background: linear-gradient(
						to left,
						white 0%,
						white 20%,
						transparent 20%,
						transparent 80%,
						white 80%,
						white 100%
					);
					width: 100%;
                    height: 4px;
                    top: 27px;
				}
			}
			
		}
	}

	#ai_avatar__client-says {
		.ai_avatar__client-says {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  gap: 56px;
		  padding: 60px 0;
		}
		.ai_avatar__column {
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  min-width: 380px;
		  max-width: 600px;
		}
		.ai_avatar__column.left {
		  align-items: flex-start;
		  text-align: left;
		}
		.ai_avatar__column.right {
		  align-items: flex-start;
		  text-align: left;
		}
		.divider {
		  width: 2px;
		  height: 358px;
		  background: #ff6d5a;
		  margin: 0 32px;
		  align-self: center;
		}
		.clients-title {
		  color: #ff3c1a;
		  margin-bottom: 16px;
		}
		.clients-title .bold {
		  color: #ff3c1a;
		}
		.clients-subtitle {
		  color: #ff3c1a;
		  margin-top: 16px;
		}
		.quote {
			text-align: end;
		}
		.quote .bold {
		  color: #ff3c1a;
		}
		.quote-mark {
		  color: #ff3c1a;
		  vertical-align: top;
		}
		.author {
		  color: #222;
		  margin-top: 8px;
		}
	  }

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

			@media (max-width:767px){
				height: auto;
				flex-direction: column;
			}
		}
		.ai_avatar__column.img-blur {
			position: relative;
		}
		.ai_avatar__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: 100px 100px 0 0;
			}
		}
		.ai_avatar__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 100%);
				left: 0%;
			}
		}
		.ai_avatar__column.text {
			padding: 59px;
			text-align: end;
			text-wrap: nowrap;

			@media (max-width:767px){
				text-wrap: auto;
				text-align: left;
				padding: 16px;
			}
		}
	}

	#ai_avatar__pricing {
		.container {
			
			@media (min-width:768px){
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
		
		.ai_avatar__pricing {
			.flex {
				display: flex;
				align-items: start;
				position: relative;
				flex-direction: column;
				align-items: center;
			}
		}

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

			.ai_avatar__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%;

					@media (max-width:767px){
						text-wrap: auto;
					}
				}
	    	}

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

	.disclaimer {
		margin-top: 48px;
		text-wrap: nowrap;
		display: flex;
		flex-direction: column;
	}
}