@import url('https://fonts.googleapis.com/css2?family=Playwrite+CL&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.main{
    width: 100%;
    height: 100%;
    background-color: #bfbbbb;
    
    
}
.nav{
    height: 10vmax;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    padding: 3vw 5vmax;
    align-items: center;
    font-size: 1.5vmax;
    background-color:rgb(60, 65,94) ;    
    position: fixed ;
    left: 0px;
    top:0px;
    z-index: 1000;  
    margin-bottom: 3vh;         

}
.overlap{
    height: 20vmin;
    width: 100%;
}
.nav ul{
    list-style-type: none;
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.nav a{
    text-decoration: none;
    color:white;
    padding: 1.2vh;

}
nav a:active{
    color: black;
    background-color: white;
}
nav a:hover{
    border-bottom: 2px solid white;
    color: orangered;
    border-color:orangered ;
   
}
.logoimg{
    background-image: url(./Asset/logo.jpg);
    background-size: cover;
    background-position:25% ;
    width: 16vmax;
    height: 16vmin;
    border-radius: 50%;
    box-shadow: 3px 3px 7px;
   
}
nav{
    width: 80%;
}
.sectwo{
    background-image: url(./Asset/homebgimage.jpg);
    width: 100%;
    height: 65%;
    background-position: center;
    background-size: cover;
    position: relative;
    margin-bottom: 3vh;
    background-color: #bfbbbb;
}
.wlcm{
    position: absolute;
    width:35vmax;
    height:30vmin ;
    bottom: -10%;
    left: 10%;
   color: white;
   background-color: #738598;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 2.5vmax;
   line-height: 2.8vmax;
   border-radius: 15px;
   opacity: 0;
   transform: translateY(100%);
   animation:slideUp 1s forwards;
   font-size: 1.6vmax;

}
.wlcm h1{
    font-size: 3vmax;
    font-weight: 300px;
}
@keyframes slideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }}


.wlcm span{
    font-size: 2vmax;
    font-weight: 300px;
    
    font-weight: bold;
    
    -webkit-text-stroke: 2px #fff;
    -webkit-text-stroke-width: 0.5px;
    color:rgb(163, 237, 237);
    
}
.secthree{
    
    padding: 2vmax 4vmax;
    
    width: 100%;
    height: 82%;
    display: flex;
     align-items: center;
    justify-content: space-between;
    background-color: #bfbbbb;
   
    
}
.secthree p,.secfour p{
    font-size: 1.3vmax;
}
.pmsg{
    display: flex;
    flex-direction: column;
    padding: 2vmax;
    border-radius: 15px;
    width: 65%;
    height: 100%;
    justify-content: space-between;
    line-height: 2.5vmax;
    background-color:#f4a261;
    font-size: 1.2vmax;
    }
    .pmsg h1,.contexth1{
        margin-bottom: 2vmax;
    }
    

.pplimg{
    background-image:url(./Asset/pplimage.jpg) ;
    background-position: center;
    background-size: cover;
    width:30%;
    height: 80%;
    float: right;
    border-radius: 15px;
    box-shadow: 5px 5px 10px;
}
p span{
    font-size: 1.8vmax;
    font-weight: bold;
}


.secfour{
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    
    justify-content: space-between;
    padding: 2vmax 4vmax;
    background-color: #bfbbbb;
   
}
.hphoto{
    background-image: url(./Asset/hphoto.jpg);
    background-size: cover;
    background-position: center;
    width:80%;
    height:65%;
    position:relative; 
    margin-bottom: 7vh;
    z-index: 10;
    border-radius: 15px;
 border: 5px solid #4a90a4;
   
    
}                                                   
.hphoto2{
    background-image: url(./Asset/hphoto2.jpg);    
    background-size: cover;
    background-position: center;
    width: 80%;
    height: 80%;
    position:absolute;
    left: 70%;
    bottom: -40%;
    z-index:-1;
    border-radius: 15px;
    border: 5px solid #4a90a4;
    
   

  
}
.context{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2vw;
    line-height: 2.5vmax;
    background-color:#4a90a4;
    border-radius: 15px;

}
.hcollage{
  
    padding: 2vmax;
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
}
.secthree h1,.secfour h1{
    font-size: 2.5vmax;
}
footer{
    display: flex;
    width: 100%;
    height:15vmax;
    padding:2vmax 4vmax;
    color: white;
    background-color:rgb(60, 65,94) ; 
    align-items: center;
    justify-content: space-evenly;
}
.flinks a {
    text-decoration: none;
   color: white;
    font-size: 1.6vmax;
}
.flinks a:hover{
    color: black;
     border-bottom: 1px solid black;
}
.flinks ul{
    height: 12vmax;
    width: 100%;
    justify-content: space-around;
    list-style-type: none;
    
}
.flinks{
    width: 100%;
    height: 75%;
    display: flex;
    align-items: center;
    
}
.add{
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    font-size:1.4vmax ;
}



















