/* .moblify *******************************/

.moblify {
	height: 100%;
	position: relative;

	.demo {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 10px;
		justify-content: center;
		position: sticky;
		text-align: center;
		top: 0;

		&.demo-responsive {
			display: none;
			padding: 0 90px;
		}

		.wrapper {
			align-items: center;
			display: flex;
			gap: 10px;
			height: 100%;

			> button {
				background-color: transparent;
				border: 0;
				outline: 0;
				padding: 0;

				img {
					height: auto;
					opacity: 0.5;
					transition: all ease 0.2s;
					width: 80px;

					&:hover {
						opacity: 1;
					}
				}
			}
		}

		.phone {
			display: inline-block;
			height: 560px;
			margin: 0;
			overflow: hidden;
			position: relative;
			width: auto;

			.url {
				display: none;
				font-family: sans-serif;
				font-size: 0.6rem;
				font-weight: 900;
				margin: 0 auto;
				padding: 0 40px;
				position: absolute;
				text-align: center;
				top: 50px;
				width: 100%;
				z-index: 3;

				span {
					background-color: #e8eaee;
					padding: 0 20px;
				}
			}

			img {
				height: 100%;
				position: relative;
				width: auto;
				z-index: 2;
			}

			> .responsive {
				height: 434px;
				left: 10px;
				overflow-y: scroll;
				position: absolute;
				top: 73px;
				width: calc(100% - 19px);
				z-index: 2;

				&::-webkit-scrollbar {
					width: 4px;
				}

				&::-webkit-scrollbar-track {
					background: #222;
				}

				&::-webkit-scrollbar-thumb {
					background: #888;
					border-radius: 5px;
				}

				&::-webkit-scrollbar-thumb:hover {
					background: #555;
				}

				img {
					height: auto;
					width: 100%;
				}
			}

			> .moblify {
				left: 10px;
				overflow: hidden;
				position: absolute;
				top: 73px;
				width: calc(100% - 19px);
				z-index: 1;

				img {
					height: auto;
					width: 700%;
				}
			}
		}

		.btn-cta {
			display: inline-block;
		}
	}
}

/* .modal-moblify *******************************/

.modal-moblify {
	padding: 20px;
	position: relative;

  .btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

@media (min-width: 1000px) {

  .modal-moblify {
		display: flex;
	  height: 100svh;
		justify-content: center;
    overflow: hidden;
    overflow-y: auto;
		padding: 40px;

		.body {
	    display: flex;
			gap: 80px;
			max-width: 1400px;

			.main {
				border-left: 2px dashed #ccc;
				padding: 40px;

				.offer {
					align-items: center;
					display: flex;
					gap: 20px;
					justify-content: space-between;
					margin-bottom: 40px;

					img {
						height: 60px;
						width: auto;
					}
				}
			}
    }
  }
}

/* .modal-moblify .benefits *******************************/

.modal-moblify .benefits  {

	.benefit {
		display: flex;
		gap: 20px;
		padding-bottom: 20px;

		img {
			height: 40px;
			width: auto;
		}

		h3 {
			font-size: 1.5rem;
			font-weight: 600;
		}
	}
}

@media (min-width: 1000px) {

  .modal-moblify .benefits  {
	}
}