/* ==========================================================================
   HEADER / NAVBAR — RESPONSIVE CSS (cleaned & deduplicated)
   Matches the <header class="main_header"> markup exactly.
   Load this AFTER your main site CSS so these rules win.

   NOTE: the big combined file had the same selector
   (.navbar-custom .navbar-collapse.show) patched THREE separate times
   with conflicting values (one said height:100vh, another said
   height:auto + max-height:calc(100vh - 70px), the last said
   max-height:100vh again) — later rules were silently cancelling the
   earlier fix. Below is ONE final version only (no dead/contradicting
   rules left in).
   ========================================================================== */

/* ---------- ALWAYS (not just mobile) ----------
   Kills a stray "<p>menu</p>" debug text that sits as a direct sibling
   inside .top_menu, and stops meg-menu.css from forcing .top_menu into
   a column layout (which stacks the hamburger icon above that stray
   word at every screen size). */
/*.top_menu > p {*/
/*    display: none !important;*/
/*}*/

/*.top_menu {*/
/*    flex-direction: row !important;*/
/*    align-items: center !important;*/
/*    gap: 10px !important;*/
/*}*/

/* ---------- LAPTOP (<=1200px) ---------- */
@media (max-width: 1200px) {
    /*.container {*/
    /*    max-width: 100%;*/
        /*padding: 0 20px;*/
    /*}*/
    
    .overlap-icon{
            position: unset;
                margin: 10px;
    margin-bottom: 0;
    }
    
    .card-body {
    padding: 10px;
}

    .header_mid_right {
        gap: 20px;
    }

    .top_right {
        gap: 16px;
    }
}

