body{
    margin: 0;
    padding:0;
    overflow:hidden;
    background-color: white;
    
}
.banner{
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

   
   
    
}



.banner-img{
    position: absolute;
    width: 100%;
    height:100%;

    
    

    
    

    /* overflow: hidden; */
    background: no-repeat 50% 50%;    
    /* -webkit-flow-from:calc(); */
    /* background: url(Samvedna7.PNG) 40 40; */
    /* clip: rect(100%, 100px, 200px, 0); */
    
    background-size:cover; 
    animation: animate 30s linear infinite;
    opacity: 0.5;
    transform: scale(1.2);
}
@media only screen and (max-width: 600px){
    .banner{
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    } 
}
.banner-img:nth-child(1){
    animation-name: animate-1;
    z-index: 3;
}
.banner-img:nth-child(2){
    animation-name: animate-2;
    z-index: 2;
}
.banner-img:nth-child(3){
    animation-name: animate-3;
    z-index: 1;
}
.banner-img:nth-child(4){
    animation-name: animate-4;
    z-index: 0;
}
@media only screen and (min-width: 600px){

@keyframes animate-1{
    0%{
        opacity:0.5; 
        transform: scale(1.2);      
    }
    20%{
        opacity:0.5;
        transform: scale(1);
         
    }
    31%{
        opacity: 0; 
          
    }
    80%{
        opacity:0;
        
    }
    100%{
        
        opacity: 0;
        
    }
}
@keyframes animate-2{
     0%{ 
        opacity:0;
        
       
       
    } 
    30%{
        opacity: 0;
       
        
    }
     
    31%{
        opacity:1;
        
         transform: scale(1.2);   
        
    }
    55%{
        /* position: absolute; */
       
        opecity: 1;
        
         transform: scale(1);
      
         
              
         
      
       
        
    }
    56%{
        opecity: 0;
        
        
        
    }
    57%{
        opacity:0;
        
        
       
       
        
    }
    100%{
        /* position:absolute; */
        opacity: 0;
        /* transform:scale(1.2); */
        /* background: 100% 100%; */
        /* transition: 0.5s all ease-in-out; */
        /* width: 40%; */
        /* height: 600px; */
       
    }
}
@keyframes animate-3{
    0%{
        opacity:0;
         /* transfrom:scale(1.8); */
       
    }
    56%{
        opacity: 0;
    }
    
    57%{
        opacity: 0.5;
        transform: scale(1.2);
        
        
        
    }
    
    65%{opacity: 0.5;
        transform: scale(1);
       
       
        
    }
    76%{opacity: 0;
        
        
        
    }
    77%{
        opacity: 0;
    }

    
        
    
    100%{
        
        opacity: 0;
        
    }
}
@keyframes animate-4{
    0%{
        opacity:0;
        /* transfrom:scale(1.8); */
       
    }
    60%{
        opacity: 0;
        
        
    }
    76%{
        opacity: 0;
        /* transfrom: scale(1.5); */
    }
    77%{
        opacity:0.5;
        /* transfrom: scale(1.5); */
        
       
        
        
    }
    90%{
        opacity: 0.5;
        transform: scale(1);
    }
    99%{
        opacity: 0;
    }
    100%{
        
        opacity: 0;
        
}

   
}
}




