/* =============================== index start  ============================= */

@media only screen and (max-width: 1440px) {
    .instructor .instructor-content .instructor-img {
        height: 278px;
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 1024px) {
    /* wraper-left start */
    .wraper-left .institute-wraper {
        margin-bottom: 15px;
    }
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details {
        margin-left: 105px;
        padding: 25px;
    }
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details .notice-header a h3 {
        font-size: var(--font-size20);
        line-height: 25px;
        margin-bottom: 15px;
    }
    .wraper-left .institute-wraper .institute-content .institute-details p {
        font-size: var(--font-size13);
        line-height: 40px;
    }
    .wraper-left .informatino-card {
        padding: 15px;
        height: 200px;
    }
    .card-details li a {
        font-size: var(--font-size13);
        line-height: 22px;
    }
    .wraper-left .informatino-card .card-header h3 {
        font-size: var(--font-size16);
    }
    .wraper-left .informatino-card .card-content .card-img {
        width: 70px;
        height: 70px;
    }
    /* wraper-left start */
    /* wraper-right start */
    .instructor .instructor-content .instructor-img {
        height: 220px;
        padding: 10px 15px;
    }
    .important-link .card-details li {
        line-height: 35px;
        padding-left: 16px;
    }
    /* wraper-right end */
}

@media only screen and (max-width: 768px) {
    /* banner */
    .titleBar-img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .titleBar {
        padding: 20px 30px;
        font-size: 20px;
        margin-top: 80px;
    }
    /* content-wrapper */
    .content-wrapper {
        padding-top: 20px;
    }
    /* wrapper left  */
    /* ======== */
    .card-details li {
        margin: 0px 0;
    }
    /* ======== */
    .wraper-left .notice-wraper .notice-img {
        width: 50px;
        height: 50px;
    }
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details {
        margin-left: 49px;
        padding: 20px;
    }
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details .notice-header a h3 {
        font-size: var(--font-size18);
        line-height: 25px;
        margin-bottom: 0px;
    }
    .card-details li a {
        font-size: var(--font-size10);
        line-height: 21px;
    }
    .wraper-left .institute-wraper .institute-content .institute-details {
        padding: 10px 20px;
    }
    .wraper-left .institute-wraper .institute-content .institute-details p {
        font-size: var(--font-size10);
        line-height: 30px;
    }
    .wraper-left .informatino-card {
        height: 150px;
    }
    .wraper-left .informatino-card .card-header h3 {
        font-size: var(--font-size13);
    }
    .wraper-left .card-content {
        margin-top: 10px;
    }
    .wraper-left .informatino-card .card-content .card-img {
        width: 50px;
        height: 50px;
    }
    .card-details li a i {
        font-size: var(--font-size10);
        margin-right: 2px;
    }
    /* wraper right  */
    .instructor .instructor-content .instructor-img {
        height: 170px;
        padding: 10px;
    }
    .instructor .instructor-content h3 {
        font-size: var(--font-size12);
        line-height: 27px;
        margin: 4px 0;
    }
    .national-wrapper .video iframe {
        width: 100%;
        height: 150px;
    }
}

@media only screen and (max-width: 425px) {
    .titleBar {
        padding: 20px 8px;
        font-size: 12px;
        margin-top: 45px;
    }
    .menu-text h5 {
        font-size: var(--font-size12);
    }
    .wraper-left .informatino-card {
        height: 163px;
    }
    .wraper-left .informatino-card .card-content .card-details {
        margin-left: 80px;
    }
    .wraper-left .card-content {
        margin-top: 20px;
    }
    /* wraper-right  */
    .instructor .instructor-content .instructor-img {
        height: 330px;
        padding: 15px 24px;
    }
    /* copy right  */
    .copyright-text p {
        font-size: var(--font-size12);
    }
    .copyright-text p a {
        font-size: var(--font-size12);
    }
    .copyright-text p a:hover {
        font-size: var(--font-size12);
        color: var(--second-color);
    }
}

@media only screen and (max-width: 375px) {
    .top-logo a {
        font-size: var(--font-size7);
    }
    .top-header li a {
        font-size: var(--font-size7);
    }
    /* banner */
    .titleBar-img {
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    .titleBar {
        padding: 20px 8px;
        font-size: 11px;
        margin-top: 30px;
    }
    /* wraper-left  */
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details .notice-header a h3 {
        font-size: var(--font-size14);
    }
    .wraper-left .card-content {
        margin-top: 10px;
    }
    .wraper-left .notice-wraper .notice-content .notice-content-details .notice-details {
        margin-left: 35px;
        padding: 15px;
    }
    .wraper-left .informatino-card {
        height: 154px;
    }
    .wraper-left .informatino-card .card-content .card-details {
        margin-left: 25px;
    }
    .wraper-left .informatino-card .card-content .card-details {
        margin-left: 40px;
    }
    /* wraper-right  */
    .instructor .instructor-content .instructor-img {
        height: 259px;
        padding: 15px 18px;
    }
}

@media only screen and (max-width: 320px) {
    .titleBar {
        padding: 20px 8px;
        font-size: 8px;
        margin-top: 25px;
    }
}


/* =============================== index end  ============================= */