#Safari3D {
	position: relative;
	margin-bottom: 15px;
	width: 200px;
	height: 200px;
	background: #fff;
	border-radius: 40px;
	box-shadow: 0 15px 5px #ccc,
	0 15px 15px rgb(0 0 0 / 25%),
	0 14px 0 rgb(0 0 0 / 50%),
	0 25px 30px rgb(0 0 0 / 10%);
}
#Safari3D .circle_lines {
	position: absolute;
	inset: 17.5px;
	/* top: 17.5px; */
	/* left: 17.5px; */
	width: 165px;
	height: 165px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#1ec9ff, #2971e7);
	box-shadow: 0 -2.5px 0 2.5px rgb(0 0 0 / 15%),
	inset 0 5px 0 rgb(0 0 0 / 10%);
}
#Safari3D .circle_lines span {
	position: absolute;
	width: 1px;
	height: 12px;
	background: #fff;
	transform: translateY(-68.775px) rotate(calc(10deg * var(--i)));
	transform-origin: 0.5px 75px;
	filter: drop-shadow(1px 1px 0.5px rgb(0 0 0 / 15%));
}
#Safari3D .circle_lines span::before {
	content: "";
	position: absolute;
	width: 1px;
	height: 6px;
	background: #fff;
	transform: rotate(5deg);
	transform-origin: 0 75px;
}
#Safari3D .niddle {
	position: absolute;
	width: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	inset: 25.5px 26px;
	/* top: 25.5px; */
	/* left: 26px; */
	/* bottom: 25.5px; */
	/* right: 26px; */
	transform: translateX(65px) rotate(45deg);
	filter: drop-shadow(0 0 2px rgb(0 0 0 / 25%));
	transition: 2s cubic-bezier(0.47, -0.48, 0.46, 1.54);
}
#Safari3D:hover .niddle {
	transform: translateX(65px) rotate(405deg);
}
#Safari3D .niddle::before {
	content: "";
	position: absolute;
	top: 0;
	height: 75px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 75px solid #fb3b2e;
}
#Safari3D .niddle::after {
	content: "";
	position: absolute;
	top: 75px;
	height: 75px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 75px solid #fff;
}