*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    width: 100%;
    height: 100vh;
}

/* header-page */
header{
    margin: 0;
    width: 100%;
    height: auto;
}

/* logo-box */
header .logo-box{
    padding: 2vmin 10vmin ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(255, 91, 36);
}

header .logo-box .img-1 img{

    /* margin: 0 0vmin 0 0vmin; */
    width: 15vmin;
    height: auto;
}

header .logo-box .img-2 img{
    margin: 0;
    width: 25vmin;
    height: auto;
}

header .heading{
  
    text-align: center;
}

.heading h1{
   
    font-size: 6vmin;
    color: rgb(255, 255, 255);
}


.heading h2{
    font-size: 3vmin;
    color: rgb(255, 255, 255);
}


/*yuva-sapna*/
.yuva{
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, rgb(255, 64, 0), rgb(236, 146, 110));
}    

.yuva h2{
    font-size: 3vmin;
}

.yuva h2 span{
    color: rgb(249, 255, 82);
}

.yuva button{
    padding: 0.7vmin 2vmin;
    background-color: rgb(255, 255, 255);
    box-shadow: 0.5px 0.5px 5px rgb(103, 101, 101);
    border-radius: 10px;
    border: none;
}

.yuva button a{
    color: rgb(41, 42, 43);
    text-decoration: none;
    font-size: 4vmin;
    font-weight: bold;
}

.yuva button:hover{
  background-color: rgb(112, 110, 107);
}

.yuva button a:hover{
  color: rgb(237, 228, 228);
}

/* navbar-page */
nav{
    padding: 0.5rem 0;
    width: 100%;
    height: auto;
    background: linear-gradient(to right, rgb(255, 64, 0), rgb(236, 146, 110));
}


nav ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

