@font-face {
    font-family: jose1;
    src: url('font/Jose1.ttf');
    src: url('font/Jose2.ttf');
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}
body{
      user-select: none;
}

.stud{
    position: relative;
    top:0;
    left: 0;
    right: 0;
    max-width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap:nowrap;
   
}

.stud > .stud1{
    position: absolute;
    top:0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: rgb(33,38,72);
   
    
}

.stud1 > .stud_work{
    position: absolute;
    color:white;
    width: 70%;
    height: 50%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    
}

.stud1 > .stud_work >h1{
    font-size: 30px;
    color:white; 
    font-family: jose1;; 
    }

    .stu1 > .stu_work >  p{
        font-size: 16px;
    }    


.stud > .stud2{
    position: absolute;
    top:0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: aliceblue;
   
 
}

.stud2 >img{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


 /*projects ---------------------------*/

.student-pro{
    height: 60px;
    max-width: 100%;
 }

 .project-nav{
    height: 60px;
    width: 90%;
    background-color:rgb(33,38,72);
    margin:15px auto;
    border-radius: 20px;
}

.project-nav>ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style-type: none;
    flex-wrap: nowrap;
    height: 100%;
    font-size: 18px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color:white; 
    }

.project-nav>ul>li{
   cursor: pointer;
   transform: translateY(0);

}

.project-nav>ul>li{
    cursor: pointer;
    color:white;
    position: relative;
    padding-bottom: 5px;
 }

 .project-nav>ul>li::before{
    position: absolute;
    bottom: 0;
    content: '';
    width: 40%;
    height: 4px;
    border-radius: 10px;
    background-color: rgb(238, 244, 244);
    transition: all 0.5s ease-in;
 }

 .project-nav>ul>li:hover{
    color:orange;
 }

 .project-nav>ul>li:hover::before{
    width: 100%;
    
 }

 

/*project ----------------*/

.project{
    width: 95%;
    height: 3900px;
    background-color: rgb(17, 13, 10);
    margin: 20px auto;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-bottom: 5px;  
 }

 /* graphic designing ---------------------*/
 .grp_des{
    width: 95%;
    height: 4300px;
    background-color: rgb(17, 13, 10);
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap;
    border-radius: 20px;
    gap: 15px;
    padding-top: 20px;
   
}


.gd{
    width: 400px;
    height: 400px;
    background-color: rgb(80, 13, 161);
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 5px white;
    margin-bottom: 10px;
   
    
}


.gd > .gdheading{
    position: absolute;
    display: flex;
    gap:20px;
    align-items: center;
    top:0;
    left: 0;
    width: 100%;
    height: 12%;
    background-color:  rgba(230,218,245,1.0);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

.gd > .gdheading >img{
    width:35px;
    height:35px;
    margin-left:10px;
    border-radius: 5px;
 }

.gd > .gdheading > h3{
        font-size: 18px;
    
 }

.gd > .gdimg{
    position: absolute;
    top:12%;
    left: 0;
    width: 100%;
    height: 88%;
   
}

.gd > .gdimg > img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


.gd1{
    width: 400px;
    height: 380px;
    background-color: rgb(80, 13, 161);
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 5px white;
    
}

.gd2{
    width: 550px;
    height: 350px;
    background-color: rgb(80, 13, 161);
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 5px white;
}


.a4{
    width: 400px;
    height: 600px;
    background-color: rgb(80, 13, 161);
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 5px white;
}

.ai{
    width: 630px;
    height: 420px;
    background-color: rgb(80, 13, 161);
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 5px white;
}
.gd6{
    width:420px;
    height:450px;
}







/*-----------excel---------------------*/

.pro-adex{
    width: 90%;
    height: 3800px;
    background-color: rgb(17, 13, 10);
    margin: 20px auto;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-bottom: 5px;  
   }


 .pro{
    height: 550px;
    width: 1000px;
    background-color: rgba(230,218,245,1.0);
    position: relative;
    text-align: center;
    border-radius: 10px;   
   }
  
 .pro>img{
    width:40px;
    height:40px;
    position: absolute;
    margin-top:10px;
    left:10px;
    display: inline;
   
 }

 .pro>h3{
    position: absolute;
    left:80px;
    margin-top: 20px;
    font-size: 18px;
 }
 h3>a{
    text-decoration: none;
    color:black;
    cursor: pointer;
    transition: all 0.5s;
 }

 h3:hover{
     color:rgb(218, 121, 37);
    
}

.work{
    position: absolute;
    top:60px;
    left: 0;
    width:100%;
    height: 100%;
    background-color: antiquewhite;
    
}

.work > img{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}




.bill{
    height: 900px;
}


.pro_mis{
    width: 90%;
    height: 4000px;
    background-color: black;
    margin: 20px auto;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-bottom: 5px;
    position: relative;  
   }


.pbihra{
    height: 600px;
}

.pbi1{
    height: 900px;
}

.ppt{
    
    height:600px ;
    margin-bottom: 50px;
}




.p8{
    width:500px;
}

.web_des{
    width: 93%;
    height: 500px;
    background-image: url('images/wbg.jpg');
    background-size: cover;
    background-color: rgb(17, 13, 10);
    margin: 20px auto;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-bottom: 10px;
    position: relative;
} 

.web_des::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
    border-radius: 20px;
}

