@media (min-width: 376px) and (max-width: 500px) {

    /*----- Major CSS for Sit Section Start -----*/
    :root{
        --mm-b-b: 0.01rem solid #A10F0D;
        --m-menu-bg: #23282D;
        --m-bar-b: 0.01rem solid #A10F0D;
        --m-bar-pd: 0 0.625rem;
        --m-menu-f-c: #fff;
        --m-menu-pd: 0.2rem 0.75rem;
        --m-menu-f-s: 1rem;
        --m-arrow-f-s: 1.25rem;

        --com-radi-heavy: 0.3rem;
        --com-radi-light: 0.15rem;
        --com-ts: all 0.3s ease;
        --com-fw-500: 500;
        --com-fw-550: 550;
        --com-fw-600: 600;
        --com-fw-700: 700;
        --s-light: 0 0.125rem 0.30rem rgb(0 0 0 / 20%);
        --s-dark: 0 0.3rem 0.625rem rgb(0 0 0 / 20%);
        --font-family:  'Noto Serif Bengali', 'Calibri', 'SutonnyMJ', 'Siyamrupali', 'Arial', Georgia, "Times New Roman", Times, serif;
    }
    *, *::after, *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    HTML,
    BODY {
        height:auto;
        width:100vw;
        margin:0;
        padding:0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
        overflow:auto;
        font-family: var(--font-family);
        scroll-behavior: auto;
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L20 20M40 0L20 20M0 40L20 20M40 40L20 20' stroke='%23009688' stroke-opacity='0.08' fill='none'/%3E%3C/svg%3E");
        
    }
    ul, li, ol{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .line1{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line2{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line3{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /*----- Major CSS for Sit Section End -----*/


    /*---------- Mobile menu Area Start ----------*/
    /* hide the checkbox visually */
    #menu-toggle { display: none; }
    #banglaDateTime{display: none;}
    .d_menu{display: none;}
    /* hide the checkbox visually */

    .navbar100{
        position: fixed;   /* 🔥 makes navbar fixed */
        top: 0;
        left: 0;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        z-index: 1000;
        height: 2.8rem;
        transition: transform 0.3s ease;
    }
    .navbar{
        height: 2.8rem;
        width: 95%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--s-dark);
        padding: 0 0.75rem;
        background: #ffffff;
        border-bottom: var(--m-bar-b);
    }
    .mbar{
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .hamburger-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
        cursor: pointer;
        width: 1.6rem;
        height: 1.6rem;
        box-shadow: var(--s-light);
        border-radius: 0.15rem;
    }
    .hamburger-label span {
        display: block;
        width: 1.20rem;
        height: 0.125rem;
        background: #A10F0D;
        border-radius: 0.125;
        transition: transform 0.35s ease, opacity 0.25s ease, width 0.3s ease;
        transform-origin: center;
    }
    #menu-toggle:checked ~ .navbar100 .navbar .hamburger-label span:nth-child(1) {
        transform: translateY(0.425rem) rotate(45deg);
    }
    #menu-toggle:checked ~ .navbar100 .navbar .hamburger-label span:nth-child(2) {
        opacity: 0; width: 0;
    }
    #menu-toggle:checked ~ .navbar100 .navbar .hamburger-label span:nth-child(3) {
        transform: translateY(-0.425rem) rotate(-45deg);
    }
    .logo{
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo img{
        height: 1.90rem;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ms_link{
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.3rem;
    }
    .ms_link a{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tiktokm, .youtubem, .facebookm{
        height: 1.30rem;
        width: 1.30rem;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        color: white;
        border-radius: 0.15rem;
        font-size: 1.1rem;
    }
    .youtubem{
        background: #FF0033;
    }
    .facebookm{
        background: #0767FF;
    }
    .tiktokm{
        background: #000000;
    }
    /* menu slide down */
    .mm_fixed{
        position: fixed;
        height: auto;
        width: 100%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2.82rem;
        opacity: 1;
        left: 0px;
        z-index: 999;
        transition: var(--com-ts);
        transform: translateX(-120%);
    }
    .mobile-menu {        
        height: auto;
        width: 95%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transition: 0.38s ease, opacity 0.28s ease;
    }
    .m_menu{
        height: auto;
        width: 40%;
        background: var(--m-menu-bg);
        box-shadow: var(--s-light);
    }
    .mm_main{
        position: relative;
        display: block;
        background: var(--m-menu-bg);
        border-bottom: var(--mm-b-b);
        position: relative;
        transition: var(--com-ts);
    }
    .mm_main .mm_a{
        color: var(--m-menu-f-c);
        font-family: var(--font-family);
        font-size: var(--m-menu-f-s);
        font-weight: var(--com-fw-550);
        text-decoration: none;
        display: block;
        padding: var(--m-menu-pd);
    }
    .mm_main label{
        color: var(--m-menu-f-c);
        font-family:var(--font-family);
        font-size: var(--m-menu-f-s);
        font-weight: var(--com-fw-550);
        text-decoration: none;
        display: block;
        width: 100%;
        height: 100%;
        padding: var(--m-menu-pd);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    .mm_main:hover{
        background: #A10F0D;
    }
    .mm_main label .marrow{
        position: absolute;
        font-size: var(--mobile-arrow-f-s);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: var(--common-ts);
    }
    .sub_menu_common{
        position: absolute;
        top: 0;
        left: 101%;
        width: 110%;
        background: var(--m-menu-bg);
        box-shadow: var(--s-dark);
        display: none;
        transition: var(--com-ts);
    }
    #dropasia:checked ~ .sub_menu_common,
    #dropmiddle:checked ~ .sub_menu_common,
    #dropmore:checked ~ .sub_menu_common{
        display: block;
    }
    #dropasia:checked + label #marrowasia,
    #dropmiddle:checked + label #marrowmiddle,
    #dropmore:checked + label #marrowmore{
        left: 90%;
        transition: var(--com-ts);
        font-size: 1.25rem;
    }
    .mm_sub{
        background: var(--m-menu-bg);
        border-bottom: var(--mm-b-b);
        transition: var(--com-ts);
    }
    .mm_sub:hover{
        background: #A10F0D;
        transition: var(--com-ts);
        transition: var(--com-ts);
    }
    .sm_a{
        color: #fff;
        font-family: var(--font-family);
        font-size: var(--m-menu-f-s);
        padding: var(--m-menu-pd);
        font-weight: var(--com-fw-500);
        display: block;
    }
    #dropasia, #dropmiddle, #dropmore{
        display: none;
    }
    #menu-toggle:checked ~ .mm_fixed{
        opacity: 1;
        transform: translateX(0);
    }
    /* ------- Header Area End ------- */

    /* ------- Footer Area ------- */
    .footer_max{
        height: 9.5rem;
        width: 100svw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }
    .footer{
        height: 100%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        box-shadow: var(--s-dark);
    }
    .single_line{
        height: 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .line{
        height: 0.0625rem;
        width: 45%;
        background: #A10F0D;
    }
    .footer_icon{
        height: 100%;
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        text-align: center;
        color: #A10F0D;
    }
    .logo_author{
        height: 2.25rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 1rem;
    }
    .footer_logo{
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer_logo a{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .footer_logo a img{
        height: 1.9rem;
        width: auto;
    }
    .author{
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .author a{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-family: var(--font-family);
        font-weight: var(--com-fw-600);
        font-size: 0.75rem;
        color: #A10F0D;
        cursor: pointer;
    }
    .footer_law{
        height: 1.625rem;
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.30rem;
    }
    .footer_law a{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-family);
        font-weight: var(--com-fw-600);
        font-size: 0.5rem;
        color: #A10F0D;
        cursor: pointer;
        text-align: center;
        padding: 0.0625rem 0.30rem;
        margin-left: 0.0625rem;
    }
    .footer_social{
        height: 1.5625rem;
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }
    .ms_link a{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .tiktokf, .youtubef, .facebookf{
        height: 1.3rem;
        width: 1.3rem;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        color: white;
        border-radius: 0.15rem;
        font-size: 1.1rem;
    }
    .youtubef{
        background: #FF0033;
    }
    .facebookf{
        background: #0767FF;
    }
    .tiktokf{
        background: #000000;
    }
    .site_copyright{
        height: 1rem;
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #A10F0D;
        font-family: var(--font-family);
        font-weight: var(--com-fw-600);
        font-size: 0.45rem;
    }
    /* ------- Footer Area ------- */

    /* ----------- secA Area Start ----------- */
    .secA{
        height: 200dvh;
        width: 95dvw;
        margin: auto;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-top: 2.9rem;
        gap: var(--gap-pd);
        margin-bottom: var(--gap-pd);
        box-shadow: var(--s-dark);
    }
    .secA_top{
        height: 50%;
        width: 100%;
        padding: var(--gap-pd);
        gap: var(--gap-pd);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        flex-grow: 1;
    }
    .secA_top_big{
        height: 35%;
        width: 100%;
        padding: var(--gap-pd);   
        box-shadow: var(--s-light);  
        display: flex;
        align-items: center;
        justify-content: center; 
    }
    .secA_top_big a{
        height: 100%;
        width: 100%;
        gap: var(--gap-pd);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .secA_top_big_img{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .secA_top_big_img img{
        width: 100%;
        height: 100%;
    }
    .secA_top_big_news{
        position: absolute;
        bottom: 0;
        top: auto;
        background: #fbeaf0;
        padding: var(--gap-pd);
        gap: var(--gap-mini);
    }
    .secA_top_big_news h3{
        font-family: var(--font-family);
        font-weight: var(--com-fw-600);
        font-size: var(--text-xl);
        color: #000203;
        line-height: 1.4;
    }
    .secA_top_big_news p{
        font-family: var(--font-family);
        font-weight: var(--com-fw-600);
        line-height: 1.4;
        font-size: var(--text-base);
        color: #525252;
    }
    .secA_top_bottom{
        height: 65%;
        width: 100%;
        gap: var(--gap-pd);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-grow: 1;
    }
    .secA_top_bottom a{
        height: 24%;
        width: 100%;
        background: #ffffff; 
        box-shadow: var(--s-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }
    .secA_top_bottom_img{
        height: 100%;
        width: 45%;
        padding: var(--gap-pd);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .secA_top_bottom_img img{
        height: 100%;
        width: 100%;
    }
    .secA_top_bottom_news{
        height: 100%;
        width: 55%;
        padding: var(--gap-pd);
        gap: var(--gap-mini);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }
    .secA_top_bottom_news h3{
        font-family: var(--font-family);
        font-size: var(--text-md);
        font-weight: var(--com-fw-600);
        line-height: 1.3;
        color: #000000;
    }
    .secA_top_bottom_news p{
        font-family: var(--font-family);
        font-size: var(--text-sm);
        font-weight: var(--com-fw-500);
        line-height: 1.2;
        color: #525252;
    }
    .secA_bottom{
        height: 50%;
        width: 100%;
        gap: var(--gap-pd);
        padding: var(--gap-pd);
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .secA_bottom_img{
        height: 49.5%;
        width: 100%;
        background: #ffffff;
        box-shadow: var(--s-dark);
        padding: var(--gap-pd);
    }
    .secA_bottom_img img{
        height: 100%;
        width: 100%;
    }
    :root{
        --gap-pd: 0.32rem;
        --gap-mini: 0.10rem;
        /* ---------- Text Size ---------- */
        --text-xs: clamp(0.70rem, 1.5vw, 0.80rem);  /* meta / date */
        --text-sm: clamp(0.80rem, 1.8vw, 0.90rem);  /* caption */
        --text-base: clamp(0.90rem, 2.0vw, 1.00rem);  /* body */
        --text-md: clamp(1.00rem, 2.2vw, 1.10rem);  /* card title */
        --text-lg: clamp(1.10rem, 2.5vw, 1.30rem);  /* section heading */
        --text-xl: clamp(1.30rem, 3.0vw, 1.70rem);  /* lead story */
        --text-2xl: clamp(1.60rem, 4.0vw, 2.20rem);  /* hero headline */
        --text-ticker: clamp(0.80rem, 1.8vw, 0.95rem); 
        /* ---------- Text Size ---------- */
    }
    /* ----------- secA Area End ----------- */
}