nav ul li{
    padding: 0.3rem 0;
    width: 20vmin;
    list-style: none;
    background-color: rgb(250, 210, 190);
    box-shadow: 0.5px 0.5px 5px rgb(114, 102, 102);
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

nav ul li:hover{
    background-color: rgb(254, 72, 72);

}

nav ul li a{
    text-decoration: none;
    color: rgb(26, 23, 23);
    font-size: 3.2vmin;

}

nav ul li a:hover{
  color: aliceblue;
}





/* media css */


/* 1250px--1150px */
@media only screen and (min-width:1150px) and (max-width:1250px){
    .heading h1{
        font-size: 5.5vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 3vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5vmin;
    }

    .marquee .marquee-div-1 a{
        font-size: 2.7vmin;
    }

    .icon-box {
        margin-top: 0.8rem;
    }

    .icon-box a i{
        font-size: 3.8vmin;
    }

    header .logo-box .img-2 img{
        width: 22vmin;
    }
}

/* 1150px--1000px */
@media only screen and (min-width:1000px) and (max-width:1150px){
    .heading h1{
        font-size: 4.5vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 3vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5vmin;
    }

    .marquee .marquee-div-1 a{
        font-size: 2.4vmin;
    }

    .icon-box {
        margin-top: 1rem;
    }

    .icon-box a i{
        font-size: 3.8vmin;
    }

    header .logo-box .img-2 img{
        width: 20vmin;
    }
}

/* 1000px--900px */
@media only screen and (min-width:900px) and (max-width:1000px){
    header .logo-box{
        padding: 2vmin 5vmin;
    }
    .heading h1{
        font-size: 4.2vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.7vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5vmin;
    }

    .marquee .marquee-div-1 a{
        font-size: 2.2vmin;
    }

    .icon-box {
        margin-top: 2rem;
    }

    .icon-box a i{
        font-size: 3.8vmin;
    }
    
    header .logo-box .img-2 img{
        width: 18vmin;
    } 
}


/* 900px--750px */
@media only screen and (min-width:850px) and (max-width:900px){

    header .logo-box{
        padding: 2vmin 3vmin;
    }

    header .logo-box .img-1 img{
        width: 13vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 17vmin;
    }

    .heading h1{
        font-size: 3.8vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.6vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5rem;
    }

    .marquee .marquee-div-1 a{
        font-size: 2vmin;
    }

    .icon-box {
        margin-top: 2rem;
    }

    .icon-box a i{
        font-size: 3.6vmin;
    }

}



/* 850px--750px */
@media only screen and (min-width:750px) and (max-width:850px){

    header .logo-box{
        padding: 2vmin 2vmin;
    }

    header .logo-box .img-1 img{
        width: 12vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 16vmin;
    }

    .heading h1{
        font-size: 3.6vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.5vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5rem ;
    }

    .marquee .marquee-div-1 a{
        font-size: 1.7vmin;
    }

    .icon-box {
        margin-top: 4.2rem;
    }

    .icon-box a i{
        font-size: 3.6vmin;
    }

   
}

/* 750px--650px */
@media only screen and (min-width:650px) and (max-width:750px){

    header .logo-box{
        padding: 2vmin 1vmin;
    }

    header .logo-box .img-1 img{
        width: 13vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 15vmin;
        height: auto;
    }

    .heading h1{
        font-size: 3.5vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.5vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5rem;
    }

    .marquee .marquee-div-1 a{
        font-size: 1.9vmin;
    }

    .icon-box {
        margin-top: 4.4rem;
    }

    .icon-box a i{
        font-size: 3.5vmin;
    }
}


/* 650px--550px */
@media only screen and (min-width:550px) and (max-width:650px){

    header .logo-box{
        padding: 2vmin 1vmin;
    }

    header .logo-box .img-1 img{
        width: 11vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 13vmin;
        height: auto;
    }

    .heading h1{
        font-size: 3.3vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.3vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5rem;
    }

    .marquee .marquee-div-1 a{
        font-size: 2vmin;
    }

    .icon-box {
        margin-top: 4.6rem;
    }

    .icon-box a i{
        font-size: 3.5vmin;
    }
}



/* 550px--450px */
@media only screen and (min-width:450px) and (max-width:550px){

    header .logo-box{
        padding: 2vmin 1vmin;
    }

    header .logo-box .img-1 img{
        width: 10vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 11vmin;
        height: auto;
    }

    .heading h1{
        font-size: 3.2vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.1vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.5rem;
    }

    .marquee .marquee-div-1 a{
        font-size: 2vmin;
    }

    .icon-box {
        margin-top: 4.6rem;
    }

    .icon-box a i{
        font-size: 3.5vmin;
    }
}



/* 450px--300px */
@media only screen and (min-width:300px) and (max-width:450px){

    header .logo-box{
        padding: 5vmin 1vmin;
    }

    header .logo-box .img-1 img{
        width: 12vmin;
        height: auto;
    }

    header .logo-box .img-2 img{
        width: 14vmin;
        height: auto;
    }

    .heading h1{
        font-size: 3.5vmin;
    }

    .heading h2{
        margin-top: 1vmin;
        font-size: 2.1vmin;
    }

    .marquee .marquee-div-1{
        padding: 0.2rem 0.5vmin;
    }

    .marquee .marquee-div-1 a{
        font-size: 2vmin;
    }

    .icon-box {
        margin-top: 7.1rem;
    }

    .icon-box a i{
        font-size: 3.8vmin;
    }
}





/*------ members-box------- */
.section{
    margin-top: 1vmin;
    padding-top: 5vmin;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgb(237, 212, 197), rgb(255, 255, 255)); 
}

.section .members-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.members-heading h2{
    font-family: 10vmin;
    color: azure;
    text-shadow: 1px 1px 5px rgb(55, 52, 52);
}

