/* =============================== common responsive start  ============================= */
        /* ========= header end ========= */

        @media only screen and (max-width: 1440px) {
            /* common header  */
            .header h3 {
                font-size: var(--font-size16);
            }
        }

        @media only screen and (max-width: 768px) {
            .header h3 {
                font-size: var(--font-size12);
            }
            .wraper-left .institute-wraper .institute-header h3 {
                font-size: var(--font-size13);
                color: var(--white);
            }
            /* common btn  */
            .common-btn {
                display: inline-block;
                font-size: var(--font-size13);
                font-weight: var(--font-normal);
                color: var(--white);
                text-align: center;
                line-height: 28px;
                border-radius: 8px;
                background-color: var(--main-color);
                outline: none;
                border: none;
                padding: 2px 19px;
                transition: all linear .2s;
            }
            .common-btn-2 {
                width: 100%;
                font-size: var(--font-size13);
                font-weight: var(--font-normal);
                color: var(--white);
                text-align: center;
                line-height: 28px;
                border-radius: 8px;
                background-color: var(--second-color);
                outline: none;
                border: none;
                padding: 0px 0;
                transition: all linear .2s;
            }
        }

        @media only screen and (max-width: 425px) {
            .common-btn {
                font-size: var(--font-size10);
            }
            .common-btn-2 {
                font-size: var(--font-size10);
            }
        }
        /* ========= header end ========= */
        /* ========= form start ========= */

        @media only screen and (max-width: 768px) {
            .form-content {
                padding: 22px;
            }
            .form-content h1 {
                font-size: var(--font-size14);
                margin-bottom: 13px;
                line-height: 20px;
            }
            .table-content label,
            .form-content label {
                font-size: var(--font-size14);
                margin-bottom: 7px;
            }
            .form-content input {
                width: 100%;
                border: 1px solid var(--light);
                outline: none;
                border-radius: 3px;
                padding: 8px 10px;
                margin-bottom: 20px;
            }
            .form-content input::placeholder {
                color: var(--black);
                font-size: var(--font-size14);
                font-weight: var(--font-normal);
                line-height: 20px;
            }
            /* history content  */
            .history-content p,
            .history-content ol li {
                font-size: var(--font-size12);
                line-height: 28px;
                margin-bottom: 30px;
            }
            /* .exams-roules-content */
            .exams-roules-content li {
                font-size: var(--font-size12);
                line-height: 24px;
            }
        }

        @media only screen and (max-width: 425px) {
            .form-content h1 {
                font-size: var(--font-size12);
                margin-bottom: 13px;
                line-height: 19px;
            }
            .admission-area .form-content {
                padding: 20px;
            }
            .form-content select,
            .form-content label {
                font-size: var(--font-size12);
                margin-bottom: 4px;
            }
            .form-content input {
                padding: 8px 10px;
                margin-bottom: 15px;
                padding: 5px 10px;
            }
            .form-content input::placeholder {
                font-size: var(--font-size12);
            }
            /* history content  */
            .history-content p,
            .history-content ol li {
                font-size: var(--font-size10);
                line-height: 25px;
                margin-bottom: 20px;
            }
        }

        @media only screen and (max-width: 375px) {
            .form-content h1 {
                font-size: var(--font-size10);
                margin-bottom: 13px;
            }
            .form-content select,
            .form-content label {
                font-size: var(--font-size12);
                margin-bottom: 4px;
            }
            .form-content input {
                margin-bottom: 10px;
                padding: 4px 6px;
            }
            .form-content input::placeholder {
                font-size: var(--font-size10);
            }
            /* .exams-roules-content */
            .exams-roules-content li {
                font-size: var(--font-size10);
                line-height: 20px;
            }
        }
        /* ========= form end ========= */
        /* ============ table  start============ */

        @media only screen and (max-width: 1024px) {
            .course-table-top th {
                font-size: 11px;
            }
            .table td {
                font-size: 12px;
            }
        }

        @media only screen and (max-width: 768px) {
            .course-table-top th,
            .table-content th {
                font-size: 10px;
            }
            .course-table .search input[type="text"] {
                font-size: 10px;
            }
            .table td,
            .table-content .table tbody tr td {
                font-size: var(--font-size10);
            }
            button.download-btn {
                font-size: var(--font-size10);
            }
            div.dataTables_wrapper div.dataTables_info {
                font-size: var(--font-size12);
                margin: 10px 0;
                text-align: center;
            }
            .table-content a.page-link {
                font-size: var(--font-size12);
            }
        }

        @media only screen and (max-width: 425px) {
            .course-table .search input {
                width: 50%;
            }
            .table td,
            .table-content .table tbody tr td {
                font-size: var(--font-size8);
            }
            button.download-btn {
                font-size: var(--font-size9);
            }
            .search {
                width: 50%;
            }
        }
        /* ============ table end ============ */
        /* =================principle  start ============== */

        @media only screen and (max-width: 768px) {
            .wraper-left .principal-wraper .principal-img {
                width: 200px;
                height: 250px;
            }
            .wraper-left .principal-wraper .principal-content h3 {
                font-size: var(--font-size20);
                line-height: 24px;
            }
            .wraper-left .principal-wraper .principal-content p {
                font-size: var(--font-size12);
                line-height: 26px;
                margin: 17px 0;
            }
        }

        @media only screen and (max-width: 425px) {
            .wraper-left .principal-wraper .principal-content h3 {
                font-size: var(--font-size18);
                line-height: 24px;
            }
            .wraper-left .principal-wraper .principal-content p {
                font-size: var(--font-size10);
                line-height: 24px;
                margin: 17px 0;
            }
        }
        /* ===============principle  end ============== */
        /* ============ poricolpona card end  =========== */

        @media only screen and (max-width: 1024px) {
            .poricolpona-wraper .porcolpona-card {
                padding: 6px;
            }
            .poricolpona-wraper .porcolpona-card .table th {
                font-weight: var(--font-bold);
                font-size: var(--font-size13);
                color: var(--black);
            }
            .poricolpona-wraper .porcolpona-card .table td {
                font-weight: var(--font-normal);
                font-size: var(--font-size12);
                color: var(--black);
            }
        }

        @media only screen and (max-width: 768px) {
            .poricolpona-wraper {
                padding: 15px;
            }
            .poricolpona-wraper .porcolpona-img {
                width: 160px;
                height: 160px;
            }
            .poricolpona-wraper .porcolpona-card .table th {
                font-weight: var(--font-bold);
                font-size: var(--font-size10);
                color: var(--black);
                padding: 6px;
            }
            .poricolpona-wraper .porcolpona-card .table td {
                font-size: var(--font-size9);
                padding: 5px;
            }
            .poricolpona-wraper .tea button {
                padding: 0px 8px;
            }
        }

        @media only screen and (max-width: 425px) {
            .table-content .table thead th {
                font-size: var(--font-size7);
            }
            .poricolpona-wraper .porcolpona-card .table td {
                font-size: var(--font-size12);
            }
            div.dataTables_wrapper div.dataTables_filter label {
                margin: 10px 0;
            }
        }

        @media only screen and (max-width: 375px) {
            .poricolpona-wraper .porcolpona-card .table th {
                font-size: var(--font-size10);
            }
            .poricolpona-wraper .porcolpona-card .table td {
                font-size: var(--font-size9);
            }
        }
        /* ============ poricolpona card end  =========== */
        /* ========= common-card start ========= */

        @media only screen and (max-width: 768px) {
            .common-card-content .common-card-list .common-card-img {
                height: 80px;
            }
            .common-card-content .common-card-list .common-card-heading h2 {
                font-size: var(--font-size16);
                line-height: 20px;
                margin-top: 0;
            }
            .common-card-content .common-card-list .common-card-title h3 {
                font-size: var(--font-size12);
                line-height: 20px;
            }
        }

        @media only screen and (max-width: 425px) {
            .common-card-content .common-card-list .common-card-img {
                height: 150px;
            }
            .common-card-content .common-card-list .common-card-heading h2 {
                font-size: var(--font-size14);
            }
            .common-card-content .common-card-list .common-card-title p {
                font-size: var(--font-size10);
                margin: 5px 0;
            }
            .common-card-content .common-card-list .common-card-title h3 {
                font-size: var(--font-size10);
                line-height: 20px;
            }
        }

        @media only screen and (max-width: 375px) {
            .common-card-content .common-card-list .common-card-img {
                height: 120px;
            }
        }

        @media only screen and (max-width: 320px) {
            .common-card-content .common-card-list .common-card-img {
                height: 100px;
            }
        }
        /* ========= common-card end ============ */
        /* ========== pdf start ==========*/

        @media only screen and (max-width: 768px) {
            /* read a title start */
            .buy-now-cart2 {
                width: 85%;
            }
            .buy-now-cart2 .buy-icon2 i {
                font-size: 30px;
                width: 40px;
                height: 40px;
                line-height: 40px;
            }
            .buy-now-cart2 .buy-now-datails2 {
                padding: 33px;
            }
            /* read a title end */
        }

        @media only screen and (max-width: 425px) {
            /* read a title start */
            .buy-now-cart2 {
                width: 90%;
            }
            .buy-now-cart2 .buy-icon2 i {
                font-size: 20px;
                width: 28px;
                height: 28px;
                line-height: 28px;
            }
            .buy-now-cart2 .buy-now-datails2 {
                padding: 22px;
            }
            /* read a title end */
        }
        /* ==========pdf end ==========*/
        /* =============================== common responsive end  ============================= */
        /* =============================== header start  ============================= */

        @media only screen and (max-width: 1440px) {
            .header-bottom .navber ul {
                display: flex;
                align-items: center;
                border: 1px solid var(--light);
            }
        }

        @media only screen and (max-width: 1024px) {
            .header-bottom .navber a.menu,
            .header-bottom .navber .menu-home {
                font-size: var(--font-size10);
                line-height: 15px;
                padding: 12px 6px;
            }
            .header-bottom .navber .menu-home {
                padding: 12px 16px;
            }
        }

        @media only screen and (max-width: 768px) {
            .header-bottom .navber a.menu,
            .header-bottom .navber .menu-home {
                font-size: var(--font-size9);
                line-height: 15px;
                padding: 12px 6px;
            }
            .header-bottom .navber .menu-home {
                padding: 12px 16px;
            }
            .header-top-area {
                display: inherit;
            }
            .header-bottom .navber ul li a.login {
                font-size: 15px;
            }
            .menu-home i {
                font-size: 9px;
            }
            .header-bottom .navber a.menu i {
                margin-left: 2px;
            }
            .menu-home i {
                font-size: 9px;
                line-height: 20px;
            }
        }
        /* ======== mb-header start ======== */

        @media (max-width: 2560px) {
            .mb-header-tab-area {
                display: none;
            }
            .header-top-area .header-top .header-right-icon {
                display: initial;
            }
        }

        @media (max-width: 1440px) {
            .mb-header-tab-area {
                display: none;
            }
            .header-top-area .header-top .header-right-icon {
                display: initial;
            }
        }

        @media only screen and (max-width: 425px) {
            .header-top-area {
                display: none;
            }
        }
        /* ======== mb-header end ======== */

        @media (max-width: 768px) {
            /* header-top start  */
            .header-top-area {
                height: 60px;
            }
            .header-top-area .header-top .header-left span {
                font-size: 14px;
                font-weight: 500;
            }
            .header-top-area .header-top .header-logo a {
                font-size: 30px;
            }
            .header-top-area .header-top .header-logo {
                text-align: center;
            }
            /* header-top end  */
            .mb-header-tab-area {
                display: none;
            }
            .header-top-area .header-top .header-right-icon {
                display: initial;
            }
            .header-top-area .header-top .header-right .icon-cards .header-right-icon i {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
            /* sidebar start  */
            .header-bottom {
                top: 60px;
            }
            .header-bottom .navber a.menu {
                font-size: 8px;
                line-height: 18px;
            }
            .header-bottom .navber .dp-menu li a {
                font-size: 9px;
                line-height: 25px;
            }
            .top-logo a {
                font-size: var(--font-size8);
            }
            .top-header li a {
                font-weight: var(--font-normal);
                font-size: var(--font-size8);
                color: var(--white);
                transition: all linear .2s;
            }
            /* sidebar end  */
            /* last menu   */
            .header-bottom .navber ul.dp-nine,
            .header-bottom .navber ul.dp-ten {
                right: 60px;
            }
        }

        @media only screen and (max-width: 425px) {
            /* ====================== mb-header start ======================= */
            .mb-header-tab {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 10px;
                box-shadow: 0 0 5px var(--light);
                margin-bottom: 10px;
            }
            .header-bottom {
                top: 70px;
                left: 0;
                width: 100%;
                background-color: var(--cyan-light);
                box-shadow: 0 2px 2px var(--shadow);
                z-index: 100;
            }
            .mb-header-tab-area {
                display: initial;
            }
            .mb-header-tab-area {
                height: 50px;
                line-height: 50px;
            }
            .mb-header-tab i {
                line-height: 50px;
            }
            .mb-header-tab-area .mb-header-logo a {
                color: var(--white);
                font-size: 20px;
                font-weight: 900;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            .mb-header-tab-area a.login {
                color: var(--white);
                font-size: 15px;
                font-weight: var(--font-semi-bold);
            }
            /* ====================== mb-header end ====================== */
            /* ====================== sidebar end ======================== */
            .header-bottom {
                top: 50px;
                width: 100%;
                box-shadow: 0 0 8px var(--light);
                border-radius: 4px;
            }
            header .navber {
                width: 50%;
                height: 100vh;
                display: none;
                overflow: scroll;
            }
            .header-bottom .navber a.menu {
                line-height: 23px;
                font-size: 10px;
                /* background: var(--second-color); */
                box-shadow: 0 0 5px var(--light);
                margin-bottom: 10px;
                padding: 10px 30px;
            }
            header .navber ul.mega-munu {
                height: 100vh;
                overflow: scroll;
            }
            /* checked start  */
            header label {
                display: initial;
            }
            #menu-bar {
                display: none;
            }
            #menu-bar:checked~.navber {
                display: initial;
            }
            header .navber {
                width: 50%;
            }
            header label {
                display: initial;
            }
            #menu-bar {
                display: none;
            }
            #menu-bar:checked~.navber {
                display: initial;
            }
            /* checked end  */
            .header-bottom .navber ul {
                display: block;
            }
            .header-bottom .navber ul li ul {
                width: auto;
                padding: 15px;
                z-index: 1000;
            }
            .header-bottom .navber ul li a {
                top: 100px;
                color: var(--white);
                display: block;
                font-size: 14px;
                font-weight: var(--font-medium);
                line-height: 36px;
                transition: all 0.3s linear 0s;
            }
            .header-bottom .navber ul {
                border: 1px solid transparent;
            }
            .header-bottom .navber ul li .dp-menu {
                position: unset;
                width: auto;
                background-color: transparent;
                border-top: 3px solid transparent;
                box-shadow: 0 0 10px transparent;
                padding: 15px;
                z-index: 1000;
                /* display: none;    */
            }
            ul.sub-dp-menu {
                top: 0;
                left: 0;
                position: absolute;
                width: 180px;
            }
            /* mega  */
            ul.dp-menu.dp-one {
                top: 76%;
            }
            ul.dp-menu.dp-two {
                top: 88%;
            }
            ul.dp-menu.dp-three {
                top: 99%;
            }
            ul.dp-menu.dp-four {
                top: 20%;
            }
            ul.dp-menu.dp-five {
                top: 27%;
            }
            ul.dp-menu.dp-six {
                bottom: 32%;
            }
            ul.dp-menu.dp-seven {
                bottom: 26%;
            }
            ul.dp-menu.dp-eight {
                bottom: 26%;
            }
            ul.dp-menu.dp-nine {
                bottom: 26%;
            }
            ul.dp-menu.dp-ten {
                bottom: 26%;
            }
            /* =============================== */
            .header-bottom .navber ul li ul {
                width: 200px;
                overflow: hidden;
            }
        }
        /* =============================== */
        /* ====================== sidebar end ======================== */

        @media only screen and (max-width: 375px) {
            .header-top-area .header-logo {
                display: none;
            }
            /* mega menu  */
            .header-bottom .navber ul li ul {
                width: 170px;
            }
            .top-header li {
                padding: 0px 4px;
            }
        }

        @media only screen and (max-width: 320px) {
            .header-bottom {
                top: 45px;
            }
            .header-top-area .header-logo {
                display: none;
            }
            .mb-header-tab-area {
                height: 45px;
                line-height: 45px;
            }
            .mb-header-tab i {
                font-size: 20px;
            }
            .mb-header-tab .mb-header-logo a {
                width: 100px;
                height: 16px;
                margin: 18px 0;
            }
            .top-header li {
                padding: 0px 2px;
            }
            .header-bottom .navber ul li ul {
                width: 170px;
            }
        }
        /* mb top end  */
        /* ========================== header end  ======================= */