.justify-center{
    justify-content: center;
  }

@media only screen and (min-width: 300px)  and (max-width:900px){
    #ul {
        align-items: center;
        justify-content: center;
        
    }
    .py-2{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo{
       /* margin-left: 133px !important; */
       align-items: center;
       justify-content: center;
       display: flex;
    }
    .media{
        padding: 20px !important;
    }

}

@media only screen and (min-width: 300px)  and (max-width:1023px){
    .py-2{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .tution_left{
        margin-left: 0px;
    }
    .tution_right{
        margin-right: 0px;
    }
}
@media only screen and (min-width: 901px)  and (max-width:1060px){

    #ul{
        margin-top: 10px !important;
        width: 100% !important;
        gap:10px !important;
    }
    li{
        padding-top: 10px !important;
    }
    .px-1{
        padding-top: 10px !important;
    }
    .media{
        padding-left: 275px;
    }
   
    
}

@media only screen and (min-width: 1061px)  and (max-width:1080px){

    #ul{
        margin-top: 10px !important;
        width: 100% !important;
        gap:10px !important;
       
    }
    li{
        padding-top: 10px !important;
    }
    .px-1{
        padding-top: 10px !important;
    }
    .media{
        padding-left: 275px;
    }
    .logo{
        padding-left: 65px !important;
    }
   
    
}

@media only screen and (min-width: 1081px)  and (max-width:1100px){

    #ul{
        margin-top: 10px !important;
        width: 100% !important;
        gap:10px !important;
       
    }
    li{
        padding-top: 10px !important;
    }
    .px-1{
        padding-top: 10px !important;
    }
    .media{
        padding-left: 275px;
    }
    .logo{
        padding-left: 65px !important;
    }
    .tution_left{
        margin-left: 25px;
    }
    .tution_right{
        margin-right: 25px;
    }
    
}

@media only screen and (min-width: 1101px)  and (max-width:2400px){

    #ul{
        margin-top: 10px !important;
        width: 100% !important;
        gap:10px !important;
       
    }
    li{
        padding-top: 10px !important;
    }
    .px-1{
        padding-top: 10px !important;
    }
    .media{
        padding-left: 380px !important;
    }
    .logo{
        padding-left: 336px !important;
    }
    .tution_left{
        margin-left: 80px;
    }
    .tution_right{
        margin-right: 65px;
    }
    
}
