/* Start Hero Animation */
.header-hero h1{
	animation:move-up 1s 0.5s forwards;
	opacity:0;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

.header-hero p{
	animation:move-up 1s 0.7s forwards;
	opacity:0;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.hero .btn{
	animation:move-up 1s 0.9s forwards;
	opacity:0;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}

.hero-img{
	animation:move-up 1s 1.2s forwards;
	opacity:0;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
/* End  Hero Animation */

/* Start  Product Animation */
.product .box:nth-child(1){
	animation:move-left 1s .5s forwards;
}
@keyframes move-left {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.product .box:nth-child(2){
	animation:move-left 1s .7s forwards;
}
@keyframes move-left {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}

.product .box:nth-child(3){
	animation:move-left 1s .9s forwards;
}
@keyframes move-left {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.product .box:nth-child(4){
	animation:move-left 1s 1s forwards;
}
@keyframes move-left {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.product .box:nth-child(4){
	animation:move-left 1s 1s forwards;
}
@keyframes move-left {
	0%{
		transform: translateX(40rem) ;
	}
	100%{
		transform: translateX(0) ;
		opacity: 1;
	}
}
.product .box:hover .content{
	top:0;
	transition: .2s ease-in-out;
}

.product .product-content{
	animation:move-left 1s 1.2s forwards;
}
@keyframes move-left {
	0%{
		transform: translateX(40rem) ;
	}
	100%{
		transform: translateX(0) ;
		opacity: 1;
	}
}

/* End  Product Animation */

/* Start  Gallery Animation */
.sec-gallary .boxes .box:nth-child(1){
	animation:move-up 1s .5s forwards;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

.sec-gallary .boxes .box:nth-child(2){
	animation:move-up 1s .7s forwards;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.sec-gallary .boxes .box:nth-child(3){
	animation:move-up 1s .9s forwards;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
.sec-gallary .boxes .box:nth-child(4){
	animation:move-up 1s 1s forwards;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}

.sec-gallary .boxes .box:nth-child(5){
	animation:move-up 1s 1.5s forwards;
}
@keyframes move-up {
	0%{
		transform: translateY(40rem) ;
	}
	100%{
		transform: translateY(0) ;
		opacity: 1;
	}
}
/* Start  End Animation */