.web1{
    width:300px;
    height: 270px;
    background-color: #f4f1ef;
}

.frame{
    width:300px;
    height: 215px;
    position: relative;
    top:55px;
    left: 0;
    border-bottom: 20px;
    background-color:rgb(192, 174, 223);
           
}

.frame > a> img{
    margin-top: 20px;
    width:150px;
    height: 150px;
}

/* responsive -----------------------*/

@media (max-width:1350px){

.grp_des{
    width: 90%;
    height: 5500px;
}

}



@media (max-width:1280px){

    .stu1 > .stu_work{
        width: 80%;
    }
    .stud1 > .stu_work >h1{
         font-size: 25px;
         }
         .web_des{
            width: 93%;
            height: 700px;
        }   

}

@media (max-width:1240px){
    .grp_des{
        width: 90%;
        height: 6200px;
    }

}

@media (max-width:1225px){

    .stud1 > .stud_work{
       width: 80%;
    }
    .pro_mis{
        width: 95%;
        height: 4200px;
           
       }
       .grp_des{
        width: 85%;
        height: 6200px;
    }
}
  
@media (max-width:1150px){

    .stud1 > .stud_work{
       width: 80%;
    }
   
       .pro{
        height: 550px;
        width: 900px;
        
       }

       .pbi1{
        height: 900px;
        margin-bottom: 20px;
    }
    .web1{
        width:300px;
        height: 270px;
        background-color: #f4f1ef;
    }
    .grp_des{
        width: 85%;
        height: 7200px;
    }


}

@media (max-width:1050px){
    .stud{
        max-width: 100%;
        height: 500px;
}

       .pro{
        height: 550px;
        width: 800px;
        
       }

       .pro_mis{
        width: 95%;
        height: 3700px;
           
       }
    

}



@media (max-width:1040px){

    .stud{
        max-width: 100%;
        height: 450px;      
    }
    .stud1 > .stud_work >h1{
        font-size: 25px;
        color:white;  
        }

    .stud1 > .stud_work >  p{
        font-size: 14px;
    }
    
    .grp_des{
        width: 95%;
        height: 7000px;
       
       
    }

    .pro{
     height: 550px;
     width: 800px;
     
    }
    .web1{
        width:300px;
        height: 270px;
        background-color: #f4f1ef;
    }

}

@media (max-width:920px){

    .stud{
        max-width: 100%;
        height: 400px;
    }

    .project-nav>ul{
         font-size: 16px;
    }

    .grp_des{
        width: 97%;
        height: 7000px;
       
    }


    .pro-adex{
            width: 95%;
            height: 2700px;
           
           } 
           .pro{
            height: 400px;
            width: 600px;
            
           }
     
           .web1{
               width:300px;
               height: 270px;
               background-color: #f4f1ef;
           }
           .pro_mis{
            width: 95%;
            height: 2800px;
               
           }
       
           .pbihra{
            height: 400px;
        }
        
        .pbi1{
            height: 500px;
        }
        
        .ppt{
            
            height:400px ;
            margin-bottom: 50px;
        }
            


}



