.tpFadeInUp {
	opacity: 0; /* Start invisible */
	animation: tpFadeInUp 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}
@keyframes tpFadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px); /* Start slightly below */
	}
	100% {
		opacity: 1;
		transform: translateY(0); /* End at original position */
	}
}

@keyframes tpslideInUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.tpfadeInLeft {
	opacity: 0; /* Start invisible */
	animation: tpfadeInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}
@keyframes tpfadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px); /* Start slightly to the left */
	}
	100% {
		opacity: 1;
		transform: translateX(0); /* End at original position */
	}
}

.tpSkillInLeft {
	opacity: 0; /* Start invisible */
	animation: tpSkillInLeft 2s ease-out forwards; /* 2 seconds duration, ease-out effect */
}
@keyframes tpSkillInLeft {
	0% {
		opacity: 0;
		transform: translateX(-300px); /* Start slightly to the left */
	}
	100% {
		opacity: 1;
		transform: translateX(0); /* End at original position */
	}
}

.slideinup {
	-webkit-animation-name: slideinup;
	animation-name: slideinup;
}
@keyframes slideinup {
	0% {
		opacity: 0;
		transform: translateY(70px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes slideinright {
	0% {
		opacity: 0;
		transform: translateX(70px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slideindown {
	0% {
		opacity: 0;
		transform: translateY(-70px);
	}
	100% {
		transform: translateY(0);
	}
}

.slideinleft {
	-webkit-animation-name: slideinleft;
	animation-name: slideinleft;
}
@keyframes slideinleft {
	0% {
		opacity: 0;
		transform: translateX(-70px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slidebottomright {
	0% {
		opacity: 0;
		transform: translateX(100px) translateY(100px);
	}
	100% {
		transform: translateX(0) translateY(0);
	}
}
@keyframes slidetopleft {
	0% {
		opacity: 0;
		transform: translateX(-100px) translateY(-100px);
	}
	100% {
		transform: translateX(0) translateY(0);
	}
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
	0% {
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-top-color: transparent;
		border-left-color: transparent;
	}
	75% {
		border-top-color: #fff;
		border-left-color: #fff;
		border-right-color: #fff;
		border-bottom-color: transparent;
	}
	100% {
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-top-color: transparent;
		border-left-color: transparent;
	}
}
/*img-animation**********************/
.img-custom-anim-right {
	animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
		0.4s;
	opacity: 0;
}

@keyframes img-anim-right {
	0% {
		transform: translateX(5%);
		clip-path: inset(0 0 0 100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.img-custom-anim-left {
	animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1)
		0.4s;
	opacity: 0;
}

@keyframes img-anim-left {
	0% {
		transform: translateX(-5%);
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}
.img-custom-anim-top {
	animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
	opacity: 0;
}

@keyframes img-anim-top {
	0% {
		transform: translateY(-5%);
		clip-path: inset(0 0 100% 0);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}