/* Rotating Globe Background */

.rgb-wrap {
	/* Defaults (desktop). Elementor controls / shortcode override these. */
	--rgb-size: 133;      /* globe diameter, % of the basis below */
	--rgb-basis: h;       /* h = block height, w = block width */
	--rgb-x: 91.5;        /* globe centre, % from left */
	--rgb-y: 73;          /* globe centre, % from top */
	--rgb-opacity: 1;
	--rgb-minh: 315px;

	position: relative;
	display: block;
	width: 100%;
	min-height: var(--rgb-minh);
	background: var(--rgb-bg, #000);
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
}

.rgb-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: var(--rgb-opacity, 1);
	pointer-events: none;
}

/* Tablet */
@media (max-width: 1024px) {
	.rgb-wrap {
		--rgb-size: 120;
		--rgb-basis: h;
		--rgb-x: 88;
		--rgb-y: 78;
		--rgb-minh: 360px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.rgb-wrap {
		--rgb-size: 125;
		--rgb-basis: w;
		--rgb-x: 70;
		--rgb-y: 96;
		--rgb-opacity: 0.7;
		--rgb-minh: 420px;
	}
}

/* ---------------------------------------------------------------
 * Elementor: "Use as background layer" mode.
 * The widget stretches over its parent Container; put it FIRST in
 * the container and add your text widgets after it.
 * ------------------------------------------------------------- */
.rgb-bgmode-yes {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 0;
}

.rgb-bgmode-yes > .elementor-widget-container {
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.rgb-bgmode-yes .rgb-wrap {
	height: 100%;
	min-height: 0 !important;
}

/* Everything after the background widget sits above it. */
.rgb-bgmode-yes ~ .elementor-element:not(.elementor-absolute):not(.elementor-fixed) {
	position: relative;
	z-index: 1;
}

body:not(.elementor-editor-active) .rgb-bgmode-yes {
	pointer-events: none;
}