/* virtual staging */

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

	.container {
        position: relative;
		z-index: 1;
	}

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

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

			.cgi__logo--title {
				text-align: left;
			}
			.cgi__logo--description {
				text-align: left;
			}
			.cgi__logo--buttons {
				display: flex;
				flex-direction: row;
				gap: 16px;
				margin-top: 32px;

				@media (max-width:767px){
					flex-direction: column-reverse;
					align-items: start;
				}
			}
		}
	}
	
	client-say {
		@media screen and (max-width: 480px) {
			display: none;
		}
	}	

	#cgi__virttual-staging1, #cgi__virttual-staging2 {
		position: relative;
		padding: 0;
		overflow: hidden;

		@media (max-width:767px){
			background-size: cover;
		}

		.container {
			position: static;
		}

		.cgi__virttual-staging1-bg {
		  position: relative;
		  width: 100%;
		  flex-direction: column;
		  display: flex;
		  align-items: stretch;
		  padding: 70px 0 70px 0;
	  
		  .block-logo {
			padding: 0 0 55px 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			left: -24px;

			@media (max-width:767px){
				padding: 0;
				left: 0;
			}
	  
			.title {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			  text-wrap: nowrap;
			  padding-right: 10px;
			}
	  
			.subTitle {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			}
	  
			.logo {
				z-index: 100;
				position: relative;
				width: 48px;
				margin-right: 8px;
			}
		  }
		}
		.cgi__virttual-staging1-flex {
		  position: relative;
		  z-index: 2;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  width: 100%;
		  
			@media (max-width:767px){
				flex-direction: column;
			}
		}
	  
		.cgi__virttual-staging1-left {
		  flex: 1 1 100%;
		  color: #fff;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
	  
		  .section-container-title {
			text-align: left;
			display: flex;
			flex-direction: column;
			gap: 16px;

			h2, span {
			  color: #fff;
			  text-align: left;
			  margin: 0;
			}
		  }
		}
	  
		.cgi__virttual-staging1-right {
			position: relative;
			width: 100%;
            height: 100%;
			aspect-ratio: 16 / 9;
			display: flex;
            justify-content: center;
            align-items: center;
		}

		.marketing-overlay {
			position: absolute;
			left: 0; 
			top: 0; 
			bottom: 0; 
			width: 100%;
			background: linear-gradient(90deg, #ff3c1a 40%, rgba(255,60,26,0.8) 60%, rgba(255,60,26,0.8) 100%);
			z-index: 1;
		  }
	  }

	#cgi__pricing {
		padding-bottom: 0;
		
		.container {
			@media (max-width:767px){
				position: relative;
			}
		}
		
		.cgi__pricing {
			.flex {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
			}
		}

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

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

	@media (max-width: 768px) {
		.main-title {
			font-size: 4rem;
		}
		.main-title-bold {
			font-size: 4rem;
		}
	}

	#cgi__solution {
		padding: 40px 0 120px 0;
		position: relative;
		background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 60, 26, 0.0) 100%);

		@media (max-width:767px){
			background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 60, 26, 0.0) 100%);
		}

		.cgi__solution {
			display: flex;
			flex-direction: row;
            justify-content: center;
            align-items: center;
			gap: 32px;

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

			.cgi__solution--content {
				width: 50%;
				text-align: right;
				display: flex;
				flex-direction: column;
				justify-content: end;
				align-items: end;
				gap: 16px;

				@media (max-width:767px){
					width: 100%;
					text-align: center;
					justify-content: center;
					align-items: center;
				}

				.cgi__solution--action {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16px;

					.btn-secondary {
						border: 1.5px solid #000000;
						color: #000000;
					}
				}
			}

			.cgi__solution--view {
				display: flex;
				position: relative;
				width: 50%;
				min-height: 300px;
				justify-content: start;
                align-items: start;

				@media (max-width:767px){		
					width: 100%;
				}
			}
		
			.cgi__solution--bg{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;

				width: 100%;
				height: 100%;
				border: 0px;
				aspect-ratio: 16 / 9;
				border-radius: 32px;
			}
		}

	.background-overlay {
		background: linear-gradient(to left, #ffffff 3%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 60, 26, 0.0) 70%);
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100%;
	}
}