.members-heading h1{
    font-size: 5vmin;
    color: azure;
    text-shadow: 1px 1px 5px rgb(55, 52, 52);
}





 /* grid-box */
 
 .members-box{
    margin-top: 1rem;
    padding: 0.5rem;
    width: 90%;
    height: auto;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
 }

 .members-box .box-1{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

.members-box .box-1 img{
    width: 15vmin;
    height: 17vmin;

}

.members-box .box-1 h3{
    font-size: 2vmin;
}



/* -------gallery-box-------- */

.gallery{
    margin-top: 2rem;
    padding: 1rem 0;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(215, 223, 220);
 }



.gallery .main-box{
    width: 90%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 20px;

}

.main-box .photo-box{
    
    padding: 0.8rem;
    width: 100%;
    height: auto;
    background-color: rgb(255, 103, 43);
    border-radius: 10px;
    box-shadow: 1px 1px 10px black;
    
}

.photo-box figure{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.photo-box figure img{
    width: 35vmin;
    height: 35vmin;

}

.photo-box figure figcaption{
    font-size: 3vmin;
}








/* footer-page */
.footer{
    margin-top: 5vmin;
    width: 100%;
    height: auto;
    background-color: rgb(14, 9, 9);
  
  }
  
  .footer .main-footer{
    width: 100%;
    height: auto;
    padding: 2vmin 1vmin;
    display: flex;
    justify-content: space-evenly;
  }
  
  .main-footer .box-1{
    padding: 1.5vmin 0;
    width: 30%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
  }
  
  .main-footer .box-1 h2{
    color: orangered;
    font-size: 3.5vmin;
  }

  .main-footer .box-1 a{
    text-decoration: none;
  }
  
  .main-footer .box-1 h3{
    font-size: 3vmin;
    color: rgb(255, 255, 255);
  }
  
  .main-footer .box-1 p{
    color: rgb(255, 255, 255);
    font-size: 3vmin;
  }
  
  .footer hr{
    color: rgb(255, 255, 255);
  }
  
  .footer .copy-footer{
    padding: 2vmin 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .copy-footer h1{
    color: rgb(255, 255, 255);
    font-size: 3vmin;
  }
  
  
  





/* media-page */
@media only screen and (min-width: 300px) and (max-width: 1100px) {
    .members-box{
        margin-top: 1rem;
        padding: 0.5rem;
        width: 90%;
        height: auto;
        /* border: 2px solid; */
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 10px;
        /* background-color: rgb(0, 255, 8); */
        justify-content: space-evenly;
        align-items: center;
     }
    
}




/* gallery-box */
@media only screen and (min-width: 900px) and (max-width:1100px) {
    
.gallery .main-box{
    width: 90%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;

}

.main-box .photo-box{
    
    padding: 0.8rem;
    width: 100%;
    height: auto;
    background-color: rgb(255, 103, 43);
    border-radius: 10px;
    box-shadow: 1px 1px 10px black;
    
}

.photo-box figure{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.photo-box figure img{
    width: 35vmin;
    height: 35vmin;

}

.photo-box figure figcaption{
    font-size: 2.5vmin;
}


}



@media only screen and (min-width: 700px) and (max-width:900px) {
    
    .gallery .main-box{
        width: 90%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 20px;
    
    }
    
    .main-box .photo-box{
        
        padding: 0.8rem;
        width: 100%;
        height: auto;
        background-color: rgb(255, 103, 43);
        border-radius: 10px;
        box-shadow: 1px 1px 10px black;
        
    }
    
    .photo-box figure{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .photo-box figure img{
        width: 30vmin;
        height: 30vmin;
    
    }
    
    .photo-box figure figcaption{
        font-size: 2vmin;
    }
    
    
    }





    @media only screen and (min-width: 620px) and (max-width:700px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            padding: 0.6rem;
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 25vmin;
            height: 25vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 2vmin;
        }
        
        
        }





        

    @media only screen and (min-width: 520px) and (max-width:620px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            padding: 0.6rem;
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 25vmin;
            height: 25vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 1.8vmin;
        }
        
        
        }




        

    @media only screen and (min-width: 520px) and (max-width:620px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            padding: 0.4rem;
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 22vmin;
            height: 22vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 1.5vmin;
        }
        
        
        }




        

    @media only screen and (min-width: 420px) and (max-width:520px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            padding: 0.3rem;
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 20vmin;
            height: 20vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 1.3vmin;
        }
        
        
        }




        
    @media only screen and (min-width: 320px) and (max-width:420px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            padding: 0.4rem;
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 20vmin;
            height: 20vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 1.3vmin;
        }
        
        
        }




        
    @media only screen and (min-width: 220px) and (max-width:320px) {
    
        .gallery .main-box{
            width: 90%;
            height: auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 20px;
        
        }
        
        .main-box .photo-box{
            
            
            width: 100%;
            height: auto;
            background-color: rgb(255, 103, 43);
            border-radius: 10px;
            box-shadow: 1px 1px 10px black;
            
        }
        
        .photo-box figure{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .photo-box figure img{
            width: 33vmin;
            height: 33vmin;
        
        }
        
        .photo-box figure figcaption{
            font-size: 2.2vmin;
        }
        
        
        }