@media (max-width: 1920px) {}

@media (max-width: 1680px) {}

@media (max-width: 1600px) {}

@media (max-width: 1536px) {}

@media (max-width: 1400px) {
    .static-top .navbar-nav .nav-item {
        font-size: 15px;

        h2 {
            font-size: 15px;
        }
    }


    .hero-section .news-card {
        h4 {
            font-size: 13px;
        }
    }

    .hero-content h2 {
        font-size: 25px;
    }

    .hero-content h3 {
        margin-top: 0px;
        font-size: 1.4rem;
    }

    .video-right-card .news-card h4 {
        a {
            margin-top: 0px;
            font-size: 24px;
        }

    }

    .video-tranding-news .nav-link {
        font-size: 11px;
    }

    .international-section h3 a {
        font-size: 18px !important;
    }

    .sport-right-item .news-card h3 {
        font-size: 15px;
    }

    .sport-right-item .text-card h4 {
        font-size: 13px;
    }

    .political .tranding-news li h3 a {
        font-size: 17px;
    }

    .political-card-left .news-card h3 {
        font-size: 20px;
    }

    .finance-section .news-card h4 {
        font-size: 13px;
    }

    .nationwide-left-card .news-card h3 a {
        font-size: 20px;
    }

    .footer-socail-icon ul {
        gap: 19px !important;
    }

    .Photogallery-item .Photogallery-title h4 {
        font-size: 13px;
    }

    .details-right-card .news-card h2,
    .news-details-bottom h2 {
        font-size: 20px;
    }

    .international-right-card .news-card h4 a {
        font-size: 19px !important;
    }
}

@media (max-width: 1366px) {
    .nav-pills .nav-link {
        padding: 10px 42px;
        text-align: left;
    }
}

@media (max-width: 1280px) {
    .bangladesh-media .nav-pills li.nav-item {
        width: 48%;
    }
}

