@media only screen and (max-width: 767px) {
    .mobile-hide {
        display: none;
    }

    .web-hide {
        display: block;
    }

    .header-box .leftDetails-logo {
        margin: 10px 6px;
    }

    .header-box .leftDetails-logo .logo_name {
        font-size: 15px;
    }

    .header-box .leftDetails-logo .logoBox .fa-handshake {
        font-size: 22px;
    }

    .header-box .leftDetails-logo .cap-icon {
        padding: 8px;
        font-size: 18px;
    }

    .header-box .leftDetails-logo .logoBox img {
        width: 70px;
    }

    .header-box .notification-btn img {
        width: 40px;
    }

    .header-box .header-droup img {
        width: 40px;
        height: 40px;
    }

    .header-box .datesheet-btn {
        font-size: 13px;
        height: 50px;
        padding: 6px 8px;
    }

    .header-box .header-droup span {
        font-size: 13px;
    }

    .header-box {
        padding: 0px 0px;
    }

    .header-box .text {
        font-size: 16px;
    }

    .header-right-box {
        background-color: #c3c8d7;
        padding: 0px 6px;
    }

    .header-droup-box ul a li {
        font-size: 12px;
        padding: 8px 8px;
    }

    .header-box .header-droup-box ul a li {
        font-size: 14px;
        padding: 6px 10px;
        width: 110px;
    }

    .header-box .header-droup-box {
        top: 44px !important;
    }

    /* navigation */
    .nav-container {
        overflow-x: auto;
        overflow-y: hidden;
        display: none !important;
    }

    .nav-container .nav-card {
        padding: 6px 8px;
        font-size: 13px;
        min-width: 130px;
    }

    .nav-container .nav-card i {
        font-size: 20px;
    }

    .main-containerBox .card-box {
        padding: 1em;
    }

    .main-gridBox {
        display: block !important;
    }

    /* dahboard page */
    .dashboard-pageBox .welcome-box img {
        height: 150px;
    }

    .dashboard-pageBox .welcome-box .div-width {
        width: 100%;
    }

    .dashboard-pageBox .welcome-box h5 {
        font-size: 20px;
    }

    .dashboard-pageBox .welcome-box p {
        font-size: 15px;
        margin: 0px 0px 6px;
    }

    .dashboard-pageBox .welcome-box .stats-box h6 {
        margin: 0px 0px 8px;
    }

    .dashboard-pageBox .welcome-box .stats-box .approve-btn,
    .dashboard-pageBox .task-footer button {
        font-size: 13px;
    }

    .dashboard-pageBox .task-footer button {
        padding: 8px 10px;
    }

    .stats-box .form-select,
    .register-student-page .form-select,
    .dashboard-pageBox .task-box .form-select {
        min-width: 90px;
    }

    .student-list-header h6 {
        margin: 0px 0px 10px;
        padding: 12px 0px;
    }

    .student-list-header .school-select-box {
        width: 100%;
    }

    .student-list-tableData .table-header h6 {
        line-height: 40px;
    }

    .register-student-page .upload-file-box {
        margin-bottom: 1em;
    }

    .register-student-page .upload-file-box select {
        width: 100% !important;
        margin: 18px 0px 10px;
        font-size: 14px !important;
    }

    .register-bulk-page .register-student-page .upload-file-box .progress-btn {
        font-size: 13px;
        padding: 10px 10px;
    }

    .register-bulk-page .register-student-page .preview-btn {
        padding: 8px 10px;
    }

    .register-bulk-page .register-student-page .preview-btn,
    .register-bulk-page .register-student-page .error-msg-div p,
    .student-list-tableData .table tbody td {
        font-size: 13px;
    }

    .help-desk-page .query-box .textBox-Area {
        grid-template-columns: 1fr;
    }

    .help-desk-page .faq-section {
        margin: 20px auto;
    }

    .student-performance-page .circle-card,
    .student-performance-page .circle-center {
        width: 160px;
        height: 160px;
    }

    .student-performance-page .circle-center {
        left: -4%;
    }

    .student-performance-page .circle-card.right-card {
        top: 0px;
    }

    .student-performance-page .circle-card span {
        font-size: 18px;
    }

    .student-performance-page .tab-areaBox .tab-areaBox-item .nav-link {
        padding: 8px 10px;
    }

    .student-list-tableData .export-btn img {
        width: 46px;
    }

    .student-performance-page .student-card p {
        font-size: 12px;
    }

    .progress-container .progress-label {
        font-size: 14px;
    }

    .register-Box {
        margin-bottom: 0em;
        padding: 1em;
    }

    .student-listPending-page .pending-page-buttons a {
        width: 100%;
        margin-bottom: 10px;
        padding: 10px 10px;
    }

    .student-listPending-page .pending-page-buttons button,
    .student-listPending-page .header-pending-stu,
    .student-list-header .olympiad-select,
    .student-listPending-page .header-pending-stu p {
        width: 100%;
    }

    .student-list-header {
        padding: 10px 0px 10px;
    }

    .student-listPending-page .header-pending-stu p {
        font-size: 14px;
        height: auto;
    }

    .student-listPending-page .student-list-tableData .activate-btn,
    .register-processBox ul li {
        font-size: 13px;
    }

    .student-listPending-page .delete-btn {
        font-size: 16px;
        padding: 2px 8px;
    }

    .right-sideContent .card-box.tab-areaBox,
    .right-sideContent .register-processBox {
        margin-top: 1em;
    }

    .student-performance-page #subjectColumChart {
        height: 350px;
    }

    .register-bulk-page .student-list-tableData .table-button {
        width: 140px;
        text-align: center;
        font-size: 12px;
    }

    .dashboard-pageBox .process-box .table-content span {
        font-size: 12px;
        padding: 8px;
        min-width: 160px;
    }

    .dashboard-pageBox .process-box .table-content span.invisual_box {
        width: 240px;
    }

    .dashboard-pageBox .process-box .copy_button {
        font-size: 13px;
        width: 170px;
    }

    .dashboard-pageBox .process-box .copy_button div {
        padding: 8px 6px
    }

    .dashboard-pageBox .process-box .subText {
        font-size: 11px;
    }

    .dashboard-pageBox .btn-blue {
        padding: 8px 6px;
        font-size: 12px;
        width: 180px;
    }

    .dashboard-pageBox .btn-view {
        padding: 10px 8px;
        font-size: 12px;
        width: 120px;
    }

    .dashboard-pageBox .process-box {
        gap: 10px;
    }

    /* routing modal */
    .routine-box-grid .note {
        width: 86%;
        min-height: 220px;
    }

    .routine-box-grid .note h3 {
        font-size: 20px;
        margin: 0 0 10px;
    }

    .help-desk-page .query-box .category-buttons button {
        width: 140px;
    }

    .student-list-header .hide-box input {
        padding: 8px;
        border-radius: 6px;
        font-size: 13px;
        width: 100%;
    }

    .student-list-header .hide-box label,
    .student-performance-page .student-card h6 {
        font-size: 14px;
    }

    .student-performance-page .tab-areaBox .tab-areaBox-item .nav-link {
        width: 145px;
        font-size: 13px;
    }

    .student-list-tableData .table thead th {
        font-size: 13px;
    }

    .login-box .form-container h1 {
        font-size: 30px;
    }

    /* profile page */
    .profile-page .profile-bgImg .site_logo {
        height: 100px;
        width: 100px;
    }

    .profile-page .form-userDetail {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .profile-page .profile-formBox {
        margin-bottom: 16px;
    }

    #changePasswordModal .modal-content .otpBox input {
        width: 40px;
    }

    .profile-page .profile-bgImg .bg_image {
        height: 150px;
    }

    .profile-page .profile-bgImg .logo_update {
        bottom: -30px;
        left: 60%;
    }

    .table-container .dt-search,
    .table-container .dt-length {
        margin-bottom: 10px;
    }

    .help-desk-page .query-box .category-buttons .button-box {
        width: 146px;
    }

    #requestModal .modal-body .reqLimitBox {
        border-right: none;
    }

    #requestModal .modal-body .reqLimitBox input {
        width: 100%;
    }

    #requestModal .modal-body .reqLimitBox:first-child .numBox {
        width: 40px;
    }

    #requestModal .modal-body .reqLimitBox .team_image {
        width: 140px;
    }

    #requestModal .modal-body .reqLimitBox .mid_wdth {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .main-gridBox {
        display: block !important;
    }

    .header-box .leftDetails-logo .logoBox img {
        width: 80px;
    }

    .header-box .datesheet-btn {
        font-size: 16px;
        padding: 6px 10px;
    }

    .header-activeTest {
        width: fit-content;
        margin: 0 auto;
    }

    .nav-container {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .dashboard-pageBox .welcome-box .div-width {
        width: 100%;
    }

    .dashboard-pageBox .welcome-box img {
        display: none;
    }

    .dash-right-flex {
        display: flex;
        align-items: baseline;
        justify-content: start;
        gap: 16px;
    }

    .dashboard-pageBox .task-box {
        width: 100%;
        height: fit-content;
    }

    .help-desk-page .query-box .contactimage-box img {
        width: 200px;
    }

    .help-desk-page .faq-section {
        max-width: 100%;
        margin-top: 1em;
    }

    .help-desk-page .query-box .category-buttons button {
        width: 160px;
    }

    .student-listPending-page .pending-page-buttons a {
        width: fit-content;
    }

    .student-listPending-page .pending-page-buttons a,
    .student-listPending-page .header-pending-stu {
        padding: 14px 10px;
    }

    .student-listPending-page .pending-page-buttons button span {
        padding: 14px 0px !important;
    }

    .student-listPending-page .pending-page-buttons button {
        width: 240px;
    }

    .student-listPending-page .header-pending-stu {
        width: 80%;
        margin: 1em auto 1em;
    }

    .student-performance-page #subjectColumChart {
        height: 400px;
    }

    .right-sideContent .card-box.tab-areaBox,
    .right-sideContent .register-processBox {
        margin-top: 1em;
    }

    .routine-box-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 10px;
    }

    .routine-box-grid .note {
        width: 250px;
    }

    .routine-box-grid .note h3 {
        font-size: 20px;
        margin: 0 0 10px;
    }

    .routine-box-grid .note p {
        font-size: 13px;
    }

    .student-performance-page .circle-center {
        left: unset;
        transform: translateX(0%);
    }

    .profile-page .profile-formBox {
        margin-bottom: 1em;
    }

    .profile-page .profile-updateBox .profile-list a {
        margin-bottom: 0px;
    }

    .profile-page .profile-bgImg .logo_update {
        left: 56%;
    }

    .register-left-boxScroll {
        height: auto;
    }

    .header-activeTest span:first-child {
        width: 50%;
    }

    .header-box .header-droup img {
        width: 46px;
        height: 46px;
    }

    .header-box .notification-btn img {
        width: 45px;
    }

    .student-performance-page .circle-card.right-card {
        right: 100px;
    }

    .student-performance-page .circle-card.left-card {
        position: absolute;
        left: 100px;
    }

    .student-listPending-page .header-pending-stu button {
        padding: 16px;
        height: 80px;
    }

    .dashboard-pageBox .process-box .table-content span.invisual_box {
        width: 235px;
    }

    .dashboard-pageBox .process-box .copy_button div {
        padding: 8px 4px;
    }

    .dashboard-pageBox .process-box .copy_button {
        font-size: 14px;
        width: 220px;
    }

    #requestModal .modal-body .reqLimitBox:first-child .numBox,
    #requestModal .modal-body .reqLimitBox:last-child .numBox {
        width: 40px;
    }

    #requestModal .modal-body .reqLimitBox {
        border-right: none;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .profile-page .profile-updateBox .profile-list {
        padding: 0px 0px !important;
    }

    .main-gridBox {
        grid-template-columns: 1fr;
    }

    .nav-container {
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px !important;
    }

    .dash-right-flex {
        display: grid;
        grid-template-columns: 1.3fr 2fr;
        gap: 10px;
    }

    .register-left-boxScroll {
        height: auto;
    }

    .student-listPending-page .header-pending-stu {
        width: 50%;
        margin: 0 auto;
    }

    .student-performance-page .circle-card.right-card {
        right: 100px;
    }

    #requestModal .modal-body {
        padding: 16px !important;
    }

    #requestModal .modal-body .reqLimitBox .team_image {
        width: 100px;
    }

    #requestModal .modal-body .reqLimitBox .reqLimitText {
        font-size: 14px;
    }


    #requestModal .modal-body .reqLimitBox div {
        font-size: 13px !important;
    }

    #requestModal .modal-body .reqLimitBox div span {
        font-size: 12px !important;
    }

    #requestModal .modal-body .reqLimitBox .not_copied_icon {
        padding: 6px !important;
        font-size: 15px !important;
    }

    .modal-xl {
        --bs-modal-width: 950px !important;
    }
}

@media (max-width: 1200px) {
    .notification-dropdown .notification-dropdown-box {
        min-width: 420px;
        max-width: 95vw;
    }

    .notification-dropdown .notification-dropdown-box .list-unstyled img {
        width: 250px;
        height: 140px;
        max-width: 70vw;
        max-height: 30vw;
    }
}

@media (max-width: 600px) {
    .notification-dropdown .notification-dropdown-box {
        min-width: 300px;
        max-width: 99vw;
        padding: 0.5em;
        left: 200%;
    }

    .notification-dropdown .notification-dropdown-box .list-unstyled img {
        width: 140px;
        height: 90px;
        max-width: 90vw;
        max-height: 40vw;
    }
}