/* ---------- TABLET (<=992px) ---------- */
@media (max-width: 992px) {
    .topmain_section {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    
    .top_menu > p {
    display: none !important;
}

    .top_right {
        gap: 14px;
        flex-wrap: wrap;
    }

    .header_mid_section {
        padding: 12px 0;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .header_mid_right {
        gap: 16px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .main_header .navbar-brand img {
        max-width: 130px;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
    }
}

/* ---------- MOBILE (<=767px) ---------- */
@media (max-width: 767px) {
    /* .menu-container is the desktop mega-menu (hamburger + tab panel
       with Solutions/Quick Links/About/Partners/Community) — hidden on
       mobile in favour of navbar-custom's own collapse menu. */
    .menu-container {
        display: none !important;
    }
    
    .copy_mainse {
    display: block;
    justify-content: space-between;
    gap: 10px;
}

.lang_but {
    text-align: center;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: normal !important;
    gap: 20px;
}

    /* .menu_mainsection is a SECOND, separate stellarnav mobile menu
       that sits right below the header. It's redundant with
       navbar-custom (which already handles mobile nav) and was the
       cause of a stray "☰ Menu" bar + extra gap before the hero. */
    .menu_mainsection {
        display: none !important;
    }

    .navbar-custom {
        display: block;
    }

    /* .navbar-custom carries BOTH "fixed-top" and its own inline
       positioning — this detaches the toggle from the header row and
       makes it float at a random left offset instead of sitting
       inline. Pin it back into normal flow. */
    .navbar-custom.fixed-top {
        left: auto !important;
        /*top:10px;*/
    }

    .navbar-custom .navbar-toggler {
        padding: 0;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 10001;
    }

    /* keep just the hamburger icon, hide the "Menu" text label so it
       doesn't wrap/overflow next to the logo */
    .navbar-custom .menu-icon.mobl p {
        display: none;
    }

    .navbar-custom .menu-icon.mobl span {
        background: #fff;
    }

    /* animate hamburger -> "✕" when the panel is open, so there's an
       obvious way to close it again */
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: #242424;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(2) {
        opacity: 0;
    }
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: #242424;
    }

    /* Open panel: cover the full screen (both while animating -
       ".collapsing" - and once fully open - ".show" - so it doesn't
       visibly "snap" partway through the animation). Sized to content
       with its own scroll, not forced to a dead-space-leaving 100vh. */
    .navbar-custom .navbar-collapse.collapsing,
    .navbar-custom .navbar-collapse.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        z-index: 10000 !important;
        padding: 70px 15px 30px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    .navbar-custom .navbar-nav .nav-link {
        padding: 0.7rem 1rem;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #ddd;
        background: #F2F3F7;
    }

    /* remove the small decorative grid icon next to every menu label —
       it doesn't mean anything to users, just clutter */
    .navbar-custom .nav-link .fa-th,
    .navbar-custom .nav-link i.fa-th {
        display: none !important;
    }

    /* sub-menu links (e.g. "AVA Property", "AVA Space"...) — indent +
       shrink so they read clearly as children of the row above */
    .navbar-custom .dropdown-menu {
        padding-left: 14px !important;
    }

    .navbar-custom .dropdown-item {
        font-size: 14px !important;
        padding: 0.65rem 1rem !important;
        border-bottom: solid 1px #eee !important;
    }

    .header_mid_right {
        /*justify-content: flex-end;*/
        gap: 12px;
    }

    .sign_main a p {
        display: none;
    }

    .mid_cart_section {
        gap: 12px;
    }
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media (max-width: 480px) {
    .topmain_section {
        display: block;
    }

    .top_left {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        padding: 8px;
    }

    /* "How it Works / Support" links + language switcher hidden on the
       smallest screens to keep the top bar to one compact row */
    .top_right {
        display: none;
    }

    .header_mid_right {
        gap: 12px;
    }

    .dropdown-toggle {
        padding: 8px 10px 8px 14px;
        font-size: 12px;
    }
}

/* ---------- EXTRA SMALL (<=360px) ---------- */
@media (max-width: 360px) {
    .navbar-custom .navbar-nav {
        min-width: 100%;
    }

    .main_header .navbar-brand img {
        max-width: 110px;
    }
}

@media (max-width: 992px) {
    @media (max-width: 767px) {
        .navbar-custom .navbar-toggler {
            padding: 0;
            border: none;
            box-shadow: none;
            position: relative;
            z-index: 10001;
        }
    }
}



@media (max-width: 992px) {
    @media (max-width: 767px) {
        .navbar-custom .navbar-collapse.collapsing, .navbar-custom .navbar-collapse.show {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: auto !important;
            max-height: calc(100vh - 70px) !important;
            overflow-y: auto !important;
            background: #fff !important;
            z-index: 10000 !important;
            padding: 70px 15px 30px !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
        }
    }
}





/* ==========================================================================
   AVA JÑĀNA — RESPONSIVE CSS  (FINAL / CLEAN)
   --------------------------------------------------------------------------
   Ye file purani responsive.css ko REPLACE karti hai (usme duplicate rules
   aur nested @media the, jo browser me chalte hi nahi).

   Include order (ye file sabse last me):
     style.css → stellarnav.css → meg-menu.css → mobile-menu.css → responsive.css

   <head> me ye meta zaroor hona chahiye, warna koi bhi media query
   mobile par apply nahi hogi:
     <meta name="viewport" content="width=device-width, initial-scale=1">

   Breakpoints: 1400 / 1200 / 992 / 767 / 575 / 480 / 360
   ========================================================================== */


/* ==========================================================================
   0. GLOBAL FIXES — har screen par
   ========================================================================== */

/* Horizontal (side) scroll ka main guard */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
}

/* flex/grid children default me shrink nahi hote -> content bahar nikal jaata hai */
.main-grid > *,
.layout-grid > *,
.card-grid > *,
.video-grid > *,
.expert_grid_contributors > *,
.levels_grid > *,
.form-grid > *,
.search-box > *,
.card_footers > *,
.discussion_card_header > *,
.header_mid_section > *,
.topmain_section > * {
    min-width: 0;
}

/* style.css me .search-icon ka width: 2% hai -> icon dab jaata hai */
.search-icon {
    width: auto;
}

/* mobile-menu.css .fixed-top ko left:10% par push karta hai -> page right
   side se bahar nikal jaata hai */


/* mobile-menu.css me min-width: 450/460px hai -> 360-400px phone par pura
   page chauda ho jaata hai (side scroll ka doosra bada kaaran) */
.navbar-custom .navbar-nav {
    min-width: 100%;
}


/* ==========================================================================
   1. <= 1400px — chhota laptop
   ========================================================================== */
@media (max-width: 1400px) {

    /*.container {*/
    /*    max-width: 1140px;*/
    /*}*/

    .search_cardbg {
        padding: 32px 24px 24px;
    }

    .category-card {
        padding: 24px 24px 20px;
    }

    .ask-ava-section {
        padding: 40px;
        margin-top: 72px;
    }

    .ask-container {
        gap: 40px;
    }

    .stellarnav li a {
        padding: 20px 12px;
        font-size: 13px;
    }
}


/* ==========================================================================
   2. <= 1200px — tablet landscape
   ========================================================================== */
@media (max-width: 1200px) {

    /*.container {*/
    /*    max-width: 100%;*/
    /*}*/

    .search-card h1,
    .main_title h2,
    .title-area h2,
    .expert_contributors_header_text h2,
    .reward_point_title h2,
    .ask-text h2 {
        font-size: 26px;
    }

    .section-head h2,
    .card-header h2,
    .name_contributors {
        font-size: 20px;
    }

    .main-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 20px;
    }

    .layout-grid {
        grid-template-columns: 1fr 280px;
        gap: 20px;
    }

    .video-grid,
    .expert_grid_contributors {
        grid-template-columns: repeat(2, 1fr);
    }

    .ask-container {
        gap: 32px;
    }

    .trending_expert_section,
    .expert_section,
    .reward_point_section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .ava_ecosystem {
        padding-bottom: 56px;
    }

    .header_mid_lift a img {
        max-width: 140px;
    }

    .header_mid_right {
        gap: 12px;
    }

    .top_right {
        gap: 16px;
    }

    .stellarnav li a {
        padding: 18px 10px;
        font-size: 13px;
    }

    div#v-pills-tabContent {
        min-height: auto;
    }
}


