/*
Theme Name: BanglaTrick desktop theme
Theme URI: https://banglatrick.com
Author: BanglaTrick Team
Author URI: https://banglatrick.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use

/* Force full-page white background */
html, body{
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ---- 0. Root tokens (easy branding edits) ---- */
:root{
  --ink: #111;              /* main text */
  --muted:#64748b;          /* secondary */
  --line:#e6e9ee;           /* borders   */
  --elev:#f6f8ff;           /* light bg  */
  --brand:#0b5bd3;          /* primary   */
  --brand-ink:#084db6;      /* primary-darker */
  --radius: 10px;
  --shadow: 0 2px 8px rgba(20,40,60,.05);
}

/* ===============================================
   HEADER (A–Z) — for the provided header.php
   -----------------------------------------------
   Includes:
   - Sticky header layout
   - Desktop navigation + dropdown hover
   - Mobile off-canvas menu with overlay
   - Login/Signup CTA styles
   - Accessibility & small utility helpers
   =============================================== */


/* ---- 1. Sticky header base ---- */
.header_section{
  background:#fff;
  border-bottom:1px solid var(--line);
  position: sticky;     /* sticks to top */
  top: 0;
  z-index: 999;
  box-shadow: var(--shadow);
  padding: 10px 0;
}

/* Inner layout: keep BS3 grid but ensure spacing even if not used */
.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
@media (max-width:991px){
  .header-flex{ gap:8px; }
}

/* ---- 2. Branding / Logo ---- */
.logo-wrap{ display:flex; align-items:center; }
.site-brand{ display:inline-flex; align-items:center; }
.site-logo{
  max-height:50px;       /* control logo height */
  width:auto;            /* keep ratio */
  display:block;
}

/* ---- 3. Desktop navigation (BS3 nav reset + modern spacing) ---- */
.mainmenu{ margin:0; }
.mainmenu .navbar-nav{
  display:flex;                 /* modern flex menu */
  align-items:center;
  gap:14px;                     /* spacing between items */
  float:none !important;        /* BS3 override */
  margin:0 !important;          /* BS3 override */
}
.mainmenu .navbar-nav > li{
  float:none;                   /* BS3 override */
  position:relative;            /* for dropdown positioning */
}
.mainmenu .navbar-nav > li > a{
  color: var(--ink);
  padding: 8px 10px;
  font-size: 16px;
  text-transform: capitalize;
  background: transparent !important; /* kill BS3 active bg */
  border-radius: 8px;
  transition: .15s ease;
}
.mainmenu .navbar-nav > li > a:hover{
  color: var(--brand);
  background: rgba(11,91,211,.06) !important;
}

/* Indicate current page (WP adds .current-menu-item / .current-menu-ancestor) */
.mainmenu .navbar-nav > .current-menu-item > a,
.mainmenu .navbar-nav > .current-menu-ancestor > a,
.mainmenu .navbar-nav > .active > a{
  color:#fff !important;
  background: var(--brand) !important;
}

/* ---- 4. Desktop dropdowns (show on hover ≥992px) ---- */
@media (min-width:992px){
  .mainmenu .navbar-nav > li:hover > .dropdown-menu{
    display:block;
  }
}
.dropdown-menu{
  /* make BS3 dropdown look modern */
  border: 1px solid #e6ecf5;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(20,40,60,.12);
  margin-top: 8px;             /* small gap under parent */
  z-index: 1000;               /* over sticky */
}
.dropdown-menu > li > a{
  padding: 9px 14px;
  font-size: 15px;
}
.dropdown-menu > li > a:hover{
  background: var(--elev);
  color: var(--brand);
}

/* If menu is rightmost item, keep dropdown inside viewport */
.mainmenu .navbar-nav > li:last-child .dropdown-menu{
  right: 0; left: auto;
}

/* ---- 5. Right-side CTA (Desktop only) ---- */
.header-cta{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-cta a{
  text-decoration:none; font-weight:600; color: var(--ink);
}
.header-cta a:hover{ color: var(--brand); }

/* Primary CTA */
.header-cta .btn-auth{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--brand);
  color:#fff !important;
  border-radius: 8px;
  padding: 8px 12px;
  line-height:1;
  transition: .15s ease;
  border: 1px solid transparent;
}
.header-cta .btn-auth:hover{
  background: var(--brand-ink);
  transform: translateY(-1px);
}

/* ---- 6. Mobile controls (hamburger + profile icon) ---- */
.mobile-bar, .mobile-only{
  display:flex; align-items:center; gap:10px;
}
.mobile-btn{
  background:none; border:0;
  font-size:22px; color:#333;
  padding:4px 6px; line-height:1;
  border-radius: 8px;
}
.mobile-btn:focus{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* Visibility helpers */
@media (max-width:991px){
  .desktop-only{ display:none !important; }
}
@media (min-width:992px){
  .mobile-only{ display:none !important; }
}

/* ---- 7. Off-canvas Mobile Sidebar ---- */
.mobile-sidebar{
  position:fixed;
  top:0; left:-280px;
  width:280px; height:100%;
  background:#fff;
  z-index:10000;
  transition:left .28s ease;
  box-shadow: 2px 0 18px rgba(20,40,60,.15);
  display:flex; flex-direction:column;
  border-right: 1px solid var(--line);
}
.mobile-sidebar.active{ left:0; }

/* Header row inside sidebar */
.ms-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px;
  border-bottom:1px solid #eef2f7;
  font-weight: 700;
}
.ms-close{
  background:none; border:0; font-size:28px;
  line-height:1; color: var(--ink);
  border-radius: 8px;
}
.ms-close:focus{ outline:2px solid var(--brand); outline-offset: 2px; }

/* Mobile nav list */
.mobile-nav{ list-style:none; margin:0; padding:8px 0; }
.mobile-nav > li > a{
  display:block; padding:12px 16px;
  color: var(--ink);
  text-decoration:none;
  font-size:16px; font-weight:500;
}
.mobile-nav > li > a:hover{
  background: var(--elev); color: var(--brand);
}

/* Submenu toggle caret */
.mobile-nav .menu-item-has-children > a{
  position:relative; padding-right:36px;
}
.mobile-nav .menu-item-has-children > a:after{
  content:""; position:absolute; right:16px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform: translateY(-60%) rotate(45deg);
}

/* Nested submenu */
.mobile-nav .sub-menu{
  display:none; list-style:none; padding-left:0; background:#fff;
}
.mobile-nav .sub-menu li a{
  padding:10px 26px; font-size:15px;
  border-left: 3px solid transparent;
}
.mobile-nav li.open > .sub-menu{ display:block; }
.mobile-nav li.open > a{ background: #f7f9ff; }
.mobile-nav li.open > .sub-menu li a:hover{ border-left-color: var(--brand); }

/* ---- 8. Page overlay when sidebar is open ---- */
.header-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
}
.header-overlay.active{
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when menu open */
body.no-scroll{ overflow: hidden; }


/* ---- 10. Small utilities (optional) ---- */
.text-muted{ color: var(--muted); }




/* ===============================================
   FOOTER — Centered Stacked (ONLY footer styles)
   Uses your existing tokens where helpful:
   --ink, --muted, --line, --elev, --brand, --brand-ink, --radius, --shadow
   =============================================== */

/* Wrapper */
.tb-footer-center{
  background:#0e0e0f;          /* dark footer bg (no new token) */
  color:#cfd7e3;               /* footer text color */
  padding:36px 0 40px;
  border-top:1px solid var(--line); /* subtle top border to blend with theme */
}

/* Stack container */
.tb-footer-center .tb-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;                    /* logo ↔ links ↔ subscribe spacing */
}

/* 1) Brand / Logo */
.tb-footer-center .tb-brand img{
  max-height:48px;
  width:auto; height:auto; display:block;
}

/* 2) Footer links (menu) */
.tb-footer-center .tb-btm-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
}
.tb-footer-center .tb-btm-links a{
  color:#cfd7e3;
  opacity:.9;
  text-decoration:none;
  font-weight:600;
}
.tb-footer-center .tb-btm-links a:hover{
  opacity:1;
  text-decoration:underline;   /* simple hover; or use color: var(--brand) */
}

/* 3) Subscribe pill */
.tb-footer-center .tb-subscribe{
  width:min(760px, 92%);
  display:flex; align-items:center; gap:10px;
  background:#6f3df4;          /* accent for pill */
  border-radius:999px;
  padding:10px 12px 10px 18px;
  box-shadow:0 14px 40px rgba(111,61,244,.35);
  border:1px solid rgba(255,255,255,.08); /* a bit of definition */
}
.tb-footer-center .tb-subscribe input{
  flex:1 1 auto; height:44px;
  border:0; outline:0;
  background:transparent;
  color:#fff;
  font-weight:600;
}
.tb-footer-center .tb-subscribe input::placeholder{
  color:rgba(255,255,255,.9);
}
.tb-footer-center .tb-subscribe button{
  width:44px; height:44px;
  border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.18);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:.15s ease;
}
.tb-footer-center .tb-subscribe button:hover{
  background:rgba(255,255,255,.28);
}

/* 4) Fine details */
.tb-footer-center a{ outline-offset:2px; }

.tb-footer-center .tb-btm-links li{ /* optional divider look on very wide sets */
  position:relative;
}
.tb-footer-center .tb-btm-links li:not(:last-child)::after{
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  margin-left:18px; vertical-align:middle;
}

/* 5) Mobile tweaks */
@media (max-width:575px){
  .tb-footer-center{ padding:28px 0 34px; }
  .tb-footer-center .tb-subscribe{ width:94%; }
}

