/* animation-rotate */
@keyframes rotate-animation {
	0% {
		transform: rotate(0deg);
  }
  50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* animation-zoom up-down start */
@keyframes scalUp {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-6px);
    }
}

/* animation-fade start */

.efective-fade {
  position: relative;
  overflow: hidden;
}

.efective-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff2a;
  transform: translateX(100%);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.efective-fade:hover::before {
  animation: slideLR 1s ease forwards;
}

@keyframes slideLR {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  60% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}