/*Responsive*/
@media screen and (max-width:500px){


    .nav{
        
        justify-content: space-between;
        height: 20%;
        width: 100%;
        font-size: 1.6vmax;
        padding: 2vh;

    }
    .overlap{
        height: 25%;
    }
    nav   {
       
        width: 40%;
        height: 100%;
    }
    nav ul{
   flex-direction: column;
   width: 100%;
   height: 100%;
   justify-content: space-between;
   align-items: center;
   

    }
   
    .nav a{
        padding: 0;
    }
    .logoimg{
        width: 40vw;
        height: 15vh;
    }
    .wlcm{
        height:40vmin;
        bottom: 7%;
    }
    .secthree{
       flex-direction: column;
       padding: 2vmax ;
       height: 100%;
       justify-content: space-between;
       
       
    }
    .pmsg{
        width: 100%;
        height: 80%;
    }
    .pplimg{
        width: 80%;
        height: 30%;
    }
    .secfour{
        flex-direction:column;
       padding: 2vmax;
        height: 92%;
        font-size: 1.7vmax;
    }
    .context{
        width: 100%;
        height: 70%;
        justify-content: space-evenly;
        
    }
    .hcollage{
        width: 100%;
        height: 50%;
       
    }
    .hphoto{
        width: 75%;
        height: 65%;
    }
    .hphoto2{
        width: 80%;
        height: 80%;
    }
    .secthree p,.secfour p{
       
font-size: 1.7vmax;
    }
    footer{
        height: 20vmax;
        padding: 2vmax;
    }
    .add{
        flex-direction: column;
        justify-content: space-between;
        height: 80%;
    }
    .flinks ul{
        height: 18vmax;
    }
    

}






/*css for AboutUs Page*/
.history{
    padding:2vmax 4vmax ;
    width: 100%;
    height: 65%;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    background-color: rgb(148, 144, 163) ;
  

}
.history h1{
    font-size: 2.4vmax;
    
}
.hcontext{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    height: 100%;
    line-height: 2.5vmax;
    font-size: 1.2vmax;
}
.hisimage{
    background-image: url(./Asset/hisimage4.jpg);
    width: 40%;
    height: 100%;
    background-position: center;
    background-size: cover;
   position: relative;
   border-right: 2vmax solid rgb(60, 65,94);
   border-bottom: 2vmax solid rgb(60, 65,94);
   border-radius: 5%;
   
   
  
}

.hisimage:hover{
    background-image: url(./Asset/hisimage2.jpg);

}
.loc{
    width: 100%;
    height: 70%;
    padding: 2vmax 4vmax;
    line-height: 2.5vmax ;
    background-color: white;
    display: flex;
    background-color:rgb(51, 99, 103)  ;
}
video{
    height: 100%;
    width: 40%;
    object-fit: cover;
    border-radius: 1%;
    box-shadow: 10px 10px 20px;
    
    
}
.vcontext{
   height: 100%;
   width: 60%;
   padding: 2vmax;
   line-height: 2.5vmax;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   text-align: justify;
}
.mandv{
    height: 68%;
    width: 100%;
    justify-content: space-between;
    display: flex;
     padding: 2vmax 4vmax;
     align-items: center;
     background-color: rgb(151, 174, 160);
    

}
.mandvcon{
    height: 100%;
    width: 60%;
    display: flex;
    flex-direction: column;
    line-height: 2.5vmax;
    justify-content: space-between;
   
}
.asm{
    background-image: url(./Asset/mandvimg.jpg);
    width: 35%;
    height: 90%;
    background-position: center;
    background-size: cover;
    border-left: 2vmax solid rgb(60, 65,94);
    border-top: 2vmax solid rgb(60, 65,94);
    border-radius: 5%;
    
}
.jus{
    display: flex;
    padding: 2vmax 4vmax;
    width: 100%;
    height: 40%;
    align-items: center;
    justify-content: space-between;
    background-color: beige;
    
}
.juscon{
    width: 60%;
    height: 100%;
    line-height: 2.5vmax;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}
.jusimg{
    width: 30%;
    height: 70%;
    background-image: url(./Asset/jus.jpeg);
    background-position: center;
    background-size: cover;
    border-radius: 5%;
}



