body {
    margin: 0;
    height: 100vh;
    /* background-color: #333; */
    max-width: 100vw;
    font-size: 16px;
   }
   .plane {
    display: flex;
justify-content: center;
align-items: center;

    position: relative;
  
    margin-top: 0vh;
/* margin-left: 10%; */

    
  }
   .hom{
    width:30%;
     height: auto;
   }
   
   .php{
    width:30%; 
    height: auto;
   }
  
   .word{
    width:30%; 
    height: auto;
   }
   

   .cont{
    width:30%; 
    height: auto;
   }
   
    
   
   
   
  

.wrapper{
    /*           background-image:url(flower.png);*/
                   background-repeat: no-repeat;
               -webkit-background-size:cover;
               background-size: cover;
               position: absolute;
                top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               /* min-height: 800px; */
              
           }
           .leaves{
               text-align: center;
           }
           .leaves span{
               display: inline-block;
               width: 20%;
               opacity: 0;
    
               margin: -344px -400px -550px 0;
               animation: animate 10s infinite ease-in-out;
               animation-iteration-count: 3;
                
           }
           .leaves span:nth-child(3n+2){
               animation-delay: 0s;
           }
            .leaves span:nth-child(2n+5){
               animation-delay: 4s;
           }
           .leaves span:nth-child(5n+6){
               animation-delay: 8s;
           }
           .leaves span:nth-child(3n+8){
               animation-delay:2s;
           }
           .leaves span:nth-child(7n+3){
               animation-delay: 6s;
           }
           .leaves span:nth-child(4n+3){
               animation-delay: 3s;
           }
           .leaves span:nth-child(3n+7){
               animation-delay: 9s;
           }
            .leaves span:nth-child(3n+7){
               animation-delay: 5s;
           }
            .leaves span:nth-child(7n+10){
               animation-delay: 7s;
           }
           @keyframes animate{
               0% {
                  
  
                   opacity: 1;
                   transform: translate(0, 0) ;
               }
               
              
                100% {
                  
   
                    opacity: 0;
                   transform: translate(120px, 700px) ;
               } 
               
           }

           .navigation .home{
            display: inline-block;
            width: 20%;
            top:-2000px;
            animation: animate2 10s infinite ease-in-out;
            animation-iteration-count: 1;
            animation-delay: 0s;
            
             
        }

        @keyframes animate2{
            0% {
               
                transform: translateY( 0) ;
            }
             100% {
                
                transform: translateY(10vh) ;
            } 
            
        }

        .navigation .phpe{
            display: inline-block;
            width: 20%;
            top:-3000px;
            animation: animate3 10s infinite ease-in-out;
            animation-iteration-count: 1;
            animation-delay: 0s;
            
             
        }

        @keyframes animate3{
            0% {
               
                transform: translateY( 0) ;
            }
             100% {
                
                transform: translateY(0vh) ;
            } 
            
        }

        .navigation .contact{
            display: inline-block;
            width: 20%;
            top:-2000px;
            animation: animate4 10s infinite ease-in-out;
            animation-iteration-count: 1;
            animation-delay: 0s;
            
             
        }

        @keyframes animate4{
            0% {
               
                transform: translateY( 0) ;
            }
             100% {
                
                transform: translateY(-15vh) ;
            } 
            
        }

        .navigation .wordp{
            display: inline-block;
            width: 20%;
            top:-2000px;
            animation: animate5 10s infinite ease-in-out;
            animation-iteration-count: 1;
            animation-delay: 0s;
            
             
        }

        @keyframes animate5{
            0% {
               
                transform: translateY( 0) ;
            }
             100% {
                
                transform: translateY(-30vh) ;
            } 
            
        }


          /* ***************************************
        SMALL SCREENS 
******************************************         */

 @media only screen and (max-width:580px) and (max-height:1000px){

    .leaves span{
        display: inline-block;
        width: 20%;
        opacity: 0;
/*           height: 80px;*/
/*           background-image:url(flower.png);*/
        margin: -144px -200px -350px 0;
        animation: animate 10s infinite ease-in-out;
        animation-iteration-count: 5;
         
    }
    .plane {
        
      
        margin-top: 0vh;
    /* margin-left: 10%; */
    
        
      }
      

 }

 /* * ***************************************
        mid SCREENS 
******************************************  */ 
@media only screen and (min-width:580px) and (max-width:1000px) and (min-height:1000px){
    
    .leaves span{
        display: inline-block;
        width: 20%;
        opacity: 0;
/*           height: 80px;*/
/*           background-image:url(flower.png);*/
        margin: -344px -300px -450px 0;
        animation: animate 10s infinite ease-in-out;
        animation-iteration-count: 5;
         
    }
    .plane {
        
      
        margin-top: 0vh;
    /* margin-left: 10%; */
    
        
      }
      
    
}


@media only screen and (min-width:1000px) and (max-width:1440px)and (max-height:1000px){

    .plane {
        
      
        margin-top: -8vh;
  
    
        
      }

      
   
    }

    

    @media only screen and (min-width:1441px){
        

        .leaves span{
            display: inline-block;
            width: 20%;
            opacity: 0;
 
            margin: -100px -200px -50px 0;
            animation: animate 15s infinite ease-in-out;
            animation-iteration-count: 3;
             
        }

    @keyframes animate{
        0% {
           

            opacity: 1;
            transform: translate(0, 0) ;
        }
        
       
         100% {
           

             opacity: 0;
            transform: translate(120px, 2000px) ;
        } 
        
    }

    .plane {
        display: flex;
    justify-content: center;
    align-items: center;
    
        position: relative;
      
        margin-top: 30vh;
    /* margin-left: 10%; */
    
        
      }
       
    
}
    /* ****************************Surface Duo******** */
    @media only screen and (width:720px) and (height:540px){
        .plane {
        
      
            margin-top: 0vh;
      
        
            
          }
    
          
    

    }
/* ************************************Galaxy fold*******************8 */
    @media only screen and (width:717px) and (height:512px){
        .plane {
        
      
            margin-top: 0vh;
      
        
            
          }
    
         

    }

  /* .light {
   
    margin: 0;
	padding: 0;
	display: flex;
    
    
  } */
  .heading {
	
    height: 100vh;
	background: url(../../photo/sky2.png);
	
    background-position:center;
    
	animation: driving 50s linear infinite;
}


@keyframes driving {
	from { background-position: bottom left; }

	to { background-position: bottom right; }
}

.light {
	margin: 0;
	padding: 0;
	display: flex;
    position: absolute;
    margin-left: -36%;
}
  .lighting {
	list-style: none;
	color: #484848;
	font-size: 2.5vw ;
    /* margin-top: -15px; */
	/* letter-spacing: 5px; */
	animation: lighting 1.4s linear infinite;

}

@keyframes lighting {
	0% {
		color: #484848;
		text-shadow: none;
	}

	90% {
		color: #484848;
		text-shadow: none;
	}

	100% {
		color: #fff900;
		text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
	}
}

ul li:nth-child(1) {
	animation-delay: 0
}

ul li:nth-child(2) {
	animation-delay: 0.1s
}

ul li:nth-child(3) {
	animation-delay: 0.2s
}

ul li:nth-child(4) {
	animation-delay: 0.3s
}

ul li:nth-child(5) {
	animation-delay: 0.4s
}

ul li:nth-child(6) {
	animation-delay: 0.5s
}

ul li:nth-child(7) {
	animation-delay: 0.6s
}

ul li:nth-child(8) {
	animation-delay: 0.7s
}