body{
     height: 100%;
     
  }
  /* For Desktop */

.box {
    position: absolute;
    width: 100%;
    height: 100%;
    justify-items: center;
    top:0;
	bottom: 0;
	left: 0;
	right: 0;
    margin: auto;
    display: grid; 
    background-image: url(/bgImageDesktop.jpg);
    background-size:100% 100%;
    background-position-x: center;
    background-repeat: no-repeat;
}

.gif{
    width:30%;
    height: 60%;
    position: absolute;
    bottom: -11%;
    z-index: 1;
    justify-content: center;
    }

.fade {
    animation: 3s fadeIn;
    animation-fill-mode: forwards;
    visibility: hidden;
    animation-timing-function: step-end;
    justify-items: center;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      visibility: visible;
      opacity: 1;
    }
  }

.item1{
    width: 12%;
    height: 25%;
    left: 10%;
    top: 50%;
    position: absolute;
    animation: item1 1.5s 1  ;
    animation-delay: 3s;
    animation-timing-function: linear;
    }
@keyframes item1 {
         0% {left:45%; top:75%;}
        30% {left:45%; top:40%;}
        70% {left:25%; top:45%;}
        100%{left:10%; top:50%;}
    }

 .item2{
    width: 12%;
    height: 25%;
    left:  20%;
    top: 30%;
    position: absolute;
    animation: item2 2.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear; 
    }    
@keyframes item2 {
    0% {left:45%; top:75%; }
    30% {left:45%; top:40%;}
    70% {left:25%; top:35%;}
    100%{left:  20%; top:30%;}
    }

.item3{
    width: 12%;
    height: 25%;
    left:  35%;
    top: 19%;
    position: absolute;
    animation: item3 2s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }   
@keyframes item3 {
    0%   {left:45%; top:75%;}
    30%  {left:45%; top:40%;}
    70%   {left:40%; top:30%;}
    100% {left: 35%; top:19%;}
    } 

.logo{
    width: 30%;
    height: 50%;
    top: -12%;
    left:35%;
    position: absolute;
    animation: logo 3s 1;
    animation-delay: 3s;
    animation-timing-function: linear;  
    }
    
@keyframes logo {
    0%   {left:35%; top:75%;}
    30%  {left:35%; top:40%;}
    70%  {left:35%; top:10%;}
    100% {left:35%; top:-12%;}
} 

.item5{
    width: 12%;
    height: 25%;
    right: 35%;
    top: 19%;
    position: absolute;
    animation: item5 2.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }
    
@keyframes item5 {
    0%   {right:45%; top:75%;}
    30%   {right:45%; top:40%;}
    70%   {right:40%; top:30%;}
    100% {right:35%; top:19%;}
} 
.item6{
    width: 12%;
    height: 25%;
    right: 20%;
    top: 30%;
    position: absolute;
    animation: item6 1.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }
    
@keyframes item6 {
    0%   {right:45%; top:75%;}
    30%   {right:45%; top:40%;}
    70%   {right:30%; top:35%;}
    100% {right:20%; top:30%;}
} 
.item7{
    width: 12%;
    height: 25%;
    right: 12%;
    top: 50%;
    position: absolute;
    animation: item7 1.5s 1  ;
    animation-delay: 3s;
    animation-timing-function: linear;
    
    }
@keyframes item7 {
        0%   {right:45%; top:75%;}
        30%   {right:45%; top:40%;}
        70%   {right:25%; top:45%;}
        100% {right:12%; top:50%;}
} 

/* .button{
    
    margin-top: 650px;
    justify-content: center;
} */




                                /* For Tablet */

@media screen and (max-width: 1080px) {

.box {
    position: absolute;
    width: 100%;
    justify-items: center;
    top:0;
	bottom: 0;
	left: 0;
	right: 0;
    margin: auto;
    display: grid; 
    background-image: url(/bgImageDesktop.jpg);
    background-size:cover;
    background-position-x: center;
    background-repeat: no-repeat;
}

.gif{
    width: 60%;
    height: 50%;
    position: absolute;
    bottom: -10%;
    z-index: 1;
    justify-content: center;
    }

.fade {
    animation: 3s fadeIn;
    animation-fill-mode: forwards;
    visibility: hidden;
    animation-timing-function: step-end;
    justify-items: center;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      visibility: visible;
      opacity: 1;
    }
  }


.item1{
    width: 12%;
    height: 12%;
    left: 5%;
    top: 37%;
    position: absolute;
    animation: item1 1.5s 1  ;
    animation-delay: 3s;
    animation-timing-function: linear;
    }
@keyframes item1 {
        0% {left:45%; top:75%;}
        30% {left:45%; top:60%;}
        70% {left:30%; top:50%;}
        100%{left:5%; top:37%;}
    }

 .item2{
    width: 12%;
    height: 12%;
    left:  20%;
    top: 30%;
    position: absolute;
    animation: item2 2.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear; 
    }    
@keyframes item2 {
    0% {left:45%; top:75%; }
    30% {left:45%; top:60%;}
    70% {left:30%; top:45%;}
    100%{left:20%; top:30%;}
    }

.item3{
    width: 12%;
    height: 12%;
    left:  35%;
    top: 28%;
    position: absolute;
    animation: item3 2s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }   
