/**
 * Naseem Arrow Shape (Elementor) — sketch-style SVG arrows.
 *
 * @package Naseem
 */

.elementor-widget-naseem-arrow-shape .naseem-arrow-shape {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.elementor-widget-naseem-arrow-shape .naseem-arrow-shape__inner {
	display: inline-block;
	transform-origin: center center;
	will-change: transform;
	transform: rotate(calc(var(--na-dir, 0deg) + var(--na-rot-content, 0deg) + var(--na-rot-style, 0deg)))
		scaleX(var(--na-flip-x, 1)) scaleY(var(--na-flip-y, 1));
}

.elementor-widget-naseem-arrow-shape .naseem-arrow-shape__lift {
	display: inline-block;
	transform-origin: center center;
}

.elementor-widget-naseem-arrow-shape .naseem-arrow-shape__svg {
	display: block;
	width: var(--na-w, 200px);
	height: var(--na-h, 100px);
	max-width: 100%;
	color: var(--na-color, currentColor);
	stroke: currentColor;
	fill: none;
	stroke-width: var(--na-stroke, 2px);
	vector-effect: non-scaling-stroke;
}

.elementor-widget-naseem-arrow-shape .naseem-arrow-shape__svg * {
	vector-effect: non-scaling-stroke;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--dir-right .naseem-arrow-shape__inner {
	--na-dir: 0deg;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--dir-down .naseem-arrow-shape__inner {
	--na-dir: 90deg;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--dir-left .naseem-arrow-shape__inner {
	--na-dir: 180deg;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--dir-up .naseem-arrow-shape__inner {
	--na-dir: -90deg;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--draw .naseem-arrow-shape__svg path,
.elementor-widget-naseem-arrow-shape.naseem-arrow--draw .naseem-arrow-shape__svg line,
.elementor-widget-naseem-arrow-shape.naseem-arrow--draw .naseem-arrow-shape__svg polyline {
	animation-name: naseem-arrow-draw;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

@keyframes naseem-arrow-draw {
	from {
		stroke-dashoffset: var(--na-dash-len, 1000);
	}
	to {
		stroke-dashoffset: 0;
	}
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--hover-bounce .naseem-arrow-shape__lift:hover {
	animation: naseem-arrow-bounce 0.65s ease;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--hover-wiggle .naseem-arrow-shape__lift:hover {
	animation: naseem-arrow-wiggle 0.55s ease;
}

.elementor-widget-naseem-arrow-shape.naseem-arrow--hover-fade .naseem-arrow-shape__lift:hover .naseem-arrow-shape__svg {
	animation: naseem-arrow-fade 0.45s ease;
}

@keyframes naseem-arrow-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-4px);
	}
}

@keyframes naseem-arrow-wiggle {
	0%,
	100% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(4deg);
	}
	60% {
		transform: rotate(-4deg);
	}
}

@keyframes naseem-arrow-fade {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@media (min-width: 1025px) {
	.elementor-widget-naseem-arrow-shape.naseem-arrow--hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget-naseem-arrow-shape.naseem-arrow--hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.elementor-widget-naseem-arrow-shape.naseem-arrow--hide-mobile {
		display: none !important;
	}
}
