/* virtual staging */

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

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

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

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

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

	#smart-pricing__aparts {
		.smart-pricing__banner {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 32px;
			background: linear-gradient(90deg, #f47b6c 5%, #e65343 30%, #f04535 50%, #ff0100 100%);
			padding: 32px;
			color: white;
			gap: 32px;

			@media (max-width: 480px) {
				flex-direction: column;
				width: calc(100% - 48px);
				align-items: flex-start;
			}
		}

		.left--banner--header {
			background: linear-gradient(90deg, #f47b6c 5%, #e65343 30%, #f04535 50%, #ff0100 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.smart-pricing__column__text {
			padding: 20px 0 95px 0;

			@media (max-width: 480px) {
				padding: 20px 0;
				font-size: 20px;
			}
		}

		.left--subtitle {
			text-align: left;

			@media (max-width: 480px) {
				font-size: 20px;
				text-align: left;
			}
		}

		.smart-pricing__banner--left-wrapper {
			display: flex;
			flex-direction: column;
			gap: 16px;
			align-items: baseline;

			.left--title {
				@media (max-width: 480px) {
					font-size: 36px;
				}
			}

			.left--footer {
				@media (max-width: 480px) {
					font-size: 20px;
					text-align: left;
					display: none;
				}
			}
		}

		.smart-pricing__banner--left, .smart-pricing__banner--right {
			width: 50%;

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

		.footer-text {
			@media (max-width: 480px) {
				font-size: 20px;
				text-align: left;
			}
		}

		.left--banner {
			border-radius: 20px;
			background: #FFF;
			padding: 15px 33px;
			display: flex;
            justify-content: center;
            align-items: center;

			img {
				width: 16px;
				margin-top: -20px;
			}

			@media (max-width: 480px) {
				padding: 4px 12px;
			}

			.left--banner--text {
				background: linear-gradient(90deg, #f47b6c 5%, #e65343 30%, #f04535 50%, #ff0100 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;

				@media (max-width: 480px) {
					font-size: 32px;
				}
			}


		}

		.right--header {
			text-align: center;
			padding-bottom: 16px;
		}

		.right--wrapper {
          padding: 30px 0;
		  padding-left: 100px;

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

		.right--list {
			position: relative;
			padding-left: 24px;

			@media (max-width: 480px) {
				font-size: 18px;
			}
		}

		.right--list:last-child {
			margin-bottom: 0;
		}

		.right--list::before {
			content: "";
			position: absolute;
			left: 0;
			top: 8px;
			width: 14px;
			height: 8px;
			border-left: 2px solid #fff;
			border-bottom: 2px solid #fff;
			transform: rotate(-45deg);

			@media (max-width: 480px) {
				top: 7px;
				width: 11px;
				height: 6px;
			}
		}

		.block-center {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}
		}

		.smart-pricing__email {
			display: flex;
			align-items: center;
			background: #f3f3f3;
			border-radius: 9999px;
			padding: 0;
			max-width: 720px;
			height: 62px;
			margin-top: 45px;
			flex-direction: row;

			@media (max-width: 480px) {
				width: calc(100% - 48px);
				height: 50px;
			}
		}

		.email--input {
			flex: 1;
			height: 100%;
			background: transparent;
			border: none;
			outline: none;
			padding-left: 20%;

			@media (max-width: 480px) {
				padding-left: 20px;
			}
		}

		.email--input::placeholder {
			color: #000;

			@media (max-width: 480px) {
				font-size: 16px;
			}
		}

		.email--form {
			width: 100%;
		}

	.btn-height {
		height: 62px;
		width: 232px;

		display: flex;
		align-items: center;
		justify-content: center;

		@media (max-width: 480px) {
			width: 108px;
			height: 49px;
		}

		.btn-height-text {
			font-size: 16px;
			white-space: nowrap;
			text-align: center;
			font-weight: bold;

			.word-create,
			.word-free {
				display: inline;
			}

			@media (max-width: 480px) {
				white-space: normal;

				.word-create,
				.word-free {
					display: block;
					line-height: 1.1;
					text-wrap: nowrap;
				}
			}
		}
	}


#smart-pricing__services {
	padding: 60px 0;

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

	.smart-pricing__services--header {
		text-align: start;
		margin-bottom: 40px;
		background-clip: text;

		.smart-pricing__services--header--title {
			width: 100%;
			@media (max-width: 480px) {
				text-wrap: nowrap;
				font-size: 32px;
				text-align: center;
				display: flex;
				justify-content: center;
			}
		}
	}

	.smart-pricing__services--wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	    gap: 24px;
		max-width: 1200px;
		margin: 0 auto;

		@media (max-width: 1240px) {
			grid-template-columns: repeat(auto-fit, 280px);
		}

		@media (max-width: 600px) {
			grid-template-columns: 1fr;
		padding: 0 20px;
		}
	}

		.services--block {
			flex: 0 1 calc(25% - 24px);
			min-width: 250px;

		    display: flex;
			flex-direction: column;

			.block--title {
				text-align: center;
				min-height: 70px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.block--img-wrapper {
				display: flex;
				flex-direction: column;
				gap: 0;
				background: #ff4444;
				border: 3px solid #ff4444;
				overflow: hidden;

				.block--img {
					width: 100%;
					aspect-ratio: 16 / 11;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						display: block;
					}
				}

				.block--button {
					padding: 12px;

					.btn-white {
						width: 100%;
						padding: 0;
						background: white;
						color: #ff4444;
						border: none;
						border-radius: 20px;
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: #f5f5f5;
							transform: translateY(-2px);
							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
						}
					}
				}
			}
		}
	}

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

.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-box {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);

  width: 280px;
  background: #222;
  color: #fff;
  padding: 10px;
  border-radius: 6px;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.tooltip-wrapper.active .tooltip-box {
  opacity: 1;
  visibility: visible;
}