/* 6) Screen-reader helper (include only if you don't already have .sr-only) */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* =========================================================
   HOME PAGE CSS (Clean + Fixed)
   Sections:
   - Global body + basic helpers
   - Slider (single-homepage-slides)
   - News Section One (cards, overlay badge)
   - News Section Two (list cards + responsive mobile style)
   - Sidebar (search, category list, widgets)
   - Pagination (wp paginate_links)
   - Comments (bt-comments)
   - Mobile Sidebar (off-canvas)
   ========================================================= */

/* ========== Global base (keep your font + bg) ========== */
body{
  background-color:#F4F1F1;
  font-size:17px;
  width:100%;
  font-family:SolaimanLipiNormal, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Optional: section paddings */
.slider_section,
.news_section_one,
.news_section_two,
.widget_sec{ padding:24px 0; }

/* ---------- Section heading (Popular/Recent) ---------- */
.blog_catagoty{
  position:relative; margin:0 15px 14px; padding:10px 14px;
  background:#fff; border:1px solid #e3ebf5; border-radius:12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 10px rgba(20,40,60,.05);
}
.blog_cat_title{ font-weight:800; color:#1e2a3a; margin:0; font-size:1.05rem; }
.blog-icon{ margin-left:auto; color:#0b5bd3; }

/* =========================
   SLIDER — RESPONSIVE & READABLE
   ========================= */

/* Section with gradient (no giant rounded corners) */
.slider_section{
  background: linear-gradient(135deg,#7736e7 0%, #ee4c92 55%, #ff6b6b 100%);
  padding: 64px 0;
  color:#fff;
}

/* Keep your Bootstrap container/row structure. 
   We control the *inner* slide row only. */
.single-homepage-slides{ margin:0; }

/* Desktop/tablet >= 992px: two columns */
@media (min-width:992px){
  .single-homepage-slides > .row{
    display:flex;
    align-items:center;
    gap:32px;
    min-height: 420px;              /* equal feel */
  }
  /* left content, right image */
  .single-homepage-slides .col-md-7{ order:1; }
  .single-homepage-slides .col-md-5{ order:2; display:flex; justify-content:flex-end; }
}

/* ===== Text column ===== */
.home-silde-contant{
  display:flex; flex-direction:column; justify-content:center;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.2); /* improve readability on gradient */
}

.home_title_cat{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  padding:7px 14px; border-radius:999px; margin-bottom:12px;
}
.home_title_cat a{ color:#fff; text-decoration:none; }
.home_title_cat a:hover{ color:#fff; text-decoration:none; }
.home_title{
  margin:4px 0 10px;
  font-weight:800;
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem);
  line-height:1.25;
}
.home_title a{ color:#fff; text-decoration:none; font-size: 24px;
    font-weight: 600;}
.home_title a:hover{ text-decoration:underline; text-decoration-thickness:2px; }

.home_content{
  color: rgba(255,255,255,.95);
  font-size: clamp(15px, 14px + .3vw, 18px);
  line-height:1.7;
  margin:0 0 18px;
  max-width: 62ch;
}

.home-btn a{
  display:inline-block; padding:10px 18px; border-radius:10px;
  background:#0b5bd3; color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 10px 24px rgba(11,91,211,.28);
  transition:.18s ease;
}
.home-btn a:hover{ background:#084db6; transform:translateY(-1px); }

/* ===== Image column (robust – won’t collapse) ===== */
.home-silde-image{
  /* fixed visual “card” that stays nice on any size */
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  padding:18px;
  /* desktop sizing */
  /* width:min(520px, 45vw); */
  aspect-ratio: 16 / 11;       /* consistent card ratio */
  margin-left:auto;            /* push to the right on desktop */
}
.home-silde-image img{
  /* never stretch strangely */
  /* max-width: 92%; */
  /* max-height: 92%; */
  width: 350px;
  height: 150px;
  object-fit: contain;         /* logo/photo never cropped on desktop */
  display:block;
}

/* ===== Tablet (768–991px): still two columns but looser ===== */
@media (max-width:991.98px) and (min-width:768px){
  .single-homepage-slides > .row{
    display:flex; align-items:center; gap:24px; min-height:380px;
  }
  .home-silde-image{ width: 380px; }
}

/* ===== Mobile <768px: stacked, centered, readable ===== */
@media (max-width:767.98px){
  .single-homepage-slides > .row{ display:block; min-height:auto; }
  .home-silde-contant{ text-align:center; padding:0 10px; }
  .home_title_cat{ align-self:center; }
  .home-btn a{ margin:6px auto 0; }

  .home-silde-image{
    width: 92%;              /* fluid card */
    margin:18px auto 0;
    aspect-ratio: 16 / 9;    /* taller on phones */
    padding:12px;
  }
  .home-silde-image img{
    max-width:100%; max-height:100%;
    object-fit: cover;       /* phone = thumbnail feel */
  }
}

/* Optional: hide owl UI if present */
.slider_section .owl-nav, .slider_section .owl-dots{ display:none !important; }
/* ========== A) TEXT READABILITY BOOST ========== */
/* টেক্সট ব্লকের পেছনে হালকা গ্লাসি প্যানেল দিতে */
.home-silde-contant{
  position: relative;
}
@media (max-width: 991.98px){           /* ট্যাব+মোবাইলে প্যানেল অন */
  .home-silde-contant{
    /*padding: 12px 14px;*/
    /*border-radius: 12px;*/
    /*background: linear-gradient(135deg, rgba(15,23,42,.28), rgba(15,23,42,.18));*/
    /*border: 1px solid rgba(255,255,255,.16);*/
    /*backdrop-filter: blur(3px);*/
  }
}
/* টেক্সট আরও কনট্রাস্টেড */
.home_title a{ color:#fff !important; }
.home_content{ color: rgba(255,255,255,.98) !important; }
.home_title_cat{ color:#fff !important; }

/* ========== B) MOBILE ORDER: IMAGE FIRST ========== */
/* 768px-এর নিচে ইমেজ উপরে, টেক্সট নিচে */
@media (max-width: 767.98px){
  .single-homepage-slides > .row{
    display:flex; flex-direction:column;
  }
  .single-homepage-slides .col-md-5{ order:1; } /* image */
  .single-homepage-slides .col-md-7{ order:2; } /* text  */

  /* মোবাইল ইমেজ কার্ড: ফুল-উইডথ, সুন্দর অনুপাত */
  .home-silde-image{
    width: 94%;
    margin: 10px auto 12px;
    aspect-ratio: 16/9;
    padding: 10px;
  }
  .home-silde-image img{
    max-width:100%; max-height:100%;
    object-fit: cover; /* থাম্বনেইল লুক */
  }

  /* মোবাইল টাইপোগ্রাফি */
  .home_title{ font-size: 1.25rem; line-height:1.35; }
  .home_content{ font-size: 15px; }
  .home-btn a{ margin: 6px auto 0; }
}

/* ========== C) DESKTOP এ IMAGE RIGHT নিশ্চিত ========== */
@media (min-width: 992px){
  .single-homepage-slides > .row{ display:flex; align-items:center; gap:32px; }
  .single-homepage-slides .col-md-7{ order:1; } /* text left  */
  .single-homepage-slides .col-md-5{ order:2; } /* image right */
}

/* ========== D) TEXT SHADOW (very subtle) ========== */
.home-silde-contant{ text-shadow: 0 1px 2px rgba(0,0,0,.22); }
/* ===== Mobile Full Center ===== */
@media (max-width: 767.98px){
  .home-silde-contant{
    text-align: center;
  }
  .home_title_cat,
  .home_title,
  .home_content{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .home-btn{
    text-align: center;
  }
  .home-btn a{
    display: inline-block;
    margin: 12px auto 0;
  }
}

/* ===== Button Hover ===== */
.home-btn a{
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  transition: all .3s ease;
}
.home-btn a:hover{
  background: #ff5722;       /* hover এ আলাদা কালার */
  color: #fff !important;   /* টেক্সট সাদা থাকবে */
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transform: translateY(-2px);
}


/* -------- Content side -------- */
.home-silde-contant{
  display:flex; flex-direction:column; justify-content:center;
  padding:6px 0;
}

/* Category chip */
.home_title_cat{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(11,91,211,.10);
  border:1px solid rgba(11,91,211,.25);
  color:#0b5bd3;
  font-weight:700; font-size:14px;
  padding:6px 12px; border-radius:999px; margin-bottom:12px;
}
.home_title_cat a{color:inherit;text-decoration:none;}
.home_title_cat .triangle{
  width:0; height:0;
  border-left:8px solid rgba(11,91,211,.25);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}

/* Title + excerpt with good contrast on white card */
.home_title{
  margin: 2px 0 10px;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.28;
}
.home_title a{ color:#0f172a; text-decoration:none; }
.home_title a:hover{ color:#0b5bd3; }

.home_content{
  color:#475569;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 60ch;
}
.home_content .text-center {
  text-align: left;
}
/* CTA button */
.home-btn{ margin-top:auto; }
.home-btn a{
  display:inline-block;
  padding:10px 18px;
  border-radius: 10px;
  background: #0b5bd3;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(11,91,211,.25);
  transition: .2s ease;
}
.home-btn a:hover{ background:#084db6; transform: translateY(-1px); }

/* ------- Optional: if your markup currently has image RIGHT and text LEFT
   and you want image LEFT on desktop, add this small order swap:
   (Remove if not needed)
-------------------------------------------------- */
/*
@media (min-width:768px){
  .single-homepage-slides .col-md-5{ order: 0; }  // image column
  .single-homepage-slides .col-md-7{ order: 1; }  // content column
}
*/

/* Hide any owl UI if present */
.slider_section .owl-nav, .slider_section .owl-dots{ display:none !important; }
.news_section_hero-title {
    margin: 10px 0 15px;
    font-weight: 900;
    line-height: 1.15;
    color: #000;
    /* font-size: clamp(24px, 4.2vw, 28px); */
    text-align: center;
}
/* =========================================================
   NEWS SECTION ONE — Grid Cards with overlay badge
   ========================================================= */
.news_section_one .grid-item{ margin-bottom:16px; }
.news_section_one .post-card{
  background:#fff; border:1px solid #e7effa; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(20,40,60,.05);
}
.news_section_one .pc-inner{ display:block; }
.news_section_one .pc-media{
  position:relative; width:100%; height:200px; aspect-ratio:4/3;
  background:#000; margin:0; overflow:visible;
}
.news_section_one .pc-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; display:block;
}
/* Overlays */
.news_section_one .pc-views{
  position:absolute; right:12px; top:12px; z-index:4;
  background:rgba(0,0,0,.65); color:#fff; font-size:12px;
  padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:6px;
}
.news_section_one .pc-badge{
  position:absolute; z-index:4; left:12px; bottom:-14px;
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:#7c8cff; color:#fff; text-decoration:none; white-space:nowrap;
  box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.news_section_one .pc-body{
  padding:32px 16px 12px; background:#fff;
}
.news_section_one .pc-title{
  margin:6px 0 6px; font-size:18px; line-height:1.35; font-weight:700; color:#1e2a3a;
}
.news_section_one .pc-title a{ color:inherit; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news_section_one .pc-excerpt{
  margin:0 0 30px; color:#6e7a89; font-size:14px;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
/* Meta */
 .news_section_one .pc-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* width: 100%; */
    padding: 10px 16px;
    border-top: 1px solid #eef2f7;
    font-size: 15px;
    color: #98a2b3;
    overflow: hidden;
    white-space: nowrap;
}
    .news_section_one .pc-meta {
        margin: 0 -16px -12px;
        padding: 10px 16px 12px;
        border-top: 1px solid #eef2f7;
        display: flex
;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: #98a2b3;
    }
  .news_section_one .pc-author .name{ max-width:92px; }
  /* Show category as overlay chip */
  .news_section_one .pc-badge{
    display:inline-block !important; font-size:15px; padding:5px 10px; border-radius:20px;
    box-shadow:0 7px 20px #ccc; background-color:#7c8cff; position:absolute; left:5%; bottom:-14px; color:#fff; text-align:center;
  }

.news_section_one .pc-author{ display:flex; align-items:center; gap:6px; min-width:0; color:#98a2b3; text-decoration:none; }
.news_section_one .pc-author .avatar img{ width:22px; height:22px; border-radius:50%; }
.news_section_one .pc-author .name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news_section_one .pc-stats{ margin-left:auto; display:flex; gap:12px; list-style:none; padding:0; margin:0; }
.news_section_one .pc-stats i{ margin-right:6px; opacity:.9; }
/* Desktop image height */
@supports not (aspect-ratio: 1/1){ .news_section_one .pc-media{ height:190px; } }
@media (max-width:420px){
  .news_section_one .pc-media{ height:180px; }
  .news_section_one .pc-author .name{ max-width:70px; }
  .news_section_one .pc-stats li:nth-child(3), .news_section_one .pc-stats li:nth-child(4){ display:none; }
}

/* =========================================================
   NEWS SECTION TWO — List Cards (thumb left) + Mobile stacked
   ========================================================= */
.news_section_two .post-card{
  background:#fff; border:1px solid #e7effa; border-radius:14px;
  box-shadow:0 2px 10px rgba(20,40,60,.05); padding:12px 14px; margin-bottom:14px;
}
.news_section_two .pc-inner{ display:flex; align-items:flex-start; gap:12px; }
.news_section_two .pc-media{
  position:relative; flex:0 0 220px; width:220px; height:130px;
  border-radius:10px; overflow:hidden; background:#f3f6f9;
}
.news_section_two .pc-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.news_section_two .pc-body{ flex:1 1 auto; min-width:0; padding:0; }
.news_section_two .pc-title{ margin:2px 0 6px; font-size:20px; line-height:1.35; color:#1e2a3a; }
.news_section_two .pc-title a{ color:inherit; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news_section_two .pc-excerpt{ color:#6e7a89; font-size:14px; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

/* Meta */
.news_section_two .pc-meta{
  border-top:1px solid #edf2f7;
  padding-top:8px;
  display:flex;
  gap:12px;
  color:#8f9aab;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-around;
  justify-content: space-between;
  align-items: center;
}
.news_section_two .pc-cat-meta{
  display:inline-block;
  background:#7c8cff; color:#fff;
  padding:6px 10px; border-radius:999px;
  font-weight:600; font-size:12.5px;
  margin-right:8px;
  max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* পুরনো inline badge (title-এর উপরে) লুকাও */
.news_section_two .pc-cat-inline{ display:none !important; }

.news_section_two .pc-author{ display:flex; align-items:center; gap:6px; min-width:0; color:#98a2b3; text-decoration:none; }
.news_section_two .pc-author .avatar img{ width:22px; height:22px; border-radius:50%; }
.news_section_two .pc-author .name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#98a2b3; }
.news_section_two .pc-stats{ margin-left:auto; display:flex; gap:14px; list-style:none; padding:0; margin:0; color:#aab2be; }
.news_section_two .pc-stats i{ margin-right:6px; }

/* Overlays */
.news_section_two .pc-views{
  position:absolute; right:12px; top:12px; z-index:2;
  background:rgba(0,0,0,.65); color:#fff; font-size:12px; padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:6px;
}
.news_section_two .pc-badge{ display:none; } /* desktop hide */

/* Tablet tune */
@media (max-width:991.98px){
  .news_section_two .pc-media{ flex:0 0 120px; width:120px; height:90px; }
  .news_section_two .pc-title{ font-size:18px; }
}

/* ===== Mobile ≤575.98px: stacked like your demo-2 ===== */
@media (max-width:575.98px){
  .news_section_two .post-card{
    padding:0 !important; border-radius:12px; overflow:hidden;
    box-shadow:0 2px 10px rgba(20,40,60,.06);
  }
  .news_section_two .pc-inner{ display:block; }
  .news_section_two .pc-media{
    width:100% !important; height:auto !important; aspect-ratio:4/3; margin:0 !important;
    border:0 !important; border-radius:0 !important; background:#000;
  }
  @supports not (aspect-ratio: 1/1){ .news_section_two .pc-media{ height:190px !important; } }
  .news_section_two .pc-media img{ width:100% !important; height:230px !important; object-fit:cover !important; display:block !important; }

  .news_section_two .pc-body{ padding: 32px 16px 12px !important; background:#fff; }
  .news_section_two .pc-title{ margin:6px 0 6px; font-size:18px; line-height:1.35; font-weight:700; color:#1e2a3a; }
  .news_section_two .pc-excerpt{ margin:0 0 30px; color:#6e7a89; font-size:14px; }

   .news_section_two .pc-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* width: 100%; */
    padding: 10px 16px;
    border-top: 1px solid #eef2f7;
    font-size: 15px;
    color: #98a2b3;
    overflow: hidden;
    white-space: nowrap;
}
    .news_section_two .pc-meta {
        margin: 0 -16px -12px;
        padding: 10px 16px 12px;
        border-top: 1px solid #eef2f7;
        display: flex
;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: #98a2b3;
    }
  .news_section_two .pc-author .name{ max-width:92px; }
  /* Show category as overlay chip */
  .news_section_two .pc-badge{
    display:inline-block !important; font-size:15px; padding:5px 10px; border-radius:20px;
    box-shadow:0 7px 20px #ccc; background-color:#7c8cff; position:absolute; left:5%; bottom:-14px; color:#fff; text-align:center;
  }
  /* hide other cat pills on mobile */
  .news_section_two .pc-cat-inline, .news_section_two .pc-cat-meta{ display:none !important; }
}

/* =========================================================
   SIDEBAR — search, category list, widgets
   ========================================================= */
   /* ===== Sticky Sidebar ===== */
:root{
  --sidebar-top: 90px;   /* header height অনুযায়ী টিউন করুন */
}

/* Desktop/tablet এ sticky */
@media (min-width: 992px){
  .sidebar{
    /* যদি aside-এই sticky ধরাতে চান */
    /* position: sticky; top: var(--sidebar-top); */

    /* wrapper ব্যবহার করলে wrapper-কে sticky দিন */
    /* Bootstrap row/col flex হলে align-self দরকার পড়ে */
    display: block;
  }
  .sidebar .sidebar-inner{
    position: sticky;
    top: var(--sidebar-top);
    align-self: flex-start;
  }
}

/* WP Admin Bar থাকলে টপ অফসেট বাড়ান */
@media (min-width: 782px){
  body.admin-bar .sidebar .sidebar-inner{
    top: calc(var(--sidebar-top) + 32px);
  }
}

/* ছোট স্ক্রিনে sticky বন্ধ (UX ভালো থাকে) */
@media (max-width: 991.98px){
  .sidebar .sidebar-inner{
    position: static;
    top: auto;
  }
}

/* লম্বা উইজেট লিস্ট হলে স্ক্রল দরকার হলে ব্যবহার করতে পারেন: */
/*
@media (min-width: 992px){
  .sidebar .sidebar-inner{
    max-height: calc(100vh - var(--sidebar-top));
    overflow: auto;
  }
}
*/

.sidebar{ border-radius:8px; }
.sidebar .menu_sec, .sidebar .add, .sidebar .search-box{
  background:#fff; border:1px solid #e3ebf5; border-radius:10px;
  box-shadow:0 1px 0 rgba(20,40,60,.05); margin-bottom:16px;
}
.sidebar .menu_sec{ padding:14px; }
.sidebar .add{ padding:10px; }
.sidebar .add img{ max-width:100%; height:auto; display:block; }

/* Search */
.sidebar .search-box{ padding:10px; }
.sidebar .search-box .example{ position:relative; }
.sidebar .search-box input[type="search"]{
  width:100%; height:44px; border:1px solid #d7e2f1; border-radius:10px;
  padding:0 48px 0 14px; outline:0; background:#fff;
}
.sidebar .search-box input[type="search"]::placeholder{ color:#97a6b8; }
.sidebar .search-box button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:#6d55f6; color:#fff; display:flex; align-items:center; justify-content:center;
}

/* Category list */
.sidebar .menu_title{ font-weight:800; font-size:24px; color:#1e2a3a; margin:4px 0 10px; background:#fff; }
.blog-menu ul{ list-style:none; margin:0; padding:0; }
.blog-menu ul li a{ color:#000; margin-left:1px; text-decoration:none; }

.sidebar .category-list{ list-style:none; margin:0; padding:0; }
.sidebar .category-list > li{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:8px 6px; border-radius:8px;
}
.sidebar .category-list > li:hover{ background:#f6f9ff; }
.sidebar .category-list li > a{
  flex:1 1 auto; color:#1e2a3a; text-decoration:none; position:relative; padding-left:28px; font-weight:500; font-size:15px;
}
/* purple dot icon */
.sidebar .category-list li > a:before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:#6d55f6; box-shadow: inset 0 0 0 4px #fff;
}
/* count */
.sidebar .category-list .bt-count{ min-width:36px; text-align:right; color:#2f3b4a; font-weight:600; }
/* toggle caret */
.sidebar .category-list .bt-toggle{
  width:22px; height:22px; border-radius:6px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; margin-left:8px; margin-right:6px; position:relative;
}
.sidebar .category-list .bt-toggle:after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-right:2px solid #6d55f6; border-bottom:2px solid #6d55f6;
  transform:translate(-50%,-65%) rotate(45deg); transition:.15s ease;
}
.sidebar .category-list li.open > .bt-toggle:after{ transform:translate(-50%,-35%) rotate(-135deg); }
/* children */
.sidebar .category-list li > ul.children{ margin:6px 0 0 24px; padding-left:8px; border-left:2px solid #eef2f7; }
.sidebar .category-list li > ul.children > li{ padding:6px 0; }
.sidebar .category-list li > ul.children > li > a{ font-weight:500; color:#2d3a49; }
.sidebar .category-list li > ul.children > li > a:before{ width:12px; height:12px; background:#8b7cf8; box-shadow:inset 0 0 0 3px #fff; }


/* Mobile: children collapsed by default */
@media (max-width:575px){
/*   .sidebar{ padding:8px; } */
  .sidebar .menu_title{font-size: 28px;align-content: space-around;/* display: flex; *//* flex-direction: row; *//* flex-wrap: nowrap; *//* justify-content: space-around; */margin-left: 8px;}
  .sidebar .category-list > li{ padding:8px 4px; }
  .sidebar .category-list li.has-children > ul.children{ display:none; }
  .sidebar .category-list li.open > ul.children{ display:block; }
}
/* Desktop/tablet: always open children, hide toggle */
@media (min-width:576px){
  .sidebar .category-list li.has-children > ul.children{ display:block; }
  .sidebar .category-list .bt-toggle{ display:none; }
}

/* Bottom widget area */
.widget_sec .add{
  background:#fff; border:1px solid #e3ebf5; border-radius:12px; padding:10px;
  box-shadow:0 1px 0 rgba(20,40,60,.05);
}

/* =========================================================
   PAGINATION (paginate_links type=list)
   ========================================================= */
.pagination-wrapper{
  margin:22px 0 10px; display:flex; justify-content:center;
}
.pagination-wrapper .page-numbers{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;
}
.pagination-wrapper .page-numbers li a,
.pagination-wrapper .page-numbers li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:36px; padding:0 12px; font-size:14px; line-height:1;
  background:#fff; border:1px solid #e5e7eb; border-radius:6px; text-decoration:none; color:#1f2937;
  box-shadow:0 1px 0 rgba(20,40,60,.05); transition:all .18s ease;
}
.pagination-wrapper .page-numbers li a:hover{
  border-color:#bcd9ff; background:#f3f8ff; color:#0b5bd3; transform:translateY(-1px);
}
.pagination-wrapper .page-numbers li .current{
  background:#eaf3ff; border-color:#bcd9ff; color:#0b5bd3; font-weight:700;
}
.pagination-wrapper .page-numbers li .dots{
  background:#fff; color:#6b7280; pointer-events:none;
}
.pagination-wrapper .page-numbers li .prev,
.pagination-wrapper .page-numbers li .next{
  font-weight:600; padding:0 14px;
}
@media (max-width:576px){
  .pagination-wrapper .page-numbers{ gap:8px; }
  .pagination-wrapper .page-numbers li a,
  .pagination-wrapper .page-numbers li span{
    min-width:34px; height:32px; padding:0 10px; font-size:13px; border-radius:5px;
  }
}

/* =========================================================
   COMMENTS (bt-comments) — compact + responsive
   ========================================================= */
.bt-comments{ margin-top:22px; }
.bt-comments .c-title{ font-weight:800; font-size:20px; color:#0f172a; margin:0 0 12px; }
.bt-comments .c-title span{
  background:#eaf3ff; color:#0b5bd3; border:1px solid #cfe2ff; border-radius:8px; padding:2px 8px; margin-right:6px;
}
.bt-comments .comment{
  background:#fff; border:1px solid #e7effa; border-radius:10px; padding:14px;
  box-shadow:0 2px 10px rgba(20,40,60,.03); margin-bottom:12px;
}
.bt-comments .c-head{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.bt-comments .c-author a, .bt-comments .c-author{ color:#0f172a; font-weight:700; }
.bt-comments .c-meta{ color:#6b7280; font-size:12px; }
.bt-comments .c-meta a{ color:#6b7280; text-decoration:none; }
.bt-comments .c-edit{ margin-left:auto; font-size:12px; }
.bt-comments .media-left{ padding-right:10px; }
.bt-comments .media-object{ width:48px; height:48px; border-radius:50%; }
@media (max-width:575px){ .bt-comments .media-object{ width:40px; height:40px; } }
.bt-comments .c-content{ margin:6px 0 8px; color:#1f2937; }
.bt-comments .c-actions a.comment-reply-link{
  display:inline-flex; align-items:center; gap:6px; border:1px solid #d8e6ff; padding:6px 10px; border-radius:999px;
  background:#f6f9ff; color:#0b5bd3; font-weight:600; text-decoration:none;
}
.bt-comments .c-actions a.comment-reply-link:hover{ background:#eaf3ff; border-color:#cfe2ff; }

/* nesting */
.bt-comments .children{ margin-left:68px; border-left:2px solid #eef2f7; padding-left:12px; margin-top:12px; }
@media (max-width:767px){ .bt-comments .children{ margin-left:16px; border-left:none; padding-left:10px; } }

/* comment pagination (if used) */
.bt-comments .c-pagination{ text-align:center; margin:12px 0 6px; }
.bt-comments .c-pagination ul{ display:inline-flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.bt-comments .c-pagination a, .bt-comments .c-pagination span{
  min-width:34px; height:34px; padding:0 10px; border-radius:999px;
  border:1px solid #e6ecf5; background:#fff; color:#111; display:inline-flex; align-items:center; justify-content:center;
}
.bt-comments .c-pagination .current{ background:#eaf3ff; border-color:#cfe2ff; color:#0b5bd3; font-weight:700; }

/* form */
.comment-form .form-group{ margin-bottom:10px; }
.comment-form label{ font-weight:600; color:#334155; }
.comment-form .form-control{ height:auto; padding:10px 12px; border-radius:10px; border:1px solid #dae4f3; box-shadow:none; background:#fff; }
.comment-form .form-control:focus{ border-color:#bcd9ff; box-shadow:0 0 0 3px rgba(11,91,211,.08); }
.comment-form textarea.form-control{ min-height:160px; }
@media (max-width:575px){
  .comment-form .col-sm-6, .comment-form .col-sm-12{ width:100%; float:none; }
  .comment-form textarea.form-control{ min-height:140px; }
}
.comment-form .btn{ width:auto; min-width:140px; border-radius:10px; font-weight:700; padding:9px 14px; }
.comment-form .btn-primary{ background:#0b5bd3; border-color:#0b5bd3; }
.comment-form .btn-primary:hover{ background:#084db6; border-color:#084db6; }

/* =========================================================
   MOBILE SIDEBAR (off-canvas) — match your header IDs
   ========================================================= */
.mobile-sidebar{
  position:fixed; top:0; left:-260px; width:260px; height:100%;
  background:#fff; z-index:9999; transition:left .3s ease; padding:20px;
  box-shadow:2px 0 5px rgba(0,0,0,0.1);
}
.mobile-sidebar.active{ left:0; }
.close-btn{
  background:none; border:none; font-size:30px; float:right; cursor:pointer;
}
.mobile-nav{ list-style:none; padding:0; margin:20px 0; }
.mobile-nav li{ border-bottom:1px solid #eee; }
.mobile-nav li a{
  display:block; padding:12px 15px; color:#111; font-size:16px; text-decoration:none; font-weight:500;
}
.mobile-nav li a:hover{ background:#f5f5f5; color:#007bff; }

/* =========================================================
   Small a11y polish
   ========================================================= */


/* ===== Single Page Base ===== */
.single_page_section{padding:26px 0 40px;}
.container{max-width:1140px;margin:auto;}
.single-layout{display:flex;gap:24px;}
.single-main{flex:1 1 0;}
.single-aside{flex:0 0 340px;}
@media(max-width:991px){
  .single-layout{flex-direction:column;}
  .single-aside{flex:unset;}
}

/* Cards */
.card{background:#fff;border:1px solid #e7effa;border-radius:12px;box-shadow:0 4px 18px rgba(30,60,90,.06);}
.card--pad{padding:22px;}
.section-gap{margin-top:18px;}
.section-gap-lg{margin-top:26px;}

/* Meta/Title */
.post-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:10px;color:#6b7a90;font-size:13px;}
.meta-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e8eef7;border-radius:999px;background:#f7faff;}
.meta-chip i{opacity:.8}
.post-title{font-weight:800;letter-spacing:-.3px;margin:6px 0 14px;color:#0f172a;line-height:1.25;font-size:30px;}
@media(max-width:767px){.post-title{font-size:24px;}}

/* Category badge row */
.cat-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.cat-badge{display:inline-block;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:#eef5ff;color:#0b5bd3;border:1px solid #d7e6ff;text-decoration:none;}

/* Media */
.post-media{margin:0 -22px 14px;position:relative;}
.post-media img{width:100%;height:auto;display:block;border-radius:0;}
.post-caption{font-size:12px;color:#6b7280;padding:6px 22px 0;}
@media(max-width:575px){.post-media{margin:0 -16px 12px;}}

/* Content */
.post-content{font-size:16px;line-height:1.9;color:#1f2937;}
.post-content p{margin:0 0 1.05em;}
.post-content h2,.post-content h3,.post-content h4{color:#0f172a;margin:1.2em 0 .5em;font-weight:800;}
.post-content h2{font-size:24px}
.post-content h3{font-size:20px}
.post-content h4{font-size:18px}
.post-content img{max-width:100%;height:auto;border-radius:10px;}
.post-content blockquote{margin:16px 0;padding:14px 18px;border-left:4px solid #7aa7ff;background:#f6f9ff;border-radius:10px;color:#334155;}
.post-content pre,.post-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.post-content pre{overflow:auto;background:#0b1220;color:#dbe6ff;border-radius:10px;padding:14px 16px;font-size:14px;}
.post-content code{background:#f1f5ff;padding:2px 6px;border-radius:6px;border:1px solid #e6eeff}

/* Tables */
.post-content table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e6eef7;border-radius:10px;overflow:hidden;}
.post-content th,.post-content td{padding:10px 12px;border-bottom:1px solid #eef3fb;}
.post-content thead th{background:#f4f8ff;color:#0b5bd3;font-weight:700;border-bottom:1px solid #dfe9ff;}
.post-content tbody tr:hover{background:#fafcff}
.table-wrap{overflow:auto;border-radius:10px;border:1px solid #e6eef7;margin:10px 0;}

/* Share / Tags */
.post-share{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid #e7effa;background:#fff;text-decoration:none;color:#0f172a;font-weight:600;}
.share-btn:hover{background:#f6f9ff;border-color:#cfe2ff}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.post-tags a{font-size:13px;padding:6px 10px;border-radius:999px;background:#f4f7ff;border:1px solid #e3ecff;color:#0b5bd3;text-decoration:none;}

/* Prev/Next */
.post-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.post-nav a{flex:1 1 240px;min-height:72px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e7effa;border-radius:12px;padding:12px 14px;text-decoration:none;color:#0f172a;}
.post-nav a:hover{background:#f7faff;border-color:#cfe2ff}
.post-nav .dir{font-size:12px;color:#64748b}

/* Related */
.related-wrap{margin-top:24px}
.related-heading{font-weight:800;color:#0f172a;margin-bottom:12px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{border:1px solid #e7effa;border-radius:12px;overflow:hidden;background:#fff;transition:transform .15s ease;}
.related-card:hover{transform:translateY(-2px)}
.related-thumb{aspect-ratio:16/9;background:#eef3ff;overflow:hidden}
.related-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.related-body{padding:10px 12px}
.related-title{font-size:15px;line-height:1.35;font-weight:700;color:#0f172a;margin:4px 0}
@media(max-width:991px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.related-grid{grid-template-columns:1fr;}}

/* Author box visuals (no sticky here) */
.author-box-card{text-align:center;background:#fff;border-radius:12px;padding:25px 20px;box-shadow:0 2px 14px rgba(0,0,0,.05);margin-bottom:16px;}
.author-avatar img{width:100px;height:100px;border-radius:50%;border:4px solid #eef2f7;}
.author-name{margin-top:10px;font-size:20px;font-weight:700;color:#222;}
.author-role{display:inline-block;margin:6px 0 12px;padding:4px 10px;font-size:12px;font-weight:600;background:#e6f6ee;color:#10b981;border-radius:999px;}
.author-bio{font-size:14px;color:#666;line-height:1.5;margin-bottom:14px;}
.author-stats{display:flex;justify-content:space-around;border-top:1px solid #f1f1f1;padding-top:12px;}
.author-stats .stat{font-size:14px;color:#111;display:flex;align-items:center;gap:6px;font-weight:600;}
.author-stats .stat i{color:#0b5bd3;}
.author-stats .stat:nth-child(2) i{color:#16a34a;}

/* Utilities */
.m-0{margin:0}
.inherit{text-decoration:none;color:inherit}



/* ===== Author Card (responsive, sidebar-friendly) ===== */
.author-card{
  background:#fff;
  border:1px solid #e7effa;
  border-radius:12px;
  box-shadow:0 2px 14px rgba(20,40,60,.05);
  padding:18px;
  margin-bottom:16px;
}
.author-head{
  display:flex; align-items:flex-start; gap:14px;
}
.author-avatar img{
  width:84px; height:84px; border-radius:50%; border:4px solid #eef2f7; object-fit:cover;
}
.author-ident{ min-width:0; }
.author-name{
  font-weight:800; color:#0f172a; margin:2px 0 6px; font-size:20px; line-height:1.1;
}
.author-role-badge{
  display:inline-block; padding:4px 10px; font-size:12px; font-weight:700;
  background:#e6f6ee; color:#10b981; border-radius:999px;
}
.author-mini.meta{
  list-style:none; padding:8px 0 0; margin:0; display:flex; flex-wrap:wrap; gap:10px 14px; color:#475569; font-size:13px;
}
.author-mini.meta i{ margin-right:6px; opacity:.8; }

/* Bio */
.author-bio{
  margin-top:12px; color:#334155; font-size:14.5px; line-height:1.7;
}
.author-bio .author-more{
  display:inline-block; margin-left:8px; font-weight:700; text-decoration:none; color:#0b5bd3;
}
.author-bio .author-more:hover{ text-decoration:underline; }

/* Stats grid */
.author-stats-grid{
  margin-top:14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.a-stat{
  background:#f8fbff; border:1px solid #eaf1ff; border-radius:10px; padding:10px 8px; text-align:center;
}
.a-stat i{ display:block; font-size:16px; margin-bottom:6px; color:#7c8cff; }
.a-stat__num{ font-size:18px; font-weight:800; color:#0f172a; line-height:1; }
.a-stat__label{ font-size:12px; color:#64748b; margin-top:4px; }

/* Actions */
.author-actions{
  margin-top:14px; display:flex; flex-wrap:wrap; gap:8px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:9px; font-weight:700; font-size:13px;
  text-decoration:none; border:1px solid #e2e8f0; background:#fff; color:#0f172a;
}
.btn i{ font-size:14px; }
.btn:hover{ background:#f6f9ff; border-color:#cfe2ff; }
.btn--primary{ background:#0b5bd3; color:#fff; border-color:#0b5bd3; }
.btn--primary:hover{ filter:brightness(0.95); }
.btn--light{ background:#fff; }
.btn--fb{ background:#1877F2; color:#fff; border-color:#1877F2; }
.btn--tw{ background:#0f1419; color:#fff; border-color:#0f1419; } /* X/Twitter */
.btn--yt{ background:#FF0033; color:#fff; border-color:#FF0033; }

/* Responsive tweaks */
@media (max-width: 575px){
  .author-head{ align-items:center; }
  .author-avatar img{ width:70px; height:70px; }
  .author-stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 380px){
  .author-stats-grid{ grid-template-columns:1fr; }
}

/* ===== Compact Social Badge (moved from inline to CSS) ===== */
.bt-badge-wrap{
  display:flex; justify-content:center; align-items:center; padding:8px 0;
}
.badge{
  --H:55px; --padY:8px; --gapX:10px; --name-fs:15px; --btn-fs:12px;
  height:var(--H); padding:var(--padY) 12px; box-sizing:border-box;
  display:flex; align-items:center; gap:var(--gapX); width:max-content;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.badge__logo{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.badge__meta{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; min-width:0; }
.badge__name{ font-weight:700; font-size:var(--name-fs); line-height:1; color:#111827; white-space:nowrap; }
.badge__btn{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  font-size:var(--btn-fs); line-height:1; font-weight:700; border-radius:6px;
  background:#1877F2; color:#fff; text-decoration:none; box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.badge__btn::before{
  content:""; width:12px; height:12px; display:inline-block;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="white" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06H295V6.26S259.91 0 225.36 0C141.09 0 89.09 54.42 89.09 153.12v42.22H0v92.66h89.09V512h107.8V288z"/></svg>') center/contain no-repeat;
}

/* Dark mode polish */
@media (prefers-color-scheme: dark){
  .badge{ background:#0b0f14; border-color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.4) }
  .badge__name{ color:#e5e7eb }
}
/* ===== TrickBD-style Author Box ===== */
.ab-card{
  border:1px solid #d9e9f7;
  border-radius:12px;
  box-shadow:0 2px 0 rgba(20,40,60,.03);
  padding:20px 18px;
  margin-bottom:16px;
}
.ab-inner{ text-align:center; max-width:340px; margin:0 auto; }

.ab-avatar-wrap{ display:flex; justify-content:center; }
.ab-avatar-ring{
  width:110px; height:110px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(100px 100px at 50% 40%, rgba(0,0,0,0.06), rgba(0,0,0,0) 60%);
}
.ab-avatar-ring img{
  width:86px; height:86px; border-radius:50%; background:#fff; border:6px solid #fff; object-fit:cover;
}

/* Role badge (green pill) */
.ab-role{
  display:inline-block;
  margin:12px 0 6px;
  padding:4px 10px;
  background:#16a34a;
  color:#fff; font-weight:800; font-size:12px; border-radius:999px;
}

/* Name */
.ab-name{
  font-size:22px; line-height:1.1;
  color:#0f172a; font-weight:800; margin:6px 0 8px;
}

/* Bio */
.ab-bio{
  color:#64748b; font-size:14.5px; line-height:1.7;
  margin:0 auto 12px; max-width:90%;
}

/* Social round buttons */
.ab-social{ display:flex; justify-content:center; gap:10px; margin:12px 0 6px; }
.ab-btn{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e7eef7; color:#445; text-decoration:none;
  border:1px solid #dbe5f1;
  transition:transform .15s ease, filter .15s ease;
}
.ab-btn:hover{ transform:translateY(-2px); filter:brightness(0.98); }
.ab-btn--fb{ background:#1877F2; border-color:#1877F2; color:#fff; }
.ab-btn--g{ background:#DB4437; border-color:#DB4437; color:#fff; }
.ab-btn--site{ background:#0b5bd3; border-color:#0b5bd3; color:#fff; }

/* Stats row */
.ab-stats{
  display:flex; justify-content:space-evenly; align-items:center;
  gap:10px; margin-top:12px; padding-top:12px;
  border-top:1px solid #e3edf8;
}
.ab-stat{ display:flex; align-items:center; gap:8px; font-weight:700; color:#0f172a; }
.ab-stat i{ font-size:16px; }
.ab-stat:first-child i{ color:#0b5bd3; }   /* bars icon blue */
.ab-stat:last-child  i{ color:#16a34a; }   /* comment icon green */
.ab-num{ font-weight:800; }
.ab-label{ color:#334155; font-weight:700; }

/* Responsive */
@media (max-width: 480px){
  .ab-avatar-ring{ width:96px; height:96px; }
  .ab-avatar-ring img{ width:76px; height:76px; }
  .ab-name{ font-size:20px; }
  .ab-bio{ font-size:14px; }
  .ab-btn{ width:34px; height:34px; }
}



/* Report + Like row */
.bt-meta-row{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #e7effa; border-radius:10px; padding:12px 14px;
}
.bt-meta-left{ flex:1 1 auto; }
.bt-meta-right{ display:flex; gap:10px; align-items:center; }

/* Comments tidy */
.comment-list, .children{ list-style:none; margin:0; padding:0; }
.comment-body{
  background:#fff; border:1px solid #e7effa; border-radius:10px; padding:12px 14px; margin:12px 0;
}
.reply a{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px;
  border:1px solid #e7effa; border-radius:8px; padding:6px 10px; text-decoration:none; color:#0f172a;
}
.reply a:hover{ background:#f6f9ff; border-color:#cfe2ff; }
.comment-respond{ background:#fff; border:1px solid #e7effa; border-radius:12px; padding:14px; margin-top:16px; }

@media (max-width:575px){
  .bt-meta-row{ flex-direction:column; align-items:flex-start; }
  .bt-meta-right{ width:100%; flex-wrap:wrap; }
}
/* কার্ডগুলোর মাঝে ডিফল্ট মার্জিন */
.card { margin-bottom: 16px; }

/* বড় সেকশন ব্রেক (পোস্টের পরে) */
.section-divider{
  height:1px;
  background:linear-gradient(90deg,#e9f1ff, #dfe9ff 40%, #e9f1ff);
  margin:20px 0 10px;
  border-radius:1px;
}

/* Comments আলাদা কার্ড */
.comments-card{
  border:1px solid #e7effa;
  border-radius:12px;
  box-shadow:0 2px 14px rgba(20,40,60,.05);
}

/* Comment thread polish (যদি আগে না দিয়ে থাকেন) */
.comments-wrap{ margin-top:0; }
.comment-list, .children{ list-style:none; margin:0; padding:0; }
.comment-body{
  background:#fff; border:1px solid #e7effa; border-radius:10px;
  padding:12px 14px; margin:12px 0;
}
.comment-respond{
  background:#fff; border:1px solid #e7effa; border-radius:12px;
  padding:14px; margin-top:16px;
}

/* মোবাইলে সুন্দর স্ট্যাক */
@media (max-width: 991px){
  .single-layout{ flex-direction:column; }
  .single-aside{ width:100%; }
}


/* ===== Comments (TrickBD-like) ===== */
.bt-comments{ margin-top: 6px; }
.c-head{
  display:flex; align-items:center; gap:10px;
  font-weight:800; color:#0f172a; margin:12px 0 10px;
}
.c-head i{ color:#0b5bd3; }

/* List */
.c-list{ list-style:none; margin:0; padding:0; }
.c-item{ margin:10px 0; border:1px solid #e7effa; border-radius:10px; background:#fff; }
.c-item--creator{ background:#eaf6ff; border-color:#cde7ff; } /* Post Creator highlight */

.c-body{ display:flex; gap:12px; padding:12px; }
.c-left{ flex:0 0 auto; }
.c-avatar__img{ border-radius:50%; box-shadow:0 0 0 3px #fff; }

.c-right{ flex:1 1 auto; min-width:0; }
.c-top{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "author actions"
    "meta actions";
  row-gap:6px; column-gap:10px;
}
.c-author{ grid-area: author; font-weight:800; color:#0f172a; }
.c-badges{ margin-left:8px; }
.c-actions{ grid-area: actions; align-self:start; display:flex; gap:10px; }
.c-actions a{ font-weight:700; font-size:13px; color:#0b5bd3; text-decoration:none; }
.c-actions a:hover{ text-decoration:underline; }
.c-meta{ grid-area: meta; font-size:12.5px; color:#64748b; }

/* Badges */
.c-badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:11.5px; font-weight:800; color:#fff; margin-left:6px; }
.c-badge--creator{ background:#6d55f6; }
.c-badge--admin{ background:#ef4444; }
.c-badge--editor{ background:#f59e0b; }
.c-badge--author{ background:#16a34a; }
.c-badge--contrib{ background:#0ea5e9; }
.c-badge--sub{ background:#475569; }

/* Content */
.c-content{ margin-top:6px; color:#1f2937; line-height:1.7; }
.c-await{ color:#64748b; }

/* Reply form */
.c-form{ margin-top:16px; }
.c-form__wrap{ background:#fff; border:1px solid #e7effa; border-radius:12px; padding:14px; }
.c-form__title{ margin:0 0 10px; font-weight:800; color:#0f172a; }
.c-form__inner textarea,
.c-form__inner input[type="text"],
.c-form__inner input[type="email"],
.c-form__inner input[type="url"]{
  width:100%; border:1px solid #dbe5f4; border-radius:10px; padding:10px 12px; background:#f9fbff;
}
.c-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:800; border:1px solid transparent; cursor:pointer; }
.c-btn--primary{ background:#0b5bd3; border-color:#0b5bd3; color:#fff; }
.c-btn--primary:hover{ filter:brightness(.96); }

/* Nested replies indentation */
.c-list .children{ list-style:none; margin:0 0 0 54px; padding:0; }

/* Mobile */
@media (max-width:575px){
  .c-body{ flex-direction:row; }
  .c-list .children{ margin-left:44px; }
  .c-top{ grid-template-columns: 1fr; grid-template-areas: "author" "meta" "actions"; }
  .c-actions{ justify-content:flex-start; }
}













/* ========== Minimal base & layout (keep light) ========== */
:root{ --bd:#e7effa; --ink:#0f172a; --muted:#64748b; }
.single_page_section{ padding:20px 0 36px; }
.container{ max-width:1140px; margin:0 auto; }
.single-layout{ display:flex; gap:24px; }
.single-main{ flex:1 1 0; }
.single-aside{ flex:0 0 340px; }
.card{ background:#fff; border:1px solid var(--bd); border-radius:12px; box-shadow:0 4px 18px rgba(30,60,90,.06); margin-bottom:16px; }
.card--pad{ padding:22px; }
.section-gap{ margin-top:18px; }
@media(max-width:991px){ .single-layout{flex-direction:column} .single-aside{flex:auto} }

/* ========== HERO ========== */
.hero-wrap{
  margin-bottom:18px;
  background:linear-gradient(135deg,#f862c0,#7a7cff 45%,#40e1d4);
  border-radius:16px;
  padding:26px 26px;
  color:#fff;
  overflow:hidden;
}
.hero-inner{ }
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:24px;
  align-items:center;
}
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
}
.hero-media{
  position:relative; border-radius:12px; overflow:hidden; background:#ffffff22;
  box-shadow:0 8px 26px rgba(0,0,0,.15);
}
.hero-media img{ width:100%; height:220px; display:block; }
.hero-bookmark{
  position:absolute; right:16px; top:12px; width:20px; height:26px; background:#FFD23F; border-radius:4px 4px 2px 2px;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.hero-body{ padding-right:4px; }
.hero-cat{
  display:inline-block; font-weight:800; font-size:12px; letter-spacing:.2px;
  background:#ffffff20; border:1px solid #ffffff33; padding:6px 10px; border-radius:999px; color:#fff; text-decoration:none;
}
.hero-title{
  margin:10px 0 12px; font-size:25px; line-height:1.15; font-weight:900; color:#fff;
}
@media(max-width:575px){ .hero-title{ font-size:28px; } }

/* author row */
.hero-author{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.hero-author .av{ width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fff; flex:0 0 auto; box-shadow:0 0 0 3px #ffffff55; }
.hero-author .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-author .who{ display:flex; flex-direction:column; line-height:1.2; }
.hero-author .name{ font-weight:800; color:#fff; }
.hero-social{ display:flex; gap:8px; margin-left:8px; }
.hero-social a{
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff22; border:1px solid #ffffff44; color:#fff; text-decoration:none;
}
.hero-social a:hover{ background:#ffffff33; }

/* meta row */
.hero-meta{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:8px; font-weight:700; }
.hero-meta .m{ display:inline-flex; align-items:center; gap:8px; opacity:.95; }
.hero-meta i{ opacity:.9; }

/* ========== Content (light styles) ========== */
.post-content{ font-size:16px; line-height:1.9; color:#1f2937; }
.post-content img{ max-width:100%; border-radius:10px; }
.post-content .table-wrap{ overflow:auto; border:1px solid #e6eef7; border-radius:10px; margin:10px 0; }

/* Social badge (center) */
.bt-badge-wrap{ display:flex; justify-content:center; padding:8px 0; }
.badge{ display:flex; align-items:center; gap:10px; height:55px; padding:8px 12px; background:#fff; border-radius:10px; border:1px solid #e8eef7; }
.badge__logo{ width:38px; height:38px; border-radius:8px; object-fit:cover; }
.badge__name{ font-weight:700; color:#111827; }
.badge__btn{ height:22px; padding:0 10px; border-radius:6px; background:#1877F2; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; font-weight:800; }

/* Report + like row */
.bt-meta-row{ display:flex; gap:14px; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--bd); border-radius:10px; padding:12px 14px; }
.bt-meta-left{ flex:1 1 auto; } .bt-meta-right{ display:flex; gap:10px; align-items:center; }
@media(max-width:575px){ .bt-meta-row{ flex-direction:column; align-items:flex-start; } }

/* Comments card (simple) */
.comments-card{ border:1px solid var(--bd); border-radius:12px; box-shadow:0 2px 14px rgba(20,40,60,.05); }
.comment-body{ border:1px solid var(--bd); border-radius:10px; padding:12px 14px; margin:12px 0; }

/* Sidebar sticky */
:root{ --sidebar-top:90px; }
@media(min-width:992px){ .sidebar .sidebar-inner{ position:sticky; top:var(--sidebar-top); } }
@media(min-width:782px){ body.admin-bar .sidebar .sidebar-inner{ top:calc(var(--sidebar-top) + 32px); } }


/* ===== HERO — responsive upgrades ===== */

/* grid stays 2-column on desktop */
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap:24px; align-items:center;
}

/* image: fully responsive, keeps 16:9, no fixed height */
.hero-media{
  position:relative; border-radius:14px; overflow:hidden; background:#ffffff22;
  box-shadow:0 8px 26px rgba(0,0,0,.15);
}
.hero-media img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;       /* keeps nice card shape */
  object-fit:cover;
  display:block;
}

/* text block */
.hero-body{ padding-right:4px; }

/* title scales nicely across sizes */
.hero-title{
  margin:10px 0 12px;
  font-weight:900;
  line-height:1.15;
  color:#fff;
  font-size: clamp(24px, 4.2vw, 28px);
}

/* meta in one line; scrolls horizontally if too tight */
.hero-meta{
  display:flex; align-items:center; gap:18px;
  flex-wrap:nowrap;           /* keep one line */
  overflow:auto;              /* allow swipe on small screens */
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.hero-meta::-webkit-scrollbar{ display:none; } /* hide tiny scrollbar */
.hero-meta .m{ display:inline-flex; align-items:center; gap:8px; opacity:.95; }
.hero-meta .m i{ margin-right:2px; opacity:.9; }

/* mobile & small tablets: center everything, stack order = text first, image next */
@media (max-width: 900px){
  .hero-wrap{ padding:18px; }
  .hero-grid{ grid-template-columns:1fr; gap:16px; }
  .hero-body{ order:1; text-align:center; }
  .hero-media{ order:2; max-width:720px; margin:0 auto; }
  .hero-author{ justify-content:center; }
  .hero-social{ justify-content:center; margin-left:0; }
  .hero-cat{ margin:0 auto 8px; }
  .hero-meta{ justify-content:center; }
}

/* very small phones */
@media (max-width: 420px){
  .hero-meta{ gap:14px; }
  .hero-author .av{ width:40px; height:40px; box-shadow:0 0 0 2px #ffffff55; }
}






/* ===== Actions bar (Left: Like/Report/Edit | Right: include share) ===== */
.bt-sharebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid #e3edf8;
    border-bottom: 1px solid #e3edf8;
    border-radius: 8px;
    margin-bottom: 16px;
}
.bt-share-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bt-edit-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; font-weight:700; font-size:13px; color:#0f172a; text-decoration:none; border:1px solid #e2e8f0; background:#fff; }
.bt-edit-btn:hover{ background:#f7faff; border-color:#cfe2ff; }
/* include/share-button.php styles */
.bt-share-wrap{ display:flex; align-items:center; gap:10px; }
.bt-share-label{color:#555;font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.bt-share-icons{ display:flex; align-items:center; gap:8px; }
.bt-share-icons .sh{ width:30px; height:30px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; box-shadow:0 1px 0 rgba(0,0,0,.06) inset; }
.sh-fb{ background:#3b5998; } .sh-x{ background:#1da1f2; } .sh-g{ background:#d64937; } .sh-p{ background:#bd081c; }
@media (max-width:575px){ .bt-sharebar{flex-direction: column;align-items: center;display: flex;align-content: space-around;justify-content: space-around;flex-wrap: nowrap;} }

/* ===== Tag pills ===== */
.bt-tags{ padding:10px 0 0; }
.bt-taglist{ display:flex; flex-wrap:wrap; gap:10px; }
.bt-taglist a{ display:inline-block; padding:6px 10px; background:#fff; color:#374151; text-decoration:none; border:1px solid #dfe6ef; border-radius:4px; font-size:13px; font-weight:500; }
.bt-taglist a:hover{ background:#f6faff; border-color:#c9d9ff; color:#0b5bd3; }

/* ===== Comments (kept simple) ===== */
.comments-card{ border:1px solid var(--bd); border-radius:12px; box-shadow:0 2px 14px rgba(20,40,60,.05); }
.comment-body{ border:1px solid var(--bd); border-radius:10px; padding:12px 14px; margin:12px 0; }

/* ===== Sidebar sticky ===== */
:root{ --sidebar-top:90px; }
@media(min-width:992px){ .sidebar .sidebar-inner{ position:sticky; top:var(--sidebar-top); } }
@media(min-width:782px){ body.admin-bar .sidebar .sidebar-inner{ top:calc(var(--sidebar-top) + 32px); } }

/* ===== Layout ===== */
.page_section{ padding: 28px 0; }
.page_section .container{ max-width: 1140px; margin: 0 auto; }
.page-layout{ display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 991.98px){
  .page-layout{ grid-template-columns: 1fr; }
}

/* === title (as-is) === */
.bt-hero-title{
  margin:10px 0 12px; font-weight:900; line-height:1.15; color:#000; text-align:center;
}




























/* ===========================
   Pro Kit for .post-contents
   =========================== */
   
   
/* ===========================
   Post Content — BanglaTrick
   =========================== */
.post-contents {
  background: #fff;
  margin: auto;
  color: #000;
  font-family: 'Hind Siliguri', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* ===== Heading Styles ===== */
.post-contents h1 {
  background: #ececec;
  padding: 8px 10px;
  font-size: 20px;
  color: #444;
  border-bottom: 1px solid #ddd;
  margin: 12px 0;
}
/* ===== Heading Styles (fix: always on new line, underline only under text) ===== */
.post-contents h2,
.post-contents h3,
.post-contents h4,
.post-contents h5,
.post-contents h6{
  display: block;                 /* একই লাইনে কিছু থাকবে না */
  width: max-content;             /* ব্লক হলেও টেক্সট-র পরিমাণ অনুযায়ী সাইজ */
  max-width: 100%;                /* বড় হলে wrap হবে */
  font-weight: 700;
  margin: 12px 0 8px 0;
  padding-bottom: 3px;
  line-height: 1.3;
  clear: both;
  /* টেক্সট-মাত্র আন্ডারলাইন (border নয়) */
  background-image: linear-gradient(#ddd,#ddd);
  background-repeat: no-repeat;
  background-size: 100% 2px;      /* 2px আন্ডারলাইন */
  background-position: left calc(100% - 0px);
  border-bottom: none;            /* আগে দেয়া border-bottom বাদ */
}

/* হেডিং-এর ভেতরে লিংক থাকলে */
.post-contents h2 a,
.post-contents h3 a,
.post-contents h4 a,
.post-contents h5 a,
.post-contents h6 a{
  color: inherit; text-decoration: none;
}
.post-contents h2 a:hover,
.post-contents h3 a:hover,
.post-contents h4 a:hover,
.post-contents h5 a:hover,
.post-contents h6 a:hover{
  text-decoration: underline;
}

/* ফাঁকা/খালি/শুধু <br> বা খালি <a> — লুকাও (modern browsers) */
.post-contents h1:empty,
.post-contents h2:empty,
.post-contents h3:empty,
.post-contents h4:empty,
.post-contents h5:empty,
.post-contents h6:empty{ display:none; }
.post-contents h1:has(> br:only-child),
.post-contents h2:has(> br:only-child),
.post-contents h3:has(> br:only-child),
.post-contents h4:has(> br:only-child),
.post-contents h5:has(> br:only-child),
.post-contents h6:has(> br:only-child),
.post-contents h1:has(> a:empty),
.post-contents h2:has(> a:empty),
.post-contents h3:has(> a:empty),
.post-contents h4:has(> a:empty),
.post-contents h5:has(> a:empty),
.post-contents h6:has(> a:empty){ display:none; }



/* ===== Paragraph ===== */
.post-contents p {
  font-size: 16px;
  color: #333;
  margin: 10px 0;
}

/* ===== List Styles ===== */
.post-contents li {
  margin: 6px 0 6px 25px;
  list-style: none;
  position: relative;
}

/* Ordered List */
.post-contents ol {
  counter-reset: list;
  margin: 12px 0;
  padding: 0;
}
.post-contents ol li {
  counter-increment: list;
}
.post-contents ol li::before {
  content: counter(list) ".";
  position: absolute;
  left: -22px;
  font-weight: bold;
  color: #333;
}

/* Unordered List */
.post-contents ul { margin: 12px 0; padding: 0; }
.post-contents ul li::before {
  content: "•";
  position: relative;
  left: -18px;
  color: #000;
  font-size: 16px;
  font-weight: bold;
}


/* ===== Table ===== */
.post-contents table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
.post-contents td,
.post-contents th {
  border: 1px solid #ddd;
  padding: 8px;
}

/* ===== Image ===== */
.post-contents img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
   

/* --- Link & HR --- */
.post-contents a{ color:#0a70f5; text-decoration:none; }
.post-contents a:hover{ text-decoration:underline; }
.post-contents hr{
  border:0; height:1px; background:linear-gradient(90deg,#eee, #dcdcdc, #eee);
  margin: 22px 0;
}

/* --- Blockquote (normal) --- */
.post-contents blockquote{
  margin:16px 0; padding:14px 16px 14px 46px;
  background:#fafafa; border:1px solid #eee; border-radius:10px;
  position:relative; color:#333;
}
.post-contents blockquote::before{
  content:"“"; position:absolute; left:12px; top:4px; font-size:44px; line-height:1; color:#d0d0d0;
}
.post-contents blockquote footer,
.post-contents cite{ display:block; margin-top:8px; color:#666; font-style:normal; }

/* --- Pull Quote (float, highlight) --- */
.post-contents .pull-quote{
  font-size:1.1rem; font-weight:600; line-height:1.5;
  border-left:4px solid #0a70f5; padding:10px 12px; margin:14px 0;
}
@media (min-width: 768px){
  .post-contents .pull-quote.is-left{ float:left; width:42%; margin:6px 18px 12px 0; }
  .post-contents .pull-quote.is-right{ float:right; width:42%; margin:6px 0 12px 18px; }
}

/* --- Highlight / Mark / KBD --- */
.post-contents mark{ background:#fff8a6; padding:0 4px; border-radius:3px; }
.post-contents .hl{ background: #e8f3ff; border-bottom:2px solid #b8dbff; }
.post-contents kbd{
  background:#f1f1f1; border:1px solid #d8d8d8; border-bottom-width:2px;
  border-radius:4px; padding:0 6px; font-family:Consolas,monospace; font-size:90%;
}

/* --- Inline code vs Block code --- */
.post-contents :not(pre) > code{
  display:inline; padding:2px 6px; border-radius:4px;
  background:#f4f6f8; border:1px solid #e5e7eb; font-family:Consolas,monospace;
}
.post-contents pre{ background:#0f172a; color:#e5e7eb; padding:14px; border-radius:10px; overflow:auto; }
.post-contents pre code{ background:transparent; border:0; color:inherit; }

/* --- Buttons (utility) --- */
.post-contents .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:10px; font-weight:600; cursor:pointer;
  border:1px solid transparent; transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  text-decoration:none; line-height:1.1;
}
.post-contents .btn:active{ transform:translateY(1px); }
.post-contents .btn.is-sm{ padding:7px 12px; font-size:14px; border-radius:8px; }
.post-contents .btn.is-lg{ padding:12px 18px; font-size:18px; }

/* Variants */
.post-contents .btn.primary{ background:#0a70f5; color:#fff; box-shadow:0 6px 14px rgba(10,112,245,.18); }
.post-contents .btn.primary:hover{ filter:brightness(0.96); }
.post-contents .btn.outline{ background:#fff; border-color:#d9e6ff; color:#0a70f5; }
.post-contents .btn.outline:hover{ background:#f5f9ff; }
.post-contents .btn.success{ background:#16a34a; color:#fff; }
.post-contents .btn.warning{ background:#f59e0b; color:#1f2937; }
.post-contents .btn.danger{ background:#ef4444; color:#fff; }
.post-contents .btn.muted{ background:#f3f4f6; color:#374151; }

/* --- Icon bubble (for btn) --- */
.post-contents .btn .ic{
  width:20px; height:20px; display:inline-grid; place-items:center;
  border-radius:6px; background:rgba(255,255,255,.2);
}

/* --- Notice / Callout boxes --- */
.post-contents .notice{
  border-radius:12px; padding:12px 14px; margin:14px 0;
  border:1px solid #e5e7eb; background:#fbfbfb; position:relative;
}
.post-contents .notice .n-title{
  font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.post-contents .notice .n-body{ margin:0; }
.post-contents .notice .n-actions{ margin-top:10px; }
.post-contents .notice .n-actions .btn{ margin-right:8px; }

/* Color variants */
.post-contents .note--info{ border-color:#bfd7ff; background:#f4f8ff; }
.post-contents .note--info .n-title{ color:#0a70f5; }

.post-contents .note--success{ border-color:#bfe7cc; background:#f4fff7; }
.post-contents .note--success .n-title{ color:#15803d; }

.post-contents .note--warn{ border-color:#ffe2b8; background:#fffaf2; }
.post-contents .note--warn .n-title{ color:#b45309; }

.post-contents .note--danger{ border-color:#ffc9c9; background:#fff5f5; }
.post-contents .note--danger .n-title{ color:#b91c1c; }

/* --- Table (responsive wrapper) --- */
.post-contents .table-responsive{
  width:100%; overflow:auto;  background:#fff;
}
.post-contents .table-responsive table{ width:100%; border-collapse:collapse; min-width:560px; }
.post-contents .table-responsive th,
.post-contents .table-responsive td{ border-bottom:1px solid #eee; padding:10px 12px; text-align:left; }
.post-contents .table-responsive thead th{ background:#f8fafc; font-weight:700; }

/* Zebra rows */
.post-contents tbody tr:nth-child(even){ background:#fafafa; }

/* --- Responsive media (iframe, video) --- */
.post-contents .embed{
  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
  margin:14px 0; border-radius:12px; overflow:hidden; background:#000;
}
.post-contents .embed iframe,
.post-contents .embed video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* --- Image alignment helpers (WP classes) --- */
.post-contents .alignleft{ float:left; margin:6px 14px 10px 0; }
.post-contents .alignright{ float:right; margin:6px 0 10px 14px; }
.post-contents .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
@media (max-width: 767.98px){
  .post-contents .alignleft,
  .post-contents .alignright{ float:none; margin:10px auto; display:block; }
}

/* --- Tiny TOC (Table of Contents) --- */
.post-contents .toc{
  border:1px solid #e5e7eb; background:#f9fafb; border-radius:12px; padding:12px 14px; margin:16px 0;
}
.post-contents .toc .toc-title{ font-weight:800; margin-bottom:8px; }
.post-contents .toc ul{ list-style:none; padding:0; margin:0; }
.post-contents .toc li{ margin:6px 0 6px 0; }
.post-contents .toc a{ text-decoration:none; color:#0a70f5; }
.post-contents .toc a:hover{ text-decoration:underline; }

/* --- Small badges / pills --- */
.post-contents .pill{
  display:inline-block; background:#eef2ff; color:#3730a3; border:1px solid #dbeafe;
  padding:3px 8px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.2px;
}

/* --- Tips row (checklist style) --- */
.post-contents .tips{ margin:14px 0; padding:0; list-style:none; }
.post-contents .tips li{
  display:flex; gap:10px; align-items:flex-start; margin:8px 0; padding:8px 10px; background:#f8fafc; border-radius:10px; border:1px solid #eef2f7;
}
.post-contents .tips li .tick{
  width:22px; height:22px; border-radius:6px; background:#d1fae5; display:grid; place-items:center; font-weight:900; color:#047857;
}

/* --- Footnotes (nice) --- */
.post-contents .footnotes{ font-size:90%; color:#555; }
.post-contents .footnotes ol{ margin-left:24px; }
.post-contents sup.footnote-ref a{ text-decoration:none; }

/* --- Small mobile tweaks --- */
@media (max-width: 480px){
  .post-contents{ font-size:16px; }
  .post-contents .btn{ width:100%; justify-content:center; }
}

/* === Disable .card styles only inside .post-contents === */
.post-contents.card,
.post-contents .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Image Styling */
.post-contents img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto 15px auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}