/* virtual staging */

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

		.workflow__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);
			}

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

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

	#workflow-marketing {
		position: relative;
		margin-bottom: 80px;
	  
		@media screen and (max-width: 767px) {
			padding: 15px 0 30px 0;
		}
	  
		.workflow-marketing-bg {
		  position: relative;
		  width: 100%;
		  flex-direction: column;
		  display: flex;
		  align-items: stretch;
	  
		  .block-logo {
			display: flex;
			flex-direction: row;
			align-items: center;
			left: 0;
			padding: 6px 14px;
			border-radius: 9px;
			background: #F00;
			position: relative;

			h2 {
				margin: 0;
				color: #FFF;
			}
	  
			@media screen and (max-width: 767px) {
			  justify-content: flex-end;
			  left: 0;
			}
	  
			.title {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			  text-wrap: nowrap;
			  padding-right: 4px;
			}
	  
			.subTitle {
			  color: #FFF;
			  z-index: 100;
			  position: relative;
			  margin: 0;
			}
	  
			.logo {
			  z-index: 100;
			  position: relative;
			  width: 140px;
	  
			  @media screen and (max-width: 767px) {
				width: 84px;
			  }
			}
		  }
		}
	  
		.workflow-marketing-overlay {
		  position: absolute;
		  left: 0; top: 0; bottom: 0;
		  z-index: 1;
		  pointer-events: none;
	  
		  @media screen and (max-width: 767px) {
			width: 100%;
		  }
		}
	  
		.workflow-marketing-flex-block {
		  position: relative;
		  z-index: 2;
		  display: flex;
		  width: 100%;
		  padding-top: 93px;

		  @media screen and (max-width: 767px) {
			padding-top: 23px;
		  }
		}
	  
		.workflow-marketing-left {
		  flex: 1 1 100%;
		  color: #fff;
		  padding: 60px 0 60px 0;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;

		  @media screen and (max-width: 767px) {
			padding: 0px 0 120px 0;
		  }
	  
		  .section-container-title {	
	  
			span {
			  margin: 0;
			}
	  
			h2 {
			  margin-bottom: 32px;
			  
			}
		  }
		}
	  
		.workflow-marketing-right {
		  flex: 1 1 50%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 40px 40px 40px 0;
		}

		.divider {
			position: absolute;
            bottom: -50px;
            width: 100%;

			img {
				width: 100%;
			}

			@media screen and (max-width: 767px) {
				bottom: 0;
			}
		}
	  }

	#workflow-marketing .workflow-marketing-bg.step1 {
		background: url('/common/images/workflow/bg-play1.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 767px) {
			background: url('/common/images/workflow/bg-play1-mob.png');
			background-size: cover;
		}
	}

	#workflow-marketing .workflow-marketing-bg.step2 {
		background: url('/common/images/workflow/bg-play2.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 767px) {
			background: url('/common/images/workflow/bg-play2-mob.png');
			background-size: cover;
		}
	}
	#workflow-marketing .workflow-marketing-bg.step3 {
		background: url('/common/images/workflow/bg-play3.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 767px) {
			background: url('/common/images/workflow/bg-play3-mob.png');
			background-size: cover;
		}
	}
	#workflow-marketing .workflow-marketing-bg.step4 {
		background: url('/common/images/workflow/bg-play4.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 767px) {
			background: url('/common/images/workflow/bg-play4-mob.png');
			background-size: cover;
		}
	}
	#workflow-marketing .workflow-marketing-bg.step5 {
		background: url('/common/images/workflow/bg-play5.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media screen and (max-width: 767px) {
			background: url('/common/images/workflow/bg-play5-mob.png');
			background-size: cover;
		}
	}

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

	contact-form {
		margin-bottom: 50px;
	}
}