@keyframes myAnim {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(-45px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateY(-24px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateY(-12px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateY(-6px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateY(-4px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}




@keyframes myAnim_about {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}




/* Set initial state for animation */
#about {
	opacity: 0;
	transform: translateY(90px); 
	transition: opacity 1s ease, transform 1s ease;
  }
  
  /* #about.animate {
	opacity: 1;
	transform: translateY(0);
  } */
  

  #about.animate {
	-webkit-animation-name: about;
	animation-name: about;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	@-webkit-keyframes about {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -2000px, 0);
	transform: translate3d(0, -2000px, 0);
	}
	100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	}
	}
	@keyframes about {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(0, -2000px, 0);
	transform: translate3d(0, -2000px, 0);
	}
	100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	}
	} 





	#education{
		opacity: 0;	
		transform: translateY(90px); 
	transition: opacity 1s ease, transform 1s ease;
	}
	#education.animate {
		opacity: 1;
		transform: translateY(0);
		animation: myAnim_education 3s ease 0s 1 normal forwards;
	}
	@keyframes myAnim_education {
		0% {
			transform: scaleY(0.4);
			transform-origin: 100% 0%;
		}
	
		100% {
			transform: scaleY(1);
			transform-origin: 100% 0%;
		}
	}



	/* For work experience fadeBottom */
	#work-experience{
		opacity: 0;	
		transform: translateY(90px); 
	transition: opacity 1s ease, transform 1s ease;
	}
	#work-experience.animate {
		opacity: 1;
		transform: translateY(0);
		animation: myAnim_work-experience 3s ease 0s 1 normal forwards;
	}
	@keyframes myAnim_work-experience {
		0% {
			transform: scaleY(0.4);
			transform-origin: 100% 0%;
		}
	
		100% {
			transform: scaleY(1);
			transform-origin: 100% 0%;
		}
	}


		/* For Skills Section fadeBottom animation*/
		/* #skills{
			opacity: 0;	
			transform: translateY(90px); 
		transition: opacity 1s ease, transform 1s ease;
		}
		#skills.animate {
			opacity: 1;
			transform: translateY(0);
			animation: myAnim_skills 3s ease 0s 1 normal forwards;
		}
		@keyframes myAnim_skills {
			0% {
				transform: scaleY(0.4);
				transform-origin: 100% 0%;
			}
		
			100% {
				transform: scaleY(1);
				transform-origin: 100% 0%;
			}
		} */

			/* For contact Section fadeBottom animation*/
			#contact{
				opacity: 0;	
				transform: translateY(90px); 
			transition: opacity 1s ease, transform 1s ease;
			}
			#contact.animate {
				opacity: 1;
				transform: translateY(0);
				animation: myAnim_contact 1s ease 0s 1 normal forwards;
			}
			@keyframes myAnim_contact {
				0% {
					transform: scale(0);
				}
			
				100% {
					transform: scale(1);
				}
			}