/* Pixelz360 magnifying glass animation — Material 01 refracting lens */

.px-lens-animation,
.px-lens-animation.exhibit {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.px-lens-animation .lens-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2.1 / 1;
	min-height: 280px;
	max-height: 621px;
	pointer-events: none;
}

.px-lens-animation .lens-handle {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	touch-action: none;
	cursor: grab;
	z-index: 2;
	will-change: transform;
}

.px-lens-animation .lens-handle:active {
	cursor: grabbing;
}

.px-lens-animation .lens-hint {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 3;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	color: #55554f;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid #e4e3dc;
	padding: 5px 10px;
	border-radius: 999px;
	pointer-events: none;
}

/* Elementor shortcode widget fill */
.elementor-widget-shortcode .px-lens-animation {
	width: 100%;
}

@media (max-width: 1024px) {
	.px-lens-animation .lens-canvas {
		aspect-ratio: 2.6 / 1;
		max-height: 220px;
	}
}

@media (max-width: 767px) {
	.px-lens-animation {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.px-lens-animation .lens-canvas {
		aspect-ratio: 2.2 / 1;
		min-height: 110px;
		max-height: 190px;
	}

	.px-lens-animation .lens-hint {
		bottom: 10px;
		right: 10px;
		font-size: 10px;
		padding: 4px 8px;
	}
}

@media (max-width: 480px) {
	.px-lens-animation {
		padding-left: 14px;
		padding-right: 14px;
	}

	.px-lens-animation .lens-canvas {
		aspect-ratio: 2 / 1;
		min-height: 100px;
		max-height: 160px;
	}
}