.animation-container{
    position: relative;
    min-height: 500vh;
    margin-bottom: 20vh;
}

.img-container{
    width: 38%;
    z-index: -1;
    position: sticky;
    top: 15px;
    left: 60%;
}

.animation-img{
    width: 100%;
    object-fit: contain;
    margin-top: 150px;
}

.elements{
    width: 100%;
    display: flex;
   
}

.space-wrapper{
    position: absolute;
   
    padding: 5rem;
    top: 45vh;
    width: 100% !important;
}

.air-wrapper{
    
    justify-content: flex-start;
    padding: 5rem;
    position: absolute;
    top: 125vh;
    width: 100% !important;
}

.fire-wrapper{
   
    padding: 5rem;
    position: absolute;
    top: 210vh;
    width: 100% !important;
}

.water-wrapper{
    justify-content: flex-start;
  
    padding: 5rem;
    position: absolute;
    top: 285vh;
    width: 100% !important;
}

.water-wrapper1{
    justify-content: flex-start;
   
    padding: 5rem;
    position: absolute;
    top: 352vh;
    width: 100% !important;
}

.earth-wrapper{
    height: 100vh;
    padding: 5rem;
    position: absolute !important;
    bottom: 0;
    top: 418vh;
    width: 100% !important;
}

.content{
    
    width: 70% !important;
}

.element-name{
    font-size: 6rem;
}

.for-mobile{display: none;}

.hindi-name{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #AA8144;
}
.hindi-name1{
    font-family: 'Black Mango_bold';
    font-weight: 600;
    font-size: 30px;
    color: #AA8144;
}
.colorfont{
    color: #AA8144;
    font-size: 25px;
    font-weight: bold;
}
.colorfont1{
    color: #AA8144;
    font-size: 21px;
    font-weight: 500;
}
.colorfont3{
    color: #AA8144;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}
.description{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;  
}
.back1{
    background-color: #AA8144;
    display: inline-block;
    padding: 5px;
}
/* LOADER */
#loader{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    letter-spacing: 0.6rem;

}

#page{opacity: 0; transition: 1.3s;}

@media(max-width:800px){
    .for-web{display: none;}
    .for-mobile{width: 100%; object-fit: contain; display: block; position: sticky; top: 0; z-index: 10000;}
    .animation-container{min-height: 100%; margin-bottom: 0vh;}
    .content{width: 80%; text-align: center; margin: 0 auto;}
    .space-wrapper,
    .air-wrapper,
    .fire-wrapper,
    .water-wrapper,
    .earth-wrapper{padding: 0%; position: relative !important; justify-content: center; height: 100%; top: 0; margin-top: 3rem;}
    .element-name{font-size: 4rem; margin-bottom: 0;}
    .mob-space{ color: #909090;}
    .mob-air{ color: #AAC0CC;}
    .mob-fire{ color: #C17E00;}
    .mob-water{ color: #4AA9DA;}
    .mob-earth{ color: #255800;}
}