@keyframes item3 {
    0%   {left:45%; top:75%;}
    30%  {left:45%; top:60%;}
    70%   {left:40%; top:40%;}
    100% {left: 35%; top:28%;}
    } 

.logo{
    width: 60%;
    height: 42%;
    top: -5%;
    left:20%;
    position: absolute;
    animation: logo 3s 1;
    animation-delay: 3s;
    animation-timing-function: linear;  
    }
    
@keyframes logo {
    0%   {left:18%; top:75%;}
    30%  {left:18%; top:40%;}
    70%  {left:20%; top:15%;}
    100% {left:20%; top:-5%;}
} 

.item5{
    width: 12%;
    height: 12%;
    right: 35%;
    top: 28%;
    position: absolute;
    animation: item5 2.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }
    
@keyframes item5 {
    0%   {right:45%; top:75%;}
    30%   {right:45%; top:60%;}
    70%   {right:40%; top:40%;}
    100% {right:35%; top:28%;}
} 
.item6{
    width: 12%;
    height: 12%;
    right: 20%;
    top: 30%;
    position: absolute;
    animation: item6 1.5s 1;
    animation-delay: 3s;
    animation-timing-function: linear;   
    }
    
@keyframes item6 {
    0%   {right:45%; top:75%;}
    30%   {right:45%; top:60%;}
    70%   {right:30%; top:40%;}
    100% {right:20%; top:30%;}
} 
.item7{
    width: 12%;
    height: 12%;
    right: 5%;
    top: 37%;
    position: absolute;
    animation: item7 1.5s 1  ;
    animation-delay: 3s;
    animation-timing-function: linear;
    
    }
@keyframes item7 {
        0%   {right:45%; top:75%;}
        30%   {right:45%; top:60%;}
        70%   {right:25%; top:50%;}
        100% {right:5%; top:37%;}
} 


}

                                /* For Mobile */

@media screen and (max-width: 600px) {
    .box {
        position: absolute;
        width: 100%;
        justify-items: center;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: grid; 
        background-image: url(/bgImageMobile.jpg);
        background-size:cover;
        background-position-x: center;
        background-repeat: no-repeat;  
    }

    .gif{
        width: 70%;
        height: 40%;
        position: absolute;
        bottom: -8%;
        z-index: 1;
        justify-content: center;
        }
    
    .fade {
        animation: 3s fadeIn;
        animation-fill-mode: forwards;
        visibility: hidden;
        animation-timing-function: step-end;
    }
    @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          visibility: visible;
          opacity: 1;
        }
      }
    
    .item1{
        width: 18%;
        height: 12%;
        left: 20%;
        top: 25%;
        position: absolute;
        animation: item1 2.5s 1  ;
        animation-delay: 3s;
        animation-timing-function: linear;
        }
    @keyframes item1 {
            0% {left:40%; top:80%; }
            30% {left:40%; top:65%;}
            70% {left:40%; top:35%;}
            100%{left: 20%; top:25%;}
          }
    
     .item2{
        width: 18%;
        height: 12%;
        left: 20%;
        top: 40%;
        position: absolute;
        animation: item2 1.5s 1;
        animation-delay: 3s;
        animation-timing-function: ease-in; 
        }  
    @keyframes item2 {
        0% {left:40%; top:80%; }
        50% {left:40%; top:65%;}
        100%{left: 20%; top:40%;}
    }

    .item3{
        width: 18%;
        height: 12%;
        left: 20%;
        top: 55%;
        position: absolute;
        animation: item3 2s 1;
        animation-delay: 3s;
        animation-timing-function: ease-in; 
        }  
    @keyframes item3 {
        0% {left: 40%; top:80%; }
        50% {left: 40%; top:65%;}
        100% {left: 20%; top:55%;} 
    }
      
    .logo{
        width: 65%;
        height: 40%;
        left: 20%;
        top: -5%;
        position: absolute;
        animation: logo 1.5s 1;
        animation-delay: 3s;
        animation-timing-function: linear;   
        }  
    @keyframes logo {
        0% {left:20%; top:80%; }
        50% {left:20%; top:30%;}
        100% {left:20%; top:-5%;}   
    } 
    
    .item5{
        width: 18%;
        height: 12%;
        right: 20%;
        top: 25%;
        position: absolute;
        animation: item5 2s 1;
        animation-delay: 3s;
        animation-timing-function: ease-in;   
        }
    @keyframes item5 {
        0% {right:40%; top:80%; }
        50% {right:40%; top:65%;}
        100% {right:20%; top:25%;}
    } 

    .item6{
        width: 18%;
        height: 12%;
        right: 20%;
        top: 40%;
        position: absolute;
        animation: item6 2.5s 1;
        animation-delay: 3s;
        animation-timing-function: ease-in;   
        }   
    @keyframes item6 {
        0% {right:40%; top:80%; }
        50% {right:40%; top:65%;}
        100% {right:20%; top:40%;}  
    } 

    .item7{
        width: 18%;
        height: 12%;
        right: 20%;
        top: 55%;
        position: absolute;
        animation: item7 2s 1;
        animation-delay: 3s;
        animation-timing-function: ease-in;   
        }
    @keyframes item7 {
        0% {right: 40%; top:80%; }
        50% {right: 40%; top:65%;}
        100% {right: 20%; top:55%;}
    } 
    
    /* .button{
        margin-top: 580px;
        justify-content: center;
    } */
  }