@media screen and (min-width: 320px) and (max-width: 767px) {



    .mob-view {display: block;}

    .desk-view {display: none;}



    /********************************************

        Header Section Start

    ********************************************/

    #header {

        height: 120px;

        flex-wrap: wrap;

        align-items: start;

        column-gap: 10px;

        width: 100%;

        padding: 10px 12px;

        position: relative;

    }



    .middle-header {

        width: calc(100% - 24px);

        height: auto;

        flex-direction: row;

        gap: 20px;

        position: absolute;

        right: 12px;

        bottom: 10px;

        border-top: 1px solid #f2f2f2;

        padding-top: 10px;

    }



    .middle-header h1 {font-size: 16px;}

    .right-logo {width: calc(65% - 10px);}

    .ggn-logo {width: calc(100% - 100px);}

    .institute-logo {width: 90px;}

    .institute-logo span {font-size: 9px;}

    .logo {width: 35%;}



    #mobile-menu {

        font-size: 23px;

        line-height: 100%;

        border: 1px solid #b3b3b3;

        color: #797979;

        padding: 4px 10px;

        border-radius: 3px;

    }



    #overlay-bg {

        position: fixed;

        top: 0;

        left: 0;

        z-index: 9998;

        background-color: rgba(0, 0, 0, 0.5);

        min-width: 100%;

        min-height: 100%;

        height: 100vh;

        opacity: 0;

    }    



    #close-menu {

        color: #707070;

        font-size: 14px;

        font-weight: 400;

        border-bottom: 1px solid #dadada;

        background-color: var(--light-gray-color);

        padding: 8px 20px;

        display: flex;

        align-items: center;

        justify-content: space-between;

    }



    #close-menu span {

        font-size: 20px;

    }



    #navbar-menu {

        position: fixed;

        top: 0;

        left: -100%;

        z-index: 9999;

        width: 90%;

        min-height: 100%;

        height: 100vh;

        background-color: #fff;

        transition: all 0.3s;

    }



    #navbar-menu.active {left: 0;}



    .menu {

        flex-direction: column;

        align-items: start;

        gap: 8px;

        padding: 20px;

    }



    .menu > .menu-item {width: 100%;}



    .menu > .menu-item > a {

        display: block;

        font-size: 15px;

        color: #2c2e35;

        border-bottom: 1px solid #f7f7f7;

        padding: 6px 0;

    }



    .menu-item-has-children > a::before {

        content: "";

        border: 1px solid #585858;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        position: absolute;

        top: 7px;

        right: 0;

    }



    .menu-item-has-children > a::after {

        top: 13px;

        right: 7px;

        transform: rotate(-45deg);

        transition: all 0.1s linear;

    }



    .menu-item-has-children.active > a::after {

        top: 11px;

        right: 6px;

        transform: rotate(45deg);

        transition: all 0.1s linear;

    }

    .menu-item-has-children:hover .sub-menu {transition: none;}



    .sub-menu {

        background-color: #f7f7f7;

        position: static;

        max-width: 100%;

        min-width: 100%;

        border-radius: 0;

        border-top: none;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        display: none;

    }



    .sub-menu::before, .sub-menu::after {display: none;}

    .sub-menu .menu-item a {color: #2c2e35;}



    /********************************************

        Slider Section Start

    ********************************************/

    .banner {margin-top: 0;}

    .banner::before {background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0.8) 78%);}

    .banner, .banner #jssor_1 {min-height: 140px !important;}



    .banner-content {

        bottom: 0;

        padding: 0 3%;

    }



    .banner-content .desc {

        margin-bottom: 0;

        font-size: 14px;

    }



    /********************************************

        Inner Banner Section Start

    ********************************************/

    .inner-banner {height: 130px;}



    .inner-banner img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    /********************************************

        News Section Start

    ********************************************/

    #news {

        flex-direction: column;

        gap: 50px;

        margin-top: 35px;

        margin-bottom: 50px;

    }



    #news .left-col, #news .right-col {width: 100%;}

    #news h1, .latest-news h1 {font-size: 17px;}



    .news-block {

        flex-direction: column;

        row-gap: 0;

    }



    .single-news-block:not(:first-child) {

        display: flex;

        gap: 10px;

        width: 100%;

        border-radius: 6px;

        border: 1px solid #d4d4d4;

        border-left: none;

        margin-bottom: 15px;

    }



    .single-news-block:first-of-type {

        display: block;

        width: 100%;

        margin-bottom: 25px;

    }



    .single-news-block:hover {

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        transform: translateY(0);

    }



    .single-news-block:not(:first-child) .news-thumb {

        width: 120px;

        height: 98px;

    }



    .single-news-block:not(:first-child) .news-thumb img {

        object-fit: cover;

        width: 100%;

        height: 100%;

    }



    .single-news-block:not(:first-child) .news-block-content {

        width: calc(100% - 130px);

        padding: 5px;

        padding-left: 0;

    }



    .single-news-block:not(:first-child) .news-block-content .time {

        font-size: 12px;

        line-height: 12px;

        margin-bottom: 10px;

    }

    .single-news-block:not(:first-child) .news-block-content .time i {font-size: 11px;}



    .single-news-block:not(:first-child) .news-block-content h2 {

        max-height: 37px;

        font-size: 15px !important;

        margin-bottom: 6px !important;

    }



    .single-news-block:not(:first-child) .news-block-content p {display: none;}

    .news-block-content .readMoreBtn, .news-block-content .readMoreBtn i {font-weight: 400;}



    .single-news {

        flex-direction: column;

        padding: 15px;

        margin-bottom: 40px;

    }

    .news-thumbnail, .news-brief-content {width: 100%;}



    .news-thumbnail img {

        max-width: 100%;

        min-height: 100%;

    }



    .news-brief-content p {

        max-height: 100px;

        overflow: hidden;

    }

    .single-news:hover {box-shadow: none;}



    /********************************************

        News Full Page Section Start

    ********************************************/

    .full-news-area {

        margin-top: 35px;

        margin-bottom: 50px;

    }



    .full-news-area > .container {

        flex-direction: column;

        gap: 50px;

    }

    .full-news-details, .right-panel {width: 100%;}



    .full-news-details h1 {

        font-size: 21px;

        padding: 10px 10px 0 10px;

    }



    .author-social, .full-news-details .news-content {padding: 0 10px;}

    .author-social .author-box p, .author-social .social-media p {font-size: 12px;}

    .full-news-details .feature-image {margin-bottom: 20px;}

    .full-news-details .news-content h3 {font-size: 19px;}

    .full-news-details .news-content ul, .full-news-details .news-content ol {padding-left: 24px;}

    .full-news-details .news-content p,

    .full-news-details .news-content ul li,

    .full-news-details .news-content ol li {font-size: 15px;}



    /********************************************

        Pages Section Start

    ********************************************/

    #pages-area {

        margin-top: 35px;

        margin-bottom: 50px;

    }



    #page-details {

        flex-direction: column;

        gap: 50px;

    }



    .pages-content h3 {font-size: 18px;}

    #page-details .right-col, #page-details .left-col {width: 100%;}

    .pages-content p, .pages-content li,

    .pages-content table td, .pages-content table th {text-align: left;}

    .pages-content > ol, .pages-content > ul {padding-left: 20px;}

    .country-flag p:last-child {display: none;}



    .profile-header {flex-direction: column;}

    .members-news > h2 {font-size: 18px;}

    .author.news-block {gap: 0;}



    .author .single-news-block:first-of-type {

        border: 1px solid #d4d4d4;

        border-top: none;

    }



    .author .single-news-block:first-of-type .news-thumb {

        width: 100%;

        height: auto;

    }



    .author .single-news-block:first-of-type .news-block-content {

        width: 100%;

        padding: 15px;

        padding-top: 12px;

    }



    .author .single-news-block:first-of-type .news-block-content .time {

        font-size: 13px;

        margin-bottom: 12px;

    }

    .author .single-news-block:first-of-type .news-block-content .time i {font-size: 13px;}



    .author .single-news-block:first-of-type .news-block-content h2 {

        font-size: 17px !important;

        margin-bottom: 13px !important;

        max-height: 44px;

    }

    .author .single-news-block:first-of-type .news-block-content p {display: -webkit-box;}



    /********************************************

        Gallery Section Start

    ********************************************/

    .gallery {

        flex-direction: column;

        gap: 15px;

        margin-top: 35px;

        margin-bottom: 50px;

    }

    .gallery .item {width: 100%;}



    /********************************************

        Footer Section Start

    ********************************************/

    .footer-area {

        padding-top: 25px;

        padding-bottom: 20px;

    }



    .footer-logo p {

        font-size: 13px;

    }



    .footer-logo .social-touch li {

        width: 30px;

        height: 30px;

        line-height: 30px;

    }



    .footer-logo .social-touch li a i {

        font-size: 16px;

    }

    .footer-logo img {max-width: 160px;}



    .description {

        margin-top: 20px;

    }



    .description p {

        font-size: 12px;

        text-align: justify;

        line-height: 17px;

        padding-bottom: 5px;

        border-bottom: 1px solid #dfdfdf;

    }



    .copyright-area {

        height: auto;

    }



    .copyright-area p {

        font-size: 14px;

        line-height: 23px;

    }



    .copyright-area .privacy-link li a {

        font-size: 14px;

        padding: 0;

    }



    /********************************************

        ScrollTop Section Start

    ********************************************/

    .scroll-top {

        bottom: 65px;

        right: 30px;

        box-shadow: 0px 5px 15px 0 #4a4a4abf;

    }

}