.sf-parent{
	overflow: visible !important; 
}
@media (min-width: 320px)  {
	.sf-1{
		position: absolute;
	    left: 3px;
	    width: 16px;
	    top: 2px;
	}
	.sf-2{
		position: absolute;
	    left: 22px;
	    width: 17px;
	    top: 20px;
	}
	.sf-3{
	    position: absolute;
	    left: 62px;
	    width: 18px;
	    top: -5px;
	}
	.sf-4{
		position: absolute;
    left: 104px;
    width: 17px;
    top: 14px;
	}
}

@media (min-width: 1025px)  {
	.sf-1{
		position: absolute;
	    left: 1px;
	    width: 20px;
	}
	.sf-2{
		position: absolute;
	    left: 71px;
	    width: 21px;
	    top: 20px;
	}
	.sf-3{
		position: absolute;
	    left: 129px;
	    width: 17px;
	    top: -4px;
	}
	.sf-4{
		position: absolute;
	    left: 182px;
	    width: 17px;
	    top: 10px; 
	}
}


.shake-animation {
  animation: shake 0.2s ease-out; /* Apply the shake animation */
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg);  }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-2px, 0px) rotate(1deg); }
  30% { transform: translate(2px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-2px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}