/*Media Queries for AboutUs*/
@media screen and (max-width:500px) {
    .mandvcon,.juscon,.hcontext,.vcontext {
        font-size:1.7vmax ;
    }
    .history{
      height: 75%;
      padding: 2vmax;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    }
    .hcontext{
        width: 100%;
        height: 50%;
        font-size: 1.7vmax;
    }
    .hisimage{
        width: 95%;
        height:35% ;
    }
    .loc{
        flex-direction: column;
        padding: 2vmax;
    }
    .loc video {
        width: 100%;
        height: 50%;

    }
    .vcontext{
    width: 100%;
    font-size: 1.7vmax;
    
    
}
.mandv{
    flex-direction: column;
    height: 85%;
    justify-content: space-between;
    padding: 2vmax;
}
.mandvcon{
    width: 100%;
    height: 60%;
    font-size: 1.7vmax;
   
}
.asm{
    width: 100%;
    height: 35%;
}
.jus{
    flex-direction: column;
    height: 48%;
    padding: 2vmax;
}
.juscon{
    width: 100%;
    height: 55%;
    justify-content: space-between;
    font-size: 1.7vmax;
}
.jusimg{
    width: 100%;
    height: 35%;
}




}





/*Css for Facility & Resources*/


.fcl{
    width: 100%;
    height: 80%;
    background-image: url(./Asset/hisimage3.jpg);
    background-position: center;
    background-size: cover  ;
    position: relative;
}
.fclcon{
    position: absolute;
    width: 50%;
    height: 50%;
    bottom: 0;
    left: 50%;
    background-color: white;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    padding: 2vmax;
    background-color:rgb(60, 65,94);
    color: white;
    font-size: 1.2vmax;
    line-height: 2.5vmax;
transform: translateY(100%); 
opacity: 0;
animation: slideUp 1s forwards;
    
   
}





.fclcon h1 ,.afcl h1,.sss h1{
    font-size: 2.4vmax;
    margin-bottom: 2vmax;
}
.afcl{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 180%;
    padding: 2vmax 4vmax;
    justify-content: space-between;
    font-size: 1.2vmax;
    line-height: 2.5vmax;
    background-color: rgb(190, 174, 200);
}

.cs{
    width: 100%;
    height: 5%;
}
.slab{
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 1.2vmax;

}
.slabimg{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 70%;

}
.imgone,.imgtwo,.imgthree{
    width: 28%;
    height:auto;
    border-radius: 10%;
    border: 5px solid rgb(171, 162, 176);
    box-shadow: 5px 5px 12px;
}
.imgone{
background-image: url(./Asset/imgone.jpg);
background-position: center;
background-size: cover;
}
.imgtwo{
    background-image: url(./Asset/imgtwo.jpg);
background-position: center;
background-size: cover;

}
.imgthree{
    background-image: url(./Asset/imgthree.jpg);
    background-position: center;
    background-size: cover;
}
.clab{
    display: flex;
    width: 100%;
    height: 30%;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2vmax;
}
.clabimg{
    background-image: url(./Asset/clabimg.jpg);
    width: 35%;
    height: 80%;
    background-position: center;
    background-size: cover;
    border-radius: 10%;
    border: 5px solid rgb(171, 162, 176);
    box-shadow: 5px 5px 12px;
}
.clab p {
    width: 55%;
}
.mroom{
    display: flex;
    width: 100%;
    height:30% ;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2vmax;
}
.mroom p{
    width: 55%;

}

