@media screen and (max-width: 599.98px) {

    h1 {
        font-size: 32px;
        line-height: 120%;
    }

    h2 {
        font-size: 28px;
        line-height: 120%;
    }

    h3 {
        font-size: 24px;
        line-height: 130%;
    }

    h4 {
        font-size: 20px;
        line-height: 140%;
    }

    h5 {
        font-size: 18px;
        line-height: 140%;
    }

    h6 {
        font-size: 16px;
        line-height: 160%;
    }

    header {
        padding: 8px 12px !important;
    }

    .banner-session {
        padding-bottom: 50px !important;
    }

    /* Make banner container flow normally on small screens */
    .banner-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 94%;
        margin: 24px auto;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 0;
    }

    .banner-left {
        width: 100%;
        /* keep a pleasant banner height using aspect-ratio */
        aspect-ratio: 16 / 9;
        min-height: 220px;
        height: auto;
        overflow: hidden;
    }

    .banner-left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .banner-right {
        width: 100%;
        max-width: none;
        padding: 12px;
        box-sizing: border-box;
    }

    .banner-right ul li {
        min-height: 72px;
        font-size: 15px;
        padding: 12px 14px;
    }

    .letest-arical {
        margin-top: 12px;
        padding: 20px 12px;
    }

    .letest-arical h2 {
        font-size: 22px;
        text-align: center;
    }

    .letest-arical .text {
        text-align: center;
        font-size: 14px;
        padding: 0 10px;
    }

    .blog-card {
        margin: 0 auto 20px auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-radius: 10px;
    }

    .blog-img-box {
        height: 170px;
        border-radius: 10px;
    }

    .blog-title {
        padding: 10px;
        font-size: 16px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }


    .blog-title>a {
        font-size: 16px !important;
    }

    .blog-desc {
        padding: 0px 12px;
        font-size: 14px;
        line-height: 1.45;
    }

    .blog-meta {
        padding: 10px;
        gap: 8px;
    }

    .blog-meta span {
        font-size: 12px;
    }

    .blog-author {
        padding: 10px;
        font-size: 13px;
    }

    .categorys-list {
        overflow-x: auto;
        white-space: nowrap;
        gap: 10px;
        padding: 10px;
    }

    .categorys-list li {
        display: inline-flex;
        padding: 8px 14px;
        background: #f3f4f6;
        border-radius: 20px;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .categorys-list::-webkit-scrollbar {
        display: none;
    }

    .hero-left>h2 {
        font-size: 24px;
    }

    .hero-left>p {
        font-size: 14px;
    }

    .slider-track {
        gap: 2px;
    }


    .newssalter>h3 {
        font-size: 22px;
    }

    .subscribe-box {
        padding: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .subscribe-box input {
        flex: 1;
        width: 100%;
        padding: 10px;
    }

    .subscribe-box button {
        padding: 10px 14px;
        font-size: 14px;
    }

    .inner-container>ul>li {
        display: none !important;
    }

    .owl-nav {
        display: none;
    }

    .bradcump>ul>li {
        font-size: 12px;
        line-height: 20px;
        color: #FFFFFF;
		text-align:center;
    }

    .category-container {
        padding: 20px;
    }

    .bradcump>ul>li>i {
        font-size: 10px;
    }

    .category-heading>h1 {
        font-size: 28px;
    }

    .category-dec>p {
        font-size: 14px;
        text-align: justify !important;
    }

    .learning-experience {
        border-radius: 0px;
    }

    .left-toc {
        position: static;
        margin-bottom: 20px;
    }

    .left-toc h4 {
        text-align: start;
    }

    .left-toc .toc-list {
        text-align: start;
    }

    .blog-layout {
        display: block !important;
    }

    .right-sidebar {
        margin: 20px 0px;
    }

    .comments {
        padding: 15px 20px;
    }

    .post-meta>ul {
        justify-content: start;
    }

    .post-meta>ul>li {
        font-size: 10px;
        padding: 0px 6px;
    }

    .blog-single {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }

    .cat-mb {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .cat-del {
        padding: 10px;
    }

    .shared {
        justify-content: start;
    }


    .search-box input {
        padding: 10px 10px 10px 40px;
        border: 2px solid #39393966 !important;
        border-radius: .75rem !important;
        outline: none !important;
    }

    .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: black;
    }

    .search-box input {
        color: black !important;
    }

    .search-box input::-webkit-input-placeholder {
        color: black;
    }

    .cat-del ul {
        display: block;
    }

    .pagination-wrapper {
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Hide page numbers */
    .pagination-wrapper .page-numbers:not(.prev):not(.next) {
        display: none;
    }

    /* Style Prev & Next */
    .pagination-wrapper .prev,
    .pagination-wrapper .next {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 14px;
        border-radius: 6px;
    }





    /* footer */

    .ft-link {
        padding: 20px 10px;
    }

    .copywrite {
        font-size: 13px;
    }


}

/* --------------------
   TABLET: 600px — 1199.98px
   -------------------- */
@media screen and (min-width: 600px) and (max-width: 1199.98px) {
    header {
        padding: 8px 18px !important;
    }

    .banner-container {
        position: relative !important;
        top: auto;
        left: auto;
        right: auto;
        width: 94%;
        margin: 28px auto;
        display: flex;
        flex-direction: column;
        border-radius: 12px;
    }


    .banner-left {
        width: 100%;
        height: auto;
        min-height: 260px;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .banner-left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .banner-right {
        width: 100%;
        padding: 14px;
        max-width: none;
    }

    .banner-right ul li {
        min-height: 88px;
        font-size: 15px;
        padding: 14px 16px;
    }

    .letest-arical {
        padding: 32px 0;
        margin-top: 12px;
    }

    .blog-img-box {
        height: 200px;
        border-radius: 12px;
    }

    .blog-title {
        font-size: 18px;
    }

    .blog-desc {
        font-size: 15px;
    }

    .blog-meta span {
        font-size: 13px;
    }

    .blog-author {
        font-size: 14px;
    }

    .col-md-6 {
        padding: 0 10px;
    }

    /* Keep floating icons off for tablet too (optional) */
    .inner-container>ul>li {
        display: none;
    }

    /* Owl nav for tablet (move slightly up) */
    .owl-nav {
        display: none;
    }

    .search-box input {
        padding: 10px 10px 10px 40px;
        border: 2px solid #39393966 !important;
        border-radius: .75rem !important;
        outline: none !important;
    }

    .search-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: black;
    }

    .search-box input {
        color: black !important;
    }

    .search-box input::-webkit-input-placeholder {
        color: black !important;
    }

    .left-toc {
        position: static;
        margin-bottom: 20px;
    }

    .left-toc h4 {
        text-align: start;
    }

    .left-toc .toc-list {
        text-align: start;
    }

    .blog-layout {
        display: block !important;
    }

    .right-sidebar {
        margin: 20px 0px;
    }

    .comments {
        padding: 15px 20px;
    }

    .cat-del ul {
        display: block;
    }

      .pagination-wrapper .page-numbers {
        padding: 6px 10px;
        font-size: 14px;
        margin: 0 3px;
    }


}