@media screen and (max-width: 768px) {
    .wd-100{width: 100%;}
    .d-none{display: none;}
    .img-m-w img{max-width: 100% !important; height: auto !important;}
    nav#sidebar {
        overflow: hidden;
        position: fixed;
        z-index: 2;
        width: 0;
        transition: 0.5s ease;
        right: -2px;
    }
    html{font-size: 7px}
    .desktop-toggle{display: none;}
    nav#sidebar.active {
        transform: translateX(0%);
    }
    .mobil-toggle{display: block;}
    .sec-1-box{width: 100%; margin-bottom: 1rem;}
    .sec-1-box h4{font-size: 2.2rem;}
    .sec-1-box h3{font-size: 3rem;}
    .sec-1-box img{width: 100%;}
    .sidemenu nav#sidebar{width: 50%;}
    .data_list { width: calc(100vw - 6rem); overflow: auto; }
    .form-body {  flex-direction: column;}
    .form-sec { width: 100%;}
    .form-box.flex-flied { flex-direction: column;}
    .form-box input{flex: auto; height: 4rem;}
    .top-head{width: 100vw;}
    .student-wel { flex-direction: column; }
    .stu-detail-box > .d-flex { flex-direction: column;}
    .student-attendance > .d-flex { flex-direction: column;}
    .wel-sec-img { display: none; }
    .stu-detail-box th { width: 120px; }
    .stu-detail-box table th, .stu-detail-box table td, .student-attendance table th, .student-attendance table td{padding: 0.5rem 1rem;}
    .atten-table td, .atten-table th{width: 80px;}
    .book-list-btn {width: calc(50% - 2rem);}
}