@media (max-width: 1200px) {
    .date-text {
        font-size: 12px;
    }

    .slider-image-text h3 {
        font-size: 10px;
    }

    .static-top .navbar-nav .nav-item {
        font-size: 13px;
        margin-top: 5px;

        h2 {
            font-size: 13px;
        }
    }

    .hero-content h2 {
        font-size: 20px;
    }

    .hero-content h3 {
        margin-top: 10px;
        font-size: 18px;
    }

    .hero-content-card .news-card h3 {
        font-size: 16px;
    }

    .hero-content h6 {
        padding-top: 5px;
    }

    .tranding-news .nav-link {
        font-size: 18px;
    }

    .video-tranding-news .nav-link {
        font-size: 10px;
        padding: 3px 3px
    }

    .international-section h3 a {
        font-size: 17px !important;
    }

    .international-right-card .news-card h4 {
        a {
            font-size: 18px !important;
        }
    }

    .international-section h4 a {
        font-size: 13px !important;
    }

    .news-bd .news-text {
        font-size: 12px;
        margin-top: 5px;
    }

    .custom-number {
        font-size: 25px;
    }

    .election-card .news-card {
        h3 {
            font-size: 12px;
            margin-top: 8px;
        }
    }

    .opinion-card .news-card h4 {
        font-size: 12px;
        margin-left: 15px;
        margin-top: 5px;
    }

    .political .tranding-news li h3 a {
        font-size: 15px;
    }

    .political-card-left .news-card h3 {
        font-size: 17px;
    }

    .finance-section .news-card h4 {
        font-size: 12px;
    }

    .special-content .special-content h3 {
        font-size: 22px;
    }

    .interview .news-card h4 {
        font-size: 14px;
    }

    .chittagong h3 {
        font-size: 20px;
    }

    .footer-socail-icon ul {
        gap: 10px !important;
    }

    .Photogallery-item .Photogallery-title h4 {
        font-size: 10px;
    }

    .recently-news-titile {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .details-content h4 {
        font-size: 22px;
    }

    .details-content h5 {
        margin-top: 10px;
    }

    .details-right-card .news-card h2,
    .news-details-bottom h2 {
        font-size: 18px;
    }

    .news-details-poll .nav-item {
        font-size: 15px;
    }

    .news-details-poll .tab-content .news-card h4 {
        font-size: 12px;
    }

    .entertainment-left-card {
        h3 {
            font-size: 25px;
        }
    }

    .entertainment-card h3 {
        font-size: 17px;
    }

    .special-content .special-item h3 {
        font-size: 20px;
    }

    .nav-pills .nav-link {
        padding: 10px 150px;
    }

    .bangladesh-media .nav-pills li.nav-item {
        width: 48%;
    }
}

@media (max-width: 1024px) {
    .bangladesh-media .nav-pills li.nav-item {
        width: 50%;
    }

    .nav-pills .nav-link {
        padding: 10px 150px;
    }

    .nav-pills .nav-link {
        box-shadow: 0 0 0 #888888;
    }
}

@media (max-width: 992px) {
    /* .navbar-area carries Bootstrap's .sticky-top unconditionally in the
       markup — fine on desktop, but on a phone screen it pins the whole
       logo+menu stack (category tabs, theme toggle, hamburger included) to
       the top permanently, eating vertical space the user never gets back
       while scrolling. Only the logo+search row itself should stay pinned,
       so cancel the section-wide sticky here... */
    .navbar-area.sticky-top {
        position: static;
    }

    /* ...and stick .mobile-logo-bar instead — it's a top-level section (see
       Header.jsx), a sibling of .navbar-area and the page content, not
       nested inside .navbar-area's own small .container. That matters:
       position: sticky can only stay "stuck" for as long as its own
       containing block has room left to scroll through. Nested inside the
       ~150px-tall .container, it would run out of room and unstick almost
       immediately; as a standalone section its containing block spans the
       whole page, so it stays pinned through the full scroll while the
       menu row (still inside .navbar-area) scrolls away normally beneath
       it. Needs its own opaque background (light + dark, matching
       .navbar-area's) since nothing else provides one here. */
    .mobile-logo-bar {
        position: sticky;
        top: 0;
        z-index: 1020;
        background: var(--white-color, #fff);
        padding-top: 8px;
        padding-bottom: 8px;
    }

    [data-bs-theme="dark"] .mobile-logo-bar {
        background: rgb(25 25 25);
    }

    /* Theme-toggle + search + hamburger now live in .mobile-header-icons,
       inside the sticky .mobile-logo-bar (reachable at any scroll depth on
       mobile) — the desktop nav row's own copies would otherwise show a
       second, redundant set right below. Every one of .header-actions's
       children is now hidden on mobile one way or another (left-tools/
       mega-toggle here, right-tools/search-btn already hidden below), so
       hide the whole column at once instead of it sitting there empty —
       otherwise it still claims its col-3 flex-basis even with nothing
       visible inside, squeezing the category-tabs column (col-9) into 75%
       width and clipping its tabs instead of using the full row. */
    .header-actions {
        display: none !important;
    }

    /* ...and let the now-only column actually use the freed-up space,
       since col-9's own flex-basis:75% doesn't change just because its
       sibling is hidden — .navbar-area .col-9 (two classes) outweighs
       Bootstrap's bare .col-sm-9/.col-md-9/.col-9 (one class each)
       regardless of which of those last resolved for the viewport. */
    .navbar-area .col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mobile-header-icons {
        gap: 8px;
    }

    .mobile-header-icons .icon-btn {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 4px;
        font-size: 17px;
    }

    .mobile-header-icons .fa-magnifying-glass {
        font-size: 19px;
    }

    .main-logo img {
        width: 14rem;
    }

    .search-btn {
        display: none !important;
    }

    .top-dates {
        display: none;
    }

    .hero-section .news-card h4 {
        font-size: 18px;
    }

    .hero-content h2 {
        font-size: 25px;
    }

    .hero-content h3 {
        font-size: 20px;
    }

    .hero-content-card .news-card h3 {
        font-size: 20px;
    }

    .static-top .navbar-nav .nav-item {
        font-size: 16px;
        margin-top: 0px;

        h2 {
            font-size: 16px;
        }
    }

    .nav-link-item {
        font-size: 16px;
    }

    .right-tools {
        display: none !important;
    }

    .right-slider {
        display: none;
    }

    /* Mobile header is a stack of 3 rows (ad banner, logo, menu) with no
       lg+ styling to shrink it — trim the padding/margins each row carries
       so the header doesn't eat a quarter of a phone screen before any
       content shows. */
    .top-header {
        margin-bottom: 0;
    }

    .top-ads img {
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .mobile-logo-bar .row {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    /* The logo <img> is inline by default inside its <h1>, so even though
       the image itself shrinks (.main-logo img above), the h1's own
       line-height still reserves a "strut" of extra space next to it
       (baseline alignment for an inline replaced element) — forcing block
       display drops that phantom space, so the row's height actually
       tracks the image's height instead of image height + a line-height. */
    /* theme.css's ".main-logo img { margin: 1rem 0 }" is meant for the
       desktop top-header logo but isn't scoped to it, so it was also
       adding 32px of vertical margin here — block margins with nothing
       else in the column collapse straight into the row's own height. */
    .mobile-logo-bar .main-logo h1 img {
        display: block;
        margin: 0;
    }

    /* .mobile-search's own margin-top:15px (style.css) was a nudge to
       center the search icon against the old, much taller logo row — now
       that the row is its natural compact height, the row's own
       align-items:center already centers this column and the leftover
       margin just pushes the icon off-center again. */
    .mobile-logo-bar .mobile-search {
        margin-top: 0;
    }

    .nav-link-item {
        padding: 6px 10px;
    }

    .header-actions .theme-btn,
    .header-actions #theme-toggle,
    .header-actions .icon-btn {
        width: 34px;
        height: 34px;
    }

    .news-menu {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .news-menu .nav-link {
        font-size: 18px;
        padding: 12px;
    }

    .top-menu .nav-link {
        font-size: 16px;
        padding: 12px 18px;
    }

    .notice-text {
        font-size: 22px;
    }

    .international-section h3 a {
        font-size: 17px !important;
    }

    .bangladesh-media {
        margin-top: 5px;

        .news-card {
            margin-top: 2px;
            padding-top: 5px;
        }
    }

    .bangladesh-media .news-card h3 a {
        font-size: 18px !important;
    }

    .bangladesh-media .tab-content .news-text {
        font-size: 17px;
        margin-top: 12px;
    }

    .election-card .news-card h3 {
        font-size: 16px;
    }

    .election-card .news-card {
        margin-bottom: 5px;
    }

    .opinion-card .news-card h4 {
        font-size: 16px;
        margin-left: 0px;
        margin-top: 5px;
    }

    .video-right-card .news-card h4 {
        a {
            margin-top: 0px;
            font-size: 18px;
        }
    }

    .video-content .video-item h4 a {
        font-size: 22px;
    }

    .sport-right-item .news-card h3 {
        font-size: 18px;
    }

    .sport-right-item .text-card h4 {
        font-size: 16px;
    }

    .finance-section .news-card h4 {
        font-size: 17px;
    }

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

    .interview .news-card h4 {
        font-size: 18px;
    }

    .chittagong {
        margin-top: 3px;
        padding: 0px;
    }

    .chittagong h3 {
        font-size: 22px;
    }

    .footer-socail-icon {
        margin-left: -30px;
    }

    .footer-extra-links {
        padding-right: -30px;
    }

    .footer-socail-icon ul {
        gap: 4px !important;
    }

    .Photogallery-item .Photogallery-title h4 {
        font-size: 16px;
    }

    .recently-news-card h4 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .right-ads {
        border-left: none;
    }

    .bangladesh-media {
        border-left: none;

    }

    .election-card {
        border-right: none;
    }

    .finance-section {
        border-left: none;
    }

    .special-content .international-right-card {
        border-right: none;
    }

    .law .row>div:nth-child(2) .law-news-container {
        border: none;
    }

    .chittagong-card {
        border: none;
    }

    .navbar-collapse {
        display: none;
    }

    .election-card>div:nth-child(n+4) .news-card {
        border-bottom: 1px solid #d9d9d9;
    }

    .interview {
        margin-left: 0;
    }

    .nav-pills .nav-link {
        padding: 10px 60px;
    }
}

@media (max-width: 767px) {
    .hero-top {
        display: flex;
        flex-direction: column;
    }

    .hero-img {
        order: -1;
        padding-bottom: 10px;

    }

    .hero-content h2 {
        font-size: 25px;
        font-weight: 600;
    }

    .hero-content h3 {
        margin-top: 5px;
        font-size: 25px;
    }

    .nationwide-searching select {
        margin-top: 10px;
    }

    .nationwide-searching .nationwide-button {
        margin-top: 10px;
    }

    /* Mega menu — top pill row (categories without children). With a real
       category list this can be 10-15+ items, which wrap across many rows
       in a flex/grid layout — and this container's own reported box height
       does not reliably grow to contain every wrapped row (verified: rows
       paint correctly, but the box used to place the *next* sibling comes
       out shorter than the content), so the tail rows visually spill out
       and overlap the accordion list below. A single-row horizontal
       scroller sidesteps the whole class of bug: height is always exactly
       one row, no wrap-height math involved. It also matches the drag-to-
       scroll category strip already used for the main nav (custom.js). */
    .mega-menu-nav {
        padding-bottom: 10px;
        overflow: hidden;
    }

    .mega-menu-nav ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mega-menu-nav ul::-webkit-scrollbar {
        display: none;
    }

    .mega-menu-nav .nav-item {
        flex: 0 0 auto;
    }

    .mega-menu-nav .nav-link {
        padding: 7px 14px;
        font-size: 14px;
        background: #f5f5f5;
        border-radius: 20px;
        white-space: nowrap;
    }

    .mega-menu-nav .nav-link.active {
        background: var(--Hover-color);
        color: #ffffff;
    }

    [data-bs-theme="dark"] .mega-menu-nav .nav-link {
        background: rgba(255, 255, 255, .08);
    }

    /* Mega menu — kill the stacked container/modal-body/card padding so the
       menu reads edge-to-edge on small screens instead of squeezed into a
       narrow inset column. Scoped to #myModal only — other modals/containers
       on the site keep Bootstrap's normal gutters. */
    #myModal .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #myModal .modal-body {
        padding: 10px 0;
    }

    /* Mega menu — accordion list (categories with children) */
    .mega-card {
        padding: 12px;
        border-radius: 0;
    }

    .mega-menu-list {
        padding: 6px 0;
        margin-bottom: 4px;
    }

    /* flex-direction:column (rather than switching display modes) keeps the
       header row's own d-flex/justify-content-between intact while forcing
       every <li> to stack full-width — this survives Bootstrap's !important
       utility classes (d-flex/flex-wrap/gap-4) on the <ul> because it edits
       the flex axis instead of fighting them over display/wrap. */
    .mega-menu-list ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    .mega-menu-list ul li {
        width: 100%;
    }

    .mega-menu-list ul li a {
        display: block;
        width: 100%;
    }

    /* Header row: category name + chevron toggle */
    .mega-menu-list ul li:first-child {
        cursor: pointer;
    }

    .mega-menu-list ul li:first-child .nav-link {
        padding: 12px 14px;
        margin: 0;
        font-weight: 600;
    }

    /* Desktop-only separator (chevron-right) — never needed on mobile */
    .mega-menu-list ul li:nth-child(2) {
        display: none !important;
    }

    /* Children stay hidden until the parent <ul> gets .active from custom.js */
    .mega-menu-list ul li:nth-child(n+3) {
        display: none;
    }

    .mega-menu-list ul.active li:nth-child(n+3) {
        display: block;
    }

    .mega-menu-list ul li:nth-child(n+3) a {
        padding: 10px 14px 10px 22px;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }

    [data-bs-theme="dark"] .mega-menu-list ul li:nth-child(n+3) a {
        border-bottom-color: rgba(255, 255, 255, .1);
    }

    .mega-menu-list ul li:nth-child(n+3):last-child a {
        border-bottom: none;
    }

    .dropdown-icon {
        display: block;
        transition: transform .3s;
    }

    .mega-menu-list ul.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Detail Content */
    .follow-wrapper {
        flex-direction: column;
    }

    .follow-btn {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid #333;
    }

    .social-section {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .social-link {
        font-size: 16px;
    }

    .hero-content {
        h6 {
            padding-top: 8px;
        }
    }


    .international-right-card .news-card h4 {
        margin: 20px 0 0 15px;
        font-size: 25px;
    }

    .political .col-lg-3 .news-card h4,
    .special-content .col-lg-3 .shadow-none h4 {
        margin: 20px 0 0 15px;

        a {
            font-size: 19px;
        }
    }

    .tranding-news .nav-link {
        font-size: 14px;
        padding: 5px 5px;
    }

    .hero-section .news-card h4 {
        margin-top: 20px;
        font-size: 18px;
    }

    .bangladesh-media .tab-content .news-text {
        font-size: 17px;
    }

    .video-content .video-item h4 a {
        font-size: 25px;
    }

    .political .tranding-news li h3 a {
        font-size: 12px;
    }

    .footer-socail-icon {
        margin-left: 0px;
        padding-left: 0px;
    }

    .details-content h3 {
        font-size: 25px;
    }

    .details-content h4 {
        font-size: 18px;
    }

    .details-content h2 {
        font-size: 32px;
    }

    .law-news-container {
        border: none;
    }

    .opinion-card {
        border: none;
    }

    .nav-pills .nav-link {
        padding: 10px 40px;
    }
}

@media (max-width: 576px) {
    .notice-text {
        margin-top: 13px;

        a {
            font-size: 20px;
        }
    }

    .custom-navbar {
        margin-left: -6px;
    }

    .nav-link-item {
        font-size: 16px;
    }

    .sticky-logo {
        height: 23px;
        width: 59px;
        margin-left: 40px;
    }

    .political .tranding-news li h3 a {
        font-size: 10px;
    }
}

@media (max-width: 520px) {
    .main-logo img {
        width: 11rem;
    }

    .main-logo h3 {
        font-size: 20px;
    }

    .notice-text {
        margin-top: 13px;

        a {
            font-size: 18px;
        }
    }

    .entertainment-card .news-card h3 {
        font-size: 15px;
    }

    .chittagong {
        padding-top: 0px;
        margin-top: 0px;
    }

    .sticky-logo {
        height: 23px;
        width: 59px;
        margin-left: 40px;
    }

    .modal-header .barnd-logo-modal img {
        width: 110px;
        margin-left: 0;
    }

    .political .col-lg-3 .news-card h4,
    .special-content .col-lg-3 .shadow-none h4 {
        margin: 4px 0 0 15px;
    }

    .hero-section .news-card h4 {
        margin-top: 4px;
    }

    .international-right-card .news-card h4 {
        margin: 0px 0 0 15px;
        font-size: 16px !important;

    }

    .bangladesh-media .tab-content .news-text {
        margin-top: 8px;
    }

    .hero-content-card .news-card h3 {
        font-size: 18px;
    }

    .bangladesh-media .news-card h3 a {
        font-size: 16px !important;
    }

    international-right-card .news-card h4 {
        a {
            font-size: 16px !important;
        }
    }

    .details-content h4 {
        font-size: 16px;
    }

    .details-content h5 {
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .details-content p {

        font-size: 16px;
        line-height: 25px;

    }

    .details-more-news h5 a {
        border-bottom: none;
    }

    .recently-news-card a img {
        border-radius: 3%;
    }

    .recently-news-card h4 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .details-content {
        h2 {
            font-size: 28px;
        }

        h3 {
            font-size: 24px;
        }
    }

    .digital-card h4 a {
        font-size: 20px;
    }

    .video-right-card .news-card h4 {
        a {
            margin-top: 0px;
            font-size: 16px;
        }
    }


    .footer-logo-icon {
        .footer-extra-links {
            border-right: none;
        }
    }

    .entertainment-card .news-card {
        border-right: none;
        margin-right: 0px;
        padding-right: 0px;
    }

    .hero-middle-card {
        padding-top: 0px;
    }
}