/* #slide-moblify *******************************/

#slide-moblify {
 	background: var(--color-brand-purple);

	.watermark {
		position: absolute;
		right: 0;
		rotate: 10deg;
		top: 50px;

		img {
			height: 90svh;
			opacity: 0.08;
			width: auto;
		}
	}

 	.panel {
		color: rgba(255,255,255,0.9);

		.main {
			order: 2;
			text-align: center;
			width: 100%;

			h1 {
				color: var(--color-brand-blue);
			}
		}
	}
}

@media (min-width: 1000px) {

	#slide-moblify {

	 	.panel {
			width: 100%;

			.main {

			}
		}
	}
}

/* #slide-moblify .blocks *******************************/

#slide-moblify .blocks {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 40px;

	.block {
		align-items: center;
		background-color: #351d42;
		border: 1px solid var(--color-brand-blue);
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 30px;
		padding-top: 80px;
		position: relative;

		.graphic {
			position: relative;
			width: auto;

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

		.text {
			text-align: left;

			h4 {
 	      background-color: #000;
				border-radius: 15px;
 	      color: #fff !important;
        font-family: "Permanent Marker";
        font-size: 1.8rem !important;
        font-weight: 900 !important;
				letter-spacing: 4px !important;
        padding: 10px 20px;
				position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
				top: 10px;
			}

			h5 {
				color: var(--color-brand-blue-light);
				font-size: 1.8rem;
			}

			.stats {
				display: flex;
				gap: 20px;
				margin-bottom: 20px;

				.stat {
					text-align: center;
					width: calc((100% - 40px) / 3);

					h6 {
						color: #a6ff4d;
						font-size: 2rem;
						font-weight: 600;
						letter-spacing: 0;
						margin-bottom: 10px;
					}

					p {
						font-size: 0.8rem;
						line-height: 1rem;
						text-transform: uppercase;
					}
				}
			}

			.source {
				color: #fff;
				font-size: 1rem;
				margin-bottom: 20px;

				a {
					color: rgba(255,255,255,0.7);
					text-decoration: none;
				}
			}

			a.demo {
				color: #fff;
				display: block;
				font-size: 1.3rem;
				margin: 0 auto;
				text-align: center;
			}
		}
	}
}

@media (min-width: 1000px) {

	#slide-moblify .blocks {
		gap: 80px;

		.block {
			align-items: flex-start;
			flex-direction: row;
			gap: 60px;
			padding: 30px 60px;

			.graphic {
		
				img {
					height: 400px;
					width: auto;
				}
			}

			.text {

				h4 {
					display: inline-block;
					left: auto;
					position: relative;
	        transform: none;
					right: auto;
				}

				h5 {
					font-size: 1.5rem;
				}

				.stats {
					margin-bottom: 30px;
				}
			}
		}
	}
}

@media (min-width: 1400px) {

	#slide-moblify .blocks {
		align-items: stretch;
		flex-direction: row;
		gap: 40px;

		.block {
			width: calc((100% - 40px) / 2);
		}
	}
}

@media (min-width: 2000px) {

	#slide-moblify .blocks {
		gap: 80px;

		.block {
			align-items: center;
			width: calc((100% - 80px) / 2);

			.text {

				h4 {
					position: absolute;
					right: 10px;
				}
			}
		}
	}
}