@media screen and (max-width: 768px) { 
    .hero-bg h1{
        font-size: 18px;
    }
    .res-mt-1 {
        margin-top: 1rem !important;
    }
    .notice {
        margin-bottom: 15px;
    }
    .notice ul{
        padding-inline-start: 15px;
    }
    .notice ul li{
        padding: 5px;
    }
    .box{
        margin-bottom: 10px !important;
    }
    .box:last-child{
        margin-bottom: 20px !important;
    }
    .hero-bg-login h1{
        font-size: 18px;
    }
    .logo-img{
        height: 70px;
    }
    .res-d-flex-dir {
        flex-direction: column;
    }
    .card-left{
        width: 100%;
        text-align: center;
    }
    .card-left img{
        margin-left: 0;
        height: 100px;
    }
    .card-right{
        width: 100%;
    }
    .user-login-div {
        margin: 20px 10px;
    }
    .user-login-div:first-child {
        margin: 10px 10px 20px;
    }
    .user-login-div:last-child {
        margin: 20px 10px 10px;
    }
    .user-login-div h4 {
        font-size: 1.2rem;
    }
    .student-card {
        margin-top: 10px;
    }
}