.mimg{
    width:35% ;
    height: 80%;
    background-image: url(./Asset/mimg.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10%;
    border: 5px solid rgb(171, 162, 176);
    box-shadow: 5px 5px 12px;
    
}
.mdroom{
    width: 100%;
    height:10% ;
    font-size: 1.2vmax;
}
.sss{
width: 100%;
height: 35%;
display: flex;

justify-content: space-between;
padding: 2vmax 4vmax;
font-size: 1.2vmax;
background-color: rgb(144, 150, 185);
}
.ssscon{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 2.5vmax;
    font-size: 1.2vmax;

}
.sss ul{
    list-style-type: square;
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}








/*media queries for Facility and Resource*/


@media screen and (max-width:500px){
.fclcon,.ssscon,.mroom,.slab,.clab,.cs,.mdroom,.sss li{
    font-size: 2vmax;
}
.fclcon{
    left: 30%;
    width: 70%;
    font-size: 1.7vmax;
}
.cs{
    font-size: 1.7vmax;
}
.slab{
    height: 90%;
    font-size: 1.7vmax;
    justify-content: space-around;
}
.slabimg{
    flex-direction: column;
    height: 80%;
    justify-content: space-between;
    align-items: center;
   
}
.imgone,.imgtwo,.imgthree{
    width: 95%;
    height: 30%;
}
.afcl{
    height: 250%;
    padding: 2vmax;
 
}
.clab p{
    font-size: 1.7vmax;
    width: 100%;
}
.clab{
    flex-direction: column;
    height: 30%;
    

}
.clabimg{
  width:95% ;
  height: 55%;
}
.mroom{
    flex-direction: column;
    height: 30%;
    justify-content: space-around;
}
.mroom p{
    width: 100%;
    font-size: 1.7vmax;
}
.mimg{
    width: 95%;
    height: 55%;
}
.sss{
    height: 40%;
    padding: 2vmax;
   
   
}
.ssscon{
    font-size: 1.7vmax;
    width: 70%;
    justify-content: space-evenly;
   
}
.sss ul{
    height: 80%;
    width: 40%;
   
}
.sss ul li{
    font-size: 1.7vmax;
}
.mdroom{
    font-size: 1.7vmax;
}

}


















































/*css for Act and Achievements*/
.Actv{
    width: 100vw;
    height: 150%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: #bfbbbb;
    padding: 2vmax;

}
.Actv p{
    width: 60%;
    height:15% ;
    padding: 1vmax;
    font-size: 1.2vmax;
    line-height: 2.5vmax;
   box-shadow: 5px 5px 15px;

}

.right{
    background-color: rgb(42, 195, 195);
    margin-left: 40%;
    border-radius: 20px 0px 0px 20px;
    transform: translateX(60%);
    animation: slideside 1s forwards;
    opacity: 0;
} 
@keyframes slideside {
    to {
      opacity: 1;
      transform: translateX(0);
    }}


.left{
    background-color: rgba(56, 9, 104, 0.288);
    margin-right: 40%;
    border-radius: 0px 20px  20px 0px ;
    transform: translateX(-60%);
    animation: slideside 1s forwards;
    opacity: 0;
    
}
.intro{
    width: 100%;
    height: 20%;
     line-height: 2.5vmax;
     font-size: 1.2vmax;
    padding: 2vmax 4vmax;
    display: flex;
    
    justify-content: space-between;
}
.intro h1{
    font-size: 2.4.vmax;
}
.intro p{
    box-shadow: none;
}
.acvm h1{
    font-size: 2.4vmax;
    border-bottom: 1px solid black;

}
.acvm{
    width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 70%;
align-items: center;
padding: 2vmax 4vmax;
font-size: 1.2vmax;
background-color: #5fa44a;
}
.acvm ul{
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 100%;
    align-items: center;
    justify-content: space-between
    ;
    font-weight: bold;
}


/*Media Queries for */

@media screen and (max-width:500px){
   .Actv p,.acvm ul {
    font-size: 1.7vmax;


}
.Actv{
    height: 180%;
    justify-content: space-around ;
    padding: 2vmax;
    
}
.intro p{
    width: 50%;
    font-size: 1.7vmax;

}
.intro h1{
    width: 50%;
}
.intro{
    height: 15%;
    padding: 0;
    justify-content: space-between;
    
    
}
.intro h1 {
    width: 30%;
}
.Actv p{
    padding: 2vmax;
    width: 80%;
    height: 15%;
    font-size: 1.7vmax;
}
.right{
    margin-left: 20%;
}
.left{
    margin-right: 20%;
}

.acvm{
    height: 60%;
}



}



/*Css for Contact Us */
.contacts{
    display: flex;
    width: 100vw;
    height: 80vh;
    
    padding: 2vmax 4vmax;
}
.ads{
    padding: 2vmax 4vmax;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 50vw;
    height: 45vh;
    font-size: 1.2vmax;
    line-height: 3vmax;                                                                                                                                           

}

.ads h1{
    font-size: 2.4vmax;
}
iframe{
    width: 70vw;
    height: 70vh;
    border-radius: 10%;
}




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

    .contacts{
        
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 2vmax;
    }
    iframe{
        width: 100%;
        height: 70%;
        transform: translateX(-100%);
        opacity: 0;
        animation: slideside 1s forwards;
    }
    .ads{
        width: 100%;
        height: 30%;
    }
}



@media screen and (max-width:500px){
    html,body{
        font-size: 1.7vmax;
    }
    html h1 , body h1{
        font-size: 1.9vmax;
    }
}