@media only screen and (max-width: 600px){
    @keyframes animate-1{
        0%{
            opacity:0.5; 
            transform: scale(1.2);  
            height: 120%;    
        }
        20%{
            opacity:0.5;
            transform: scale(1);  
            /* height: 200px;    */
            height: 100%;
        }
        31%{
            opacity: 0; 
              
        }
        80%{
            opacity:0;
            
        }
        100%{
            
            opacity: 0;
            
        }
    }
    @keyframes animate-2{
         0%{ 
            opacity:0;
            
           
           
        } 
        30%{
            opacity: 0;
           
            
        }
         
        31%{
            opacity:1;
            
             transform: scale(1.2);  
             height: 100%;  
            
        }
        55%{
            /* position: absolute; */
           
            opecity: 1;
            /* height: 80%;   */
            
            
             transform: scale(1);
          
             
                  
             
          
           
            
        }
        56%{
            opecity: 0;
            
            
            
        }
        57%{
            opacity:0;
            
            
           
           
            
        }
        100%{
            /* position:absolute; */
            opacity: 0;
            /* transform:scale(1.2); */
            /* background: 100% 100%; */
            /* transition: 0.5s all ease-in-out; */
            /* width: 40%; */
            /* height: 600px; */
           
        }
    }
    @keyframes animate-3{
        0%{
            opacity:0;
             /* transfrom:scale(1.8); */
           
        }
        56%{
            opacity: 0;
        }
        
        57%{
            opacity: 0.5;
            transform: scale(1.2);
            height: 100%;
             position: absolute;
             background-position: right -600px bottom 10px;
            
            
            
        }
        
        65%{opacity: 0.5;
            transform: scale(1);
           
           
            
        }
        76%{opacity: 0;
            
            
            
        }
        77%{
            opacity: 0;
        }
    
        
            
        
        100%{
            
            opacity: 0;
            
        }
    }
    @keyframes animate-4{
        0%{
            opacity:0;
            /* transfrom:scale(1.8); */
           
        }
        60%{
            opacity: 0;
            
            
        }
        76%{
            opacity: 0;
            /* transfrom: scale(10); */
        }
        77%{
            opacity:0.5;
            height: 100%;
            
            /* transfrom: scale(10); */
            /* background-position: right 5px bottom 10px; */

            
           
            
            
        }
        90%{
            opacity: 0.5;
            transform: scale(1);
            background-position: right 0px bottom 10px;
            
        }
        99%{
            opacity: 0;
            background-position: right 1px bottom 10px;
            transform: scale(1);
        }
        100%{
            
            opacity: 0;
            
    }
    
       
    }
    
}

    .banner-text{
        /* background-color: white; */
        
        
        /* text-align: center; */
        /* transform: translate(-50%,-50%); */
        /* padding: 1px; */
        
        /* width:220%;
        height: 200px; */
        /* border: 1px solid blue; */
        /* color: black; */
        /* margin-left: 50%; */
    }
    .banner-text h1{
        /* text-align: center; */
        position: absolute;
        top: 33%;
        left:33%;
        z-index: 50;
        text-decoration: ;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        /* text-transform: uppercase; */
        line-height:1;
        color: darkred;
        font-size:60px;
        /* margin-left: 33%; */
        text-shadow: 4px 4px black;
        
        
        
    }
    .banner-text h2{
        position: absolute;
        top: 42%;
        left:40%;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        z-index: 50;
        font-style: italic;
        font-family: cursive;
    }
    .banner-text1{
        position: absolute;
        top: 47%;
        left:33%;
        z-index: 50;
        text-decoration: overline;
    } 
    .banner-text2{
        color: blue;
        
        
        z-index: 50;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        width: 650px;
        position: absolute;
        top: 85%;
        left:33%;
        border: 1px solid black;
        border-radius: 15px;
        background-image: linear-gradient(rgb(70, 111, 224),rgb(54, 138, 198),rgb(216, 216, 225));
        font-display:initial;
        font-size: 1.2em;
        font-weight: 300px;
        font-style: italic;
        box-shadow: 7px 7px;
        padding: 5px;
    }
    .links{
        position: absolute;
        margin-top: 1%;
        margin-left: 1%;
        z-index: 50;
        font-size: 1.2em;
        color:black;
        
    }
    link{
        font-weight:bolder;
        color:black;
    }      
    audio{
         z-index:120;
        position: absolute; 
        display: none;
        
    }
       
       
@media only screen and (max-width: 600px){
    .banner-text h1{
        /* text-align: center; */
        position: absolute;
        top: 33%;
        left: 0%;
        
        z-index: 50;
        text-decoration: ;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        
        color: darkred;
        font-size:30px;
        
        text-shadow: 2px 2px black;
        padding-left: 10px;
        
        
        
    }
    .banner-text h2{
        position: absolute;
        top: 38%;
        left:0%;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        z-index: 50;
        font-style: italic;
        font-family: cursive;
        padding-left: 10px;
    }
    .banner-text1{
        position: absolute;
        top: 43%;
        
        /* width: 80%; */
        /* padding-left: 10px; */
        z-index: 50;
        display:none;
        
        
    } 
    .banner-text2{
        color: rgb(7, 7, 54);
        
        
        z-index: 50;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        width: 380px;
        position: absolute;
        top: 80%;
        left:0%;
        
        font-display:initial;
        font-size: 1.2em;
        font-weight:400;
        /* padding: 5px; */
        font-style: italic;
        /* box-shadow: 7px 7px black; */
        background-image: none;
        border: none;
        box-shadow: none;
        

}    
.links{
    position: absolute;
    margin-top: 6%;
    margin-left: 1%;
    z-index: 50;
    font-size: 1.2em;
    color:black;
}                                     
link{
    font-weight:bolder;
    color:black;
}         
    
}