/* ==========================================================================
   3. <= 992px — tablet portrait
   ========================================================================== */
@media (max-width: 992px) {

    .sec_padding {
        padding: 20px 0;
    }

    /* ---------- Header ---------- */
    .topmain_section {
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .top_left,
    .top_right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .top_menu > p {
        display: none;
    }

    .link_button {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header_mid_section {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 12px 0;
    }

    .header_mid_right {
        flex-wrap: wrap;
        row-gap: 10px;
        gap: 14px;
        justify-content: flex-end;
    }

    .main_header .navbar-brand img,
    .header_mid_lift a img {
        max-width: 130px;
    }

    /* fixed header ka 149px gap tablet par kam */
    .site_main {
        margin-top: 110px;
    }

    /* ---------- Main layout: single column ---------- */
    .main-grid,
    .layout-grid,
    .card-grid,
    .dashboard-grid,
    .post_list,
    .topics_post_grid,
    .article-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .video-grid,
    .expert_grid_contributors {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .rewards-layout {
        flex-direction: column;
    }

    .levels_grid {
        flex: none;
        grid-template-columns: 1fr 1fr;
    }

    .article-sidebar {
        position: static;
    }

    /* ---------- Section headers stack ---------- */
    .main_title,
    .section-head,
    .trending_main_header,
    .expert_contributors_header_row,
    .feed-header,
    .discussion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* ---------- Search ---------- */
    .search-box {
        flex-wrap: wrap;
    }

    .search-box input {
        flex: 1 1 100%;
        width: 100%;
    }

    .search-box button {
        width: 100%;
        padding: 12px 24px;
    }

    .search-icon {
        top: 26px;
        transform: none;
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chip {
        margin-right: 0;
    }

    /* filter chips horizontally scroll karein, toote nahi */
    .search-input-containermain,
    .treading_expfil,
    .search-filter-wrapper {
        flex-wrap: wrap;
    }

    .filter-chips {
        width: 100%;
        overflow-x: auto;
        border-left: none;
        padding-left: 0;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chips ul {
        flex-wrap: nowrap;
    }

    .filter-chips li button {
        white-space: nowrap;
    }

    .sort-dropdown {
        width: 100%;
    }

    /* ---------- Ask AVA form ---------- */
    .ask-ava-section {
        padding: 32px 24px;
        margin-top: 48px;
        border-radius: 24px;
    }

    .ask-container {
        flex-direction: column;
        gap: 28px;
    }

    .ask-text,
    .ask-form {
        flex: 1 1 100%;
        width: 100%;
    }

    /* ---------- Forum / article ---------- */
    .forum-post {
        grid-template-columns: 1fr;
    }

    .forum-post-meta {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        padding-right: 0;
        padding-bottom: 8px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ---------- Mega menu panel ---------- */
    .my_navepil,
    div#v-pills-tabContent {
        width: 100%;
    }

    .smart_homesoluction ul {
        column-count: 1;
        margin-left: 0;
    }

    /* ---------- Footer ---------- */
    .footer_mainsection {
        padding: 32px 0;
    }

    .boder_lefq {
        padding-left: 0;
        border-left: none;
    }

    .footer_about,
    .footer_quicklink,
    .footer_soluction,
    .footer_community,
    .footer_contact {
        margin-bottom: 24px;
    }
}


/* ==========================================================================
   4. <= 767px — mobile
   ========================================================================== */
@media (max-width: 767px) {

    .container {
        /*max-width: 100%;*/
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ---------- Navigation ---------- */
    .stellarnav,
    .menu_mainsection,
    .menu-container {
        display: none !important;
    }

    .navbar-custom {
        display: block;
    }

    .main_header.sticky {
        -webkit-animation: none;
        animation: none;
    }

    /* fixed header ka top gap mobile par hata dein */
    .site_main {
        margin-top: 0;
    }

    .navbar-custom .navbar-toggler {
        padding: 0;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 10001;
    }

    .navbar-custom .menu-icon.mobl p {
        display: none;
    }

    .navbar-custom .menu-icon.mobl span {
        background: #fff;
    }

    /* hamburger -> cross */
    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: #242424;
    }

    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(2) {
        opacity: 0;
    }

    .navbar-custom .navbar-toggler[aria-expanded="true"] .menu-icon.mobl span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: #242424;
    }

    /* open panel — ek hi version, koi duplicate nahi */
    .navbar-custom .navbar-collapse.collapsing,
    .navbar-custom .navbar-collapse.show {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        z-index: 10000 !important;
        padding: 70px 15px 30px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    }

    .navbar-custom .navbar-nav {
        min-width: 100% !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    .navbar-custom .navbar-nav .nav-link {
        padding: 0.7rem 1rem;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #ddd;
        background: #F2F3F7;
    }

    .navbar-custom .nav-link .fa-th,
    .navbar-custom .nav-link i.fa-th {
        display: none !important;
    }

    .navbar-custom .dropdown-menu {
        padding-left: 14px !important;
    }

    .navbar-custom .dropdown-item {
        font-size: 14px !important;
        padding: 0.65rem 1rem !important;
        border-bottom: solid 1px #eee !important;
    }

    .sign_main a p {
        display: none;
    }

    .header_mid_right,
    .mid_cart_section {
        gap: 12px;
    }

    /* ---------- Typography ---------- */
    .search-card h1,
    .main_title h2,
    .title-area h2,
    .expert_contributors_header_text h2,
    .reward_point_title h2,
    .ask-text h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .search-card p,
    .main_title p,
    .title-area p,
    .expert_contributors_header_text p,
    .reward_point_title p {
        font-size: 14px;
    }

    .card_title_main {
        font-size: 17px;
    }

    .topic-item h3 {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .article-title {
        font-size: 22px;
    }

    /* ---------- Cards ---------- */
    .search_cardbg {
        padding: 24px 16px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    .sidebar_cardbg,
    .category-card,
    .discussion-card,
    .info_box_discusionwork,
    .points_info_work,
    .level_card,
    .expert_card_contributors {
        padding: 20px 16px;
        border-radius: 12px;
    }

    /* ---------- Ek column ---------- */
    .video-grid,
    .expert_grid_contributors,
    .levels_grid,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .level-5,
    .full-width {
        grid-column: span 1;
    }

    /* ---------- Section spacing ---------- */
    .trending_expert_section,
    .expert_section,
    .reward_point_section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .ava_ecosystem {
        padding-bottom: 40px;
        margin-top: 30px;
    }

    .ask-ava-section {
        margin-top: 40px;
        padding: 24px 18px;
    }

    /* ---------- Rows wrap ---------- */
    .card_footers,
    .discussion_card_header,
    .card-header,
    .point_jana,
    .level-header,
    .comment-form-footer,
    .forum-post-footer,
    .right_sidebar_footer,
    .tag-row,
    .tags,
    .tags_contributors,
    .meta-pills {
        flex-wrap: wrap;
        gap: 10px;
    }

    .card_stats_dis {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        border-top: solid 1px #ededed;
        padding-top: 12px;
    }

    .item-meta,
    .stats {
        flex-wrap: wrap;
        gap: 10px;
    }

    .badge_main {
        margin-left: 0;
    }

    .video-thumb {
        height: 190px;
    }

    /* ---------- Article page ---------- */
    .discussion-summary {
        flex-direction: column;
    }

    .discussion-summary-stats {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        min-width: 0;
    }

    .feedback-actions {
        margin-left: 0;
    }

    .ava-step-pill {
        white-space: normal;
    }

    /* ---------- Footer ---------- */
    .copy_mainse {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .copy_left,
    .copy_right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .lang_but {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-bottom: 24px;
    }

    .follow_us {
        gap: 12px;
    }
}


/* ==========================================================================
   5. <= 575px — small mobile
   ========================================================================== */
@media (max-width: 575px) {

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    p {
        font-size: 14px;
    }

    .search-card h1,
    .main_title h2,
    .title-area h2,
    .expert_contributors_header_text h2,
    .reward_point_title h2,
    .ask-text h2 {
        font-size: 20px;
    }

    .badge_search {
        font-size: 12px;
        padding: 2px 10px;
    }

    .search-box input {
        padding: 12px 16px 12px 38px;
        font-size: 13px;
    }

    .search-icon {
        left: 14px;
        top: 22px;
    }

    .sell_avamartmain p {
        font-size: 11px;
    }

    .link_button a {
        font-size: 11px;
        padding: 7px 12px;
    }

    .header_mid_lift a img {
        max-width: 120px;
    }

    .header_mid_right .btn-outline,
    .header_mid_right .btn-primary,
    .header_mid_right .btn-icon {
        font-size: 11px;
        padding: 7px 12px;
    }

    .video-thumb {
        height: 170px;
    }

    .avatar_ar {
        width: 34px;
        height: 34px;
        font-size: 12px;
        margin-right: 8px;
    }

    .contributors_profile_img img {
        width: 68px;
        height: 68px;
    }

    .name_contributors {
        font-size: 18px;
    }

    .feed-item,
    .topic-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .stats {
        margin-left: 0;
    }

    .btn-joinfee,
    .btn-browseall,
    .btn_submit_ques {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .points_info_work,
    .info_box_discusionwork {
        padding: 20px 14px;
    }
}


/* ==========================================================================
   6. <= 480px
   ========================================================================== */
@media (max-width: 480px) {

    .topmain_section {
        display: block;
    }

    .top_left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px;
    }

    /* top bar ke extra links chhoti screen par hide */
    .top_right {
        display: none;
    }



    .navbar-custom .navbar-nav {
        min-width: 100%;
        margin-top: 0;
    }

    .search_cardbg,
    .sidebar_cardbg {
        padding: 18px 14px;
    }

    .google_tral .form-select,
    .dropdown-toggle {
        padding: 8px 12px;
        font-size: 12px;
    }

    .section-head h2,
    .card-header h2,
    .feed-header h2,
    .info_box_discusionwork h3,
    .points_info_work h2 {
        font-size: 18px;
    }

    .card_title_main {
        font-size: 16px;
    }

    .video-thumb {
        height: 150px;
    }

    .chip,
    .tag,
    .tag-blue1,
    .filter-chips li button {
        font-size: 11px;
        padding: 6px 10px;
    }

    .chip {
        margin-bottom: 6px;
    }

    .ask-ava-section {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        font-size: 13px;
        padding: 9px 12px;
    }

    .input-group textarea {
        height: 100px;
    }

    .footer_mainsection {
        padding: 24px 0;
    }
}


/* ==========================================================================
   7. <= 360px — extra small
   ========================================================================== */
@media (max-width: 360px) {

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .search-card h1,
    .main_title h2,
    .title-area h2,
    .expert_contributors_header_text h2,
    .reward_point_title h2,
    .ask-text h2 {
        font-size: 18px;
    }

    .main_header .navbar-brand img,
    .header_mid_lift a img {
        max-width: 105px;
    }

    .header_mid_right .btn-outline,
    .header_mid_right .btn-primary {
        font-size: 10px;
        padding: 6px 10px;
    }

    .link_button {
        gap: 6px;
    }

    .link_button a {
        font-size: 10px;
        padding: 6px 10px;
    }

    .video-thumb {
        height: 135px;
    }

    .point_jana h2 {
        font-size: 20px;
    }
}


/* ==========================================================================
   8. Landscape phone
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {

    .site_main {
        margin-top: 0;
    }

    .article-sidebar {
        position: static;
    }

    .navbar-custom .navbar-collapse.show {
        max-height: 100vh !important;
        padding-top: 55px !important;
    }
}




@media (max-width: 992px) {
    .site_main {
    margin-top: 245px;
    background-color: #f5f5f52c;
}
    .search-icon {
        left: 13px;
        top: 22px;
        display: none;
    }
    
    .filter-chips ul {
    border: none;
    padding: 7px 0;
    margin: 0;
    display: flex;
    gap: 8px;
}
     .action-btns {
            width: 100%;
            flex-direction: column;
            gap: 0px !important;
             display: flex;
        }
        
        .trending_main_header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 20px;
}


a.btn-primary.joinfree {
    background: rgb(0 69 158) !important;
}
.header_mid_right .btn-icon i {
    font-size: 12px;
}

.header_mid_right i.bi.bi-dot {
    font-size: 31px;
    display: none;
}


}



@media (max-width: 992px) {
    .menu-icon {
        width: 30px;
        height: auto;
        position: relative;
        cursor: pointer;
        z-index: 100;
        top: 0 !important;
    }
}




@media (max-width: 992px) {
    .site_main_inner {
        margin-top: 175px;
        
    }
}





/* ==========================================================================
   AVA Jñāna — Article page: RESPONSIVE + MOBILE FIX
   Sabse last me load karein (baaki sab CSS ke baad).
   <link rel="stylesheet" href=".../assets/css/jnana-article-responsive.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL FIX — screenshot wale white gaps + clipped content ka ilaaj
   Cards pe kahin fixed height / overflow:hidden lagi hai, usse content
   kat raha tha aur neeche khaali jagah bach rahi thi.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

main.inner_bg .search_cardbg,
main.inner_bg .sidebar_cardbg,
main.inner_bg .article-main,
main.inner_bg .author-footer,
main.inner_bg .discussion-forum,
main.inner_bg .content,
main.inner_bg .sidebar,
main.inner_bg .article-sidebar {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

main.inner_bg img,
main.inner_bg svg,
main.inner_bg iframe,
main.inner_bg video {
  max-width: 100%;
  height: auto;
}

main.inner_bg * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Article body ke andar ka sara content force-visible */
.article-main > *,
.article-main p,
.article-main ul,
.article-main ol,
.article-main h2,
.article-main h3 {
  display: revert;
  visibility: visible;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   1. LAYOUT — content + sidebar
   -------------------------------------------------------------------------- */
main.inner_bg {
  padding: 18px 0 30px;
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.main-grid > .content,
.main-grid > .sidebar {
  min-width: 0;
}

.sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
}

.search_cardbg.search-card {
  padding: 22px;
  border-radius: 18px;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
.header_mid_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*gap: 12px;*/
  flex-wrap: wrap;
  padding: 10px 0;
}

.header_mid_lift img {
  max-height: 44px;
  width: auto;
}

.header_mid_right {
  display: flex;
  align-items: center;
  gap: 10px !important;
  flex-wrap: wrap;
}

.header_mid_right .btn-outline,
.header_mid_right .btn-primary,
.header_mid_right .btn-icon {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
      display: flex;
    align-items: center;
    gap: 7px;

}

/* --------------------------------------------------------------------------
   3. ARTICLE HEAD
   -------------------------------------------------------------------------- */
.breadcrumbs {
  font-size: 12px;
  line-height: 1.6;
}

.article-title {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.25;
  margin: 6px 0 8px;
}

.article-subtitle {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.65;
  max-width: 70ch;
}

.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.meta-pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: normal;
}

.stats-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}

.stats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}

.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-btn {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.hero-visual {
  padding: 18px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  margin: 14px 0;
}

/* --------------------------------------------------------------------------
   4. ARTICLE BODY (inline styles ko sambhalna)
   -------------------------------------------------------------------------- */
.article-main {
  font-size: 15px;
  line-height: 1.7;
}

.article-main ul,
.article-main ol {
  padding-left: 20px;
}

.article-main table {
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ava-step-block {
  padding: 12px 14px 14px !important;
  overflow: visible !important;
}

.ava-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   5. AUTHOR + POWERED BLOCK (screenshot me yahi cut ho raha tha)
   -------------------------------------------------------------------------- */
.author-footer {
  margin-top: 20px;
}

.author-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.powered-block {
  overflow: visible !important;
  height: auto !important;
  padding: 14px;
  border-radius: 14px;
  margin: 14px 0;
}

.powered-block p {
  margin-bottom: 10px;
}

.powered-cta-row,
.journey-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journey-links {
  flex-direction: column;
  gap: 4px;
}

.powered-pill {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   6. DISCUSSION FORUM
   -------------------------------------------------------------------------- */
.discussion-forum {
  margin-top: 22px;
}

.discussion-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.discussion-header-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discussion-pill {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.discussion-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: 14px;
  border-radius: 14px;
  margin: 14px 0;
}

.discussion-summary-main {
  flex: 1 1 300px;
}

.discussion-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-pill {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: normal;
}

.discussion-summary-title {
  font-size: 16px;
  line-height: 1.4;
  margin: 8px 0;
}

.discussion-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
}

.discussion-summary-stats {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* Forum post */
.forum-post {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  margin-bottom: 12px;
}

.forum-post-meta {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forum-post-body {
  flex: 1 1 auto;
  min-width: 0;
}

.forum-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
}

.forum-user-name {
  font-size: 14px;
  font-weight: 600;
}

.forum-user-role,
.forum-user-extra,
.forum-post-header {
  font-size: 12px;
}

.forum-post-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.forum-post-content {
  font-size: 14px;
  line-height: 1.65;
  margin: 6px 0;
}

.forum-post-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.forum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-action-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}

/* Reply form */
.discussion-form {
  padding: 16px;
  border-radius: 14px;
  margin-top: 14px;
}

.comment-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font-size: 14px;
  padding: 12px;
  border-radius: 12px;
}

.comment-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.comment-hint {
  font-size: 12px;
  flex: 1 1 240px;
}

.comment-submit {
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. SIDEBAR CARD
   -------------------------------------------------------------------------- */
/*.sidebar_cardbg.realproject-card {*/
/*  padding: 0;*/
/*  margin: 0;*/
/*}*/

.article-sidebar {
  padding: 18px;
}

.sidebar-list {
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}

.quiz-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
}

.quiz-question {
  font-size: 13px;
  line-height: 1.6;
}

.quiz-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.quiz-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.quiz-btn,
.sidebar-cta-pill {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.sidebar-note {
  font-size: 12px;
  line-height: 1.6;
  margin: 12px 0;
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer_section.sec_padding {
  padding: 40px 0 0;
}

.footer_logo img {
  max-height: 46px;
  width: auto;
}

.follow_us {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.footer_mainsection ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*.footer_mainsection ul li a {*/
/*  display: inline-block;*/
/*  padding: 4px 0;*/
/*  font-size: 14px;*/
/*  line-height: 1.5;*/
/*}*/

.lang_but {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0;
}

.copy_mainse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  
}

.copy_right {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.copy_left p,
.copy_right a {
  font-size: 12px;
  margin: 0;
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  .main-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
  }

  .forum-post-meta {
    flex-basis: 150px;
  }
}

/* ---------- 992px — sidebar neeche ---------- */
@media (max-width: 992px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar {
    position: static;
    top: auto;
  }

  .search_cardbg.search-card {
    padding: 18px;
    margin-bottom: 16px;
  }

  .discussion-summary-stats {
    width: 100%;
    justify-content: flex-start;
  }

  .footer_mainsection .col-md-2,
  .footer_mainsection .col-md-3 {
    margin-bottom: 24px;
  }
}

/* ---------- 768px — mobile ---------- */
@media (max-width: 768px) {
  main.inner_bg {
    padding: 12px 0 24px;
  }

  .header_mid_section {
    padding: 8px 0;
  }

  .header_mid_lift img {
    max-height: 38px;
  }

  .header_mid_right {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .header_mid_right .btn-outline,
  .header_mid_right .btn-primary,
  .header_mid_right .btn-icon {
    font-size: 12px;
    padding: 7px 12px;
  }

  .article-title {
    font-size: 22px;
  }

  .article-subtitle {
    font-size: 14px;
  }

  .meta-pill,
  .summary-pill,
  .powered-pill {
    font-size: 11px;
    padding: 5px 9px;
  }

  .stats-block {
    flex-direction: column;
    align-items: stretch;
  }

  .feedback-actions,
  .forum-actions,
  .discussion-header-controls {
    width: 100%;
  }

  .feedback-btn,
  .discussion-pill,
  .forum-action-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* forum post stack */
  .forum-post {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .forum-post-meta {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .forum-badge {
    margin-left: auto;
    font-size: 11px;
  }

  .discussion-summary {
    flex-direction: column;
  }

  .comment-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-submit {
    width: 100%;
  }

  /* inline font-size wale headings ko mobile size */
  .article-main h2[style],
  .article-body h2 {
    font-size: 17px !important;
    margin: 14px 0 6px !important;
  }

  .article-main h3[style],
  .article-body h3 {
    font-size: 15px !important;
  }

  .article-main p,
  .article-main li {
    font-size: 14px;
    line-height: 1.7;
  }

  /* inline nowrap hata do warna pill overflow karti hai */
  .ava-step-pill {
    white-space: normal !important;
    font-size: 11px !important;
  }

  .hero-visual {
    padding: 14px;
    font-size: 12px;
  }

  .footer_section.sec_padding {
    padding: 30px 0 0;
  }

  .copy_mainse {
    flex-direction: column;
    text-align: center;
  }

  .copy_right {
    justify-content: center;
  }
}

/* ---------- 576px ---------- */
@media (max-width: 576px) {
  .search_cardbg.search-card,
  .article-sidebar,
  .discussion-form,
  .discussion-summary {
    padding: 14px;
  }

  .article-title {
    font-size: 20px;
  }

  .breadcrumbs {
    font-size: 11px;
  }

  .author-avatar {
    width: 44px;
    height: 44px;
  }

  .powered-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .powered-pill {
    text-align: center;
  }

  .discussion-summary-title {
    font-size: 15px;
  }

  /* iOS focus zoom rokne ke liye 16px */
  .comment-textarea {
    min-height: 130px;
    font-size: 16px;
  }

  .scrollToTop {
    bottom: 84px;
    right: 18px;
  }
}

/* --------------------------------------------------------------------------
   9. STICKY HEADER OFFSET FIX
   .main_header.sticky fixed hai, isliye main content uske peeche chala jaata
   tha. Header ki height jitna top offset de rahe hain.
   Agar upar/neeche thoda adjust karna ho to sirf --jnana-header-h badlein.
   -------------------------------------------------------------------------- */
:root {
  --jnana-header-h: 118px;
}

.main_header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

main.inner_bg {
  padding-top: calc(var(--jnana-header-h) + 16px);
}

/* Anchor links (#reward_point_section wagairah) header ke neeche na chhupein */
[id] {
  scroll-margin-top: calc(var(--jnana-header-h) + 12px);
}

/* Sidebar sticky bhi header ke neeche rahe */
.sidebar {
  top: calc(var(--jnana-header-h) + 12px);
}

@media (max-width: 992px) {
  :root {
    --jnana-header-h: 104px;
  }
}

@media (max-width: 768px) {
  :root {
    --jnana-header-h: 96px;
  }

  main.inner_bg {
    padding-top: calc(var(--jnana-header-h) + 10px);
            margin-top: 70px;
  }
  
  .summary-stat {
    
    width: 100%;
}
.discussion-summary-main {
    flex: auto;
}
}

@media (max-width: 480px) {
  :root {
    --jnana-header-h: 88px;
  }
}

/* ---------- 400px ---------- */
@media (max-width: 400px) {
  .meta-pills {
    gap: 6px;
  }

  .feedback-btn,
  .forum-action-btn,
  .discussion-pill {
    font-size: 11px;
    padding: 6px 10px;
  }

  .forum-avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .stats-inline {
    font-size: 12px;
    gap: 6px 12px;
  }
}