/* Overlapping Images Widget — 48ff6ff4 */

.oi-48ff6ff4-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	line-height: 0;
}

.oi-48ff6ff4-primary {
	position: relative;
	z-index: 1;
	line-height: 0;
}

.oi-48ff6ff4-primary img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.oi-48ff6ff4-secondary {
	position: absolute;
	z-index: 2;
	line-height: 0;
}

.oi-48ff6ff4-secondary img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Transitions */
.oi-48ff6ff4-primary,
.oi-48ff6ff4-secondary {
	transition-property: transform, box-shadow;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-duration: 400ms;
}

/* === HOVER EFFECTS === */

/* Float Up */
.oi-48ff6ff4-wrap[data-effect="float"]:hover .oi-48ff6ff4-primary {
	transform: translateY(-8px);
}
.oi-48ff6ff4-wrap[data-effect="float"]:hover .oi-48ff6ff4-secondary {
	transform: translateY(-14px);
}

/* Zoom In */
.oi-48ff6ff4-wrap[data-effect="zoom"]:hover .oi-48ff6ff4-primary img {
	transform: scale(1.05);
}
.oi-48ff6ff4-wrap[data-effect="zoom"]:hover .oi-48ff6ff4-secondary img {
	transform: scale(1.08);
}
.oi-48ff6ff4-wrap[data-effect="zoom"] .oi-48ff6ff4-primary,
.oi-48ff6ff4-wrap[data-effect="zoom"] .oi-48ff6ff4-secondary {
	overflow: hidden;
}
.oi-48ff6ff4-wrap[data-effect="zoom"] .oi-48ff6ff4-primary img,
.oi-48ff6ff4-wrap[data-effect="zoom"] .oi-48ff6ff4-secondary img {
	transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slide Apart */
.oi-48ff6ff4-wrap[data-effect="slide"]:hover .oi-48ff6ff4-primary {
	transform: translate(-12px, -6px);
}
.oi-48ff6ff4-wrap[data-effect="slide"]:hover .oi-48ff6ff4-secondary {
	transform: translate(12px, 6px);
}

/* Tilt */
.oi-48ff6ff4-wrap[data-effect="tilt"]:hover .oi-48ff6ff4-primary {
	transform: perspective(800px) rotateY(3deg) rotateX(-2deg);
}
.oi-48ff6ff4-wrap[data-effect="tilt"]:hover .oi-48ff6ff4-secondary {
	transform: perspective(800px) rotateY(-4deg) rotateX(3deg);
}

/* === RESPONSIVE — Tablet & Mobile === */
@media (max-width: 1024px) {
	.oi-48ff6ff4-primary {
		width: 90% !important;
	}
	.oi-48ff6ff4-secondary {
		width: 50% !important;
	}
}

@media (max-width: 767px) {
	.oi-48ff6ff4-wrap {
		display: flex;
		flex-direction: column;
		gap: 16px;
		align-items: center;
	}
	.oi-48ff6ff4-primary {
		width: 100% !important;
		position: relative;
	}
	.oi-48ff6ff4-secondary {
		position: relative !important;
		width: 80% !important;
		top: auto !important;
		left: auto !important;
		margin-top: -60px;
	}
}