@media (max-width:900px){
    .stud{
        max-width: 100%;
        height: 300px;
    }
    
     
     
    .stud1 > .stud_work >h1{
        font-size: 25px;
        color:white;  
        }

    .stud1 > .stud_work >  p{
        font-size: 14px;
    }    

    
}


@media (max-width:900px){
    .grp_des{
        width: 90%;
        height: 10500px;
       
    }
}
@media (max-width:745px){
    .stud1 > .stud_work{
       width: 90%;
    }

  }



@media (max-width:700px){
    .stud{
        max-width: 100%;
        height: 700px;
        flex-wrap:wrap;
        flex-direction: column;
       
    }

    
.stud > .stud1{
     width: 100%;
    height: 50%;
   
   
    
}
.stud > .stud2{
    position: absolute;
    top:50%;
    left: 0;
    width: 100%;
    height: 50%;
   
  }

  .stud1 > .stud_work{
    width: 70%;
 }

 .project-nav{
    height: 50px;
    width: 95%;
    margin:10px auto;
   
}
 .project-nav>ul{
    font-size: 14px;
}

.ai{
    width: 500px;
    height: 350px;
   
}

.gd2{
    width: 450px;
    height: 300px;
    
}

.gd6{
    width:350px;
    height:380px;
}

}


@media (max-width:670px){
  
    .pro-adex{
        width: 95%;
        height: 2300px;
       
       } 
   
    .pro{
        height: 300px;
        width: 500px;
        
       }

       .web1{
        width:250px;
        height: 250px;
        background-color: #f4f1ef;
    }
    .frame{
        width:250px;
        height: 200px;
        position: relative;
        top:50px;
       
    }
    
   
    
       .pro>img{
        width:30px;
        height:30px;
        position: absolute;
        margin-top:10px;
        left:10px;
       
       
     }
      .pro>h3{
        position: absolute;
        left:80px;
        margin-top: 20px;
        font-size: 16px;  
     }
   
    .work{
        top:50px;
        left: 0;
        
        
    }
       .pro_mis{
        width: 95%;
        height: 2600px;
           
       }


       .pbihra{
        height: 300px;
    }
    
    .pbi1{
        height: 400px;
    }
    
    .ppt{
        
        height:350px ;
        margin-bottom: 50px;
    }
     
   
    }

    @media (max-width:670px){

        .web_des{
            width: 95%;
            height: 1200px;
        }
        .web1{
            width:300px;
            height: 250px;
            background-color: #f4f1ef;
        }
        .frame{
            width:300px;
            height: 200px;
            position: relative;
            top:50px;
          
        }
    }


    @media (max-width:550px){

        .ai{
            width: 400px;
            height: 300px;
           
        }
        .pro-adex{
            width: 95%;
            height: 2000px;
           
           } 
       
        .pro{
            height: 280px;
            width: 400px;
            
           }
           .web1{
            width:300px;
            height: 250px;
            background-color: #f4f1ef;
        }
        .frame{
            width:300px;
            height: 200px;
            position: relative;
            top:50px;
          
        }
          .pro_mis{
            width: 95%;
            height: 2000px;
               
           }
    
    
           .pbihra{
            height: 270px;
        }
        
        .pbi1{
            height: 350px;
        }
        
        .ppt{
            
            height:300px ;
            margin-bottom: 50px;
        }

    }

    @media (max-width:500px){

        .stud1 > .stud_work{
            width: 90%;
            padding: 10px;
         }
        .student-pro{
            height: 100px;
            max-width: 100%;
         }
        
         .project-nav{
            height: 100px;
            width: 85%;
            margin:15px auto;
            
        }

        .project-nav>ul{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            list-style-type: none;
            flex-wrap: wrap;
            height: 100%;
            font-size: 14px;
             
            }

            .project-nav>ul>li{
                width: 50%;
            }
            .project-nav>ul>li:hover::before{
                width: 60%;
                
             }
            
             .gd2{
                width: 400px;
                height: 270px;
                
            }

        
    }

    @media (max-width:450px){

        .grp_des{
            width: 95%;
            height: 8000px;
           
        }
    

        .gd{
            width: 300px;
            height: 300px;
   
            
        }
        
        .gd > .gdheading >img{
            width:30px;
            height:30px;
            left:10px;
         }
        
        .gd > .gdheading > h3{
                font-size: 14px;
            
         }
        .gd1{
            width: 300px;
            height: 270px;
              
        }
        .a4{
            width: 300px;
            height: 450px;
          
        }
        .ai{
            width: 300px;
            height: 280px;
           
        }

        
        .gd2{
            width: 300px;
            height: 220px;
        }
        
        .gd6{
            width:300px;
            height:320px;
        }
        .pro-adex{
            width: 95%;
            height: 1600px;
            margin: 5px auto;
           
           } 
        .pro{
            height: 200px;
            width: 300px;
           }
           
 .pro>h3{
    position: absolute;
    left:50px;
    margin-top: 20px;
    font-size: 14px;
 }
           .web1{
            width:300px;
            height: 250px;
            background-color: #f4f1ef;
        }
        .frame{
            width:300px;
            height: 200px;
            position: relative;
            top:50px;
          
        }
          .pro_mis{
            width: 95%;
            height: 1500px;
               
           }
    
    
           .pbihra{
            height: 170px;
        }
        
        .pbi1{
            height: 250px;
        }
        
        .ppt{
            
            height:200px ;
            margin-bottom: 50px;
        }

    }

    @media (max-width:400px){

     .stud{
        max-width: 100%;
        height:500px;
        flex-wrap:wrap;
        flex-direction: column;
       
    }

    .stud1 > .stud_work >h1{
        font-size: 22px;
   
        }

    .stud1 > .stud_work >  p{
        font-size: 14px;
    } 
    }


    @media (max-width:350px){
        .stud1 > .stud_work >h1{
            font-size: 20px;
            
            }
            .stud1 > .stud_work >  p{
                font-size: 13px;
            } 

            .project-nav{
                height: 100px;
                width: 95%;
                margin:10px auto;
                
            }
    
            .project-nav>ul{
               font-size: 13px;
                 
                }
    
                .project-nav>ul>li{
                    width: 50%;
                }
                .project-nav>ul>li:hover::before{
                    width: 50%;
                    
                 }



            .grp_des{
                width: 95%;
                height: 6700px;
            }
        
    
            .gd{
                width: 270px;
                height: 270px;
             }
            
            .gd > .gdheading >img{
                width:20px;
                height:20px;
                left:10px;
             }
            
            .gd > .gdheading > h3{
                    font-size: 14px;
                
             }
            .gd1{
                width: 270px;
                height: 250px;
                  
            }
            .a4{
                width: 270px;
                height: 350px;
              
            }
            .ai{
                width: 270px;
                height: 180px;
               
            }
    
            
            .gd2{
                width: 270px;
                height: 200px;
            }
            
            .gd6{
                width:270px;
                height:290px;
            }

            .pro-adex{
                width: 95%;
                height: 1500px;
                margin: 5px auto;
               
               } 
            .pro{
                height: 180px;
                width: 270px;
               }
               
     .pro>h3{
        position: absolute;
        left:50px;
        margin-top: 20px;
        font-size: 14px;
     }
     .web_des{
        width: 93%;
        height: 900px;
    }

               .web1{
                width:270px;
                height: 200px;
                background-color: #f4f1ef;
            }
            .frame{
                width:270px;
                height: 150px;
                position: relative;
                top:50px;
              
            }


            .frame > a> img{
                margin-top: 10px;
                width:100px;
                height: 100px;
            }

              .pro_mis{
                width: 95%;
                height: 1300px;
                   
               }
        
        
               .pbihra{
                height: 160px;
            }
            
            .pbi1{
                height: 200px;
            }
            
            .ppt{
                
                height:170px ;
                margin-bottom: 50px;
            }
    }