@charset "UTF-8";
/* =====================================================================
   NEWSSURMA — PREMIUM LAYER
   ---------------------------------------------------------------------
   "সুরমা" = গাঢ় নীলচে-কালো রঙ / সিলেটের সুরমা নদী।
   পরিচয়: গাঢ় টিল-নেভি (ink) + উষ্ণ সোনালি (gold) + পরিশীলিত ক্রিমসন।

   এই ফাইলটি সবার শেষে লোড হয়, তাই এটি বিদ্যমান রঙ/স্টাইল ওভাররাইড করে।
   মূল থিম ফাইল অক্ষত — শুধু এই একটি লেয়ার সরালেই আগের চেহারায় ফিরবে।
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ডিজাইন টোকেন (Design Tokens)
   --------------------------------------------------------------------- */
:root {
  /* Brand — Surma */
  --surma-ink:      #0E3A4F;   /* গাঢ় টিল-নেভি — primary */
  --surma-ink-deep: #0A2C3D;   /* আরও গাঢ় — gradient/হোভার */
  --surma-azure:    #1C6E8C;   /* secondary teal-blue — লিঙ্ক */
  --surma-gold:     #C79A3C;   /* উষ্ণ সোনালি — accent/eyebrow */
  --surma-gold-soft:#E6C778;
  --surma-crimson:  #C8362F;   /* ব্রেকিং/গুরুত্বপূর্ণ */

  /* Surfaces */
  --paper:   #FAF8F4;          /* উষ্ণ অফ-হোয়াইট ব্যাকগ্রাউন্ড */
  --paper-2: #F2EFE8;
  --card:    #FFFFFF;
  --line:    #E7E3DA;          /* hairline */
  --line-2:  #D8D3C7;

  /* Text */
  --ink:     #1B262C;          /* near-black body */
  --muted:   #5E6B72;          /* caption/meta */

  /* Type */
  --font-head: 'Noto Serif Bengali', 'SolaimanLipiNormal', Georgia, serif;
  --font-body: 'Hind Siliguri', 'SolaimanLipiNormal', system-ui, sans-serif;

  /* Shape & depth */
  --radius:    14px;
  --radius-sm: 10px;
  --shadow-1:  0 1px 2px rgba(14,58,79,.04), 0 4px 14px rgba(14,58,79,.06);
  --shadow-2:  0 6px 18px rgba(14,58,79,.10), 0 18px 40px rgba(14,58,79,.12);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .38s;
}

/* ---------------------------------------------------------------------
   2. বেস ও টাইপোগ্রাফি
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: 0; }

a { transition: color .2s var(--ease); }

::selection { background: var(--surma-gold-soft); color: var(--surma-ink-deep); }

/* অ্যাক্সেসিবিলিটি — কীবোর্ড ফোকাস দৃশ্যমান */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--surma-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   3. সেকশন ব্যাকগ্রাউন্ড — উষ্ণ পেপার ও সাদা পর্যায়ক্রমে
   --------------------------------------------------------------------- */
.section_4, .section_6, .section_8, .section_10, .section_12 { background: var(--paper); }
.section_5, .section_7, .section_9, .section_11, .section_13, .section_14 { background: var(--card); }
.background_1 { background: var(--card); border-radius: var(--radius-sm); }
.background_2 { background: var(--paper-2); border-radius: var(--radius-sm); }

.border        { border-bottom: 1px solid var(--line); }
.border_1      { border-bottom: 2px solid var(--line); }
.border_again  { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------
   4. হেডার — লোগো, সার্চ, ব্যানার, তারিখ
   --------------------------------------------------------------------- */
.section_1 {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.logo img { padding: 6px; }
.date { color: var(--muted); font-weight: 500; }

/* প্রিমিয়াম সার্চ ফিল্ড */
form.example input[type=text] {
  border: 1px solid var(--line-2);
  border-radius: 999px 0 0 999px;
  background: var(--card);
  color: var(--ink);
  padding: 8px 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
form.example input[type=text]:focus {
  border-color: var(--surma-azure);
  box-shadow: 0 0 0 3px rgba(28,110,140,.12);
  outline: none;
}
form.example button {
  background: var(--surma-ink);
  border: 1px solid var(--surma-ink);
  border-radius: 0 999px 999px 0;
  padding: 8px 14px;
  transition: background .2s var(--ease);
}
form.example button:hover { background: var(--surma-ink-deep); border-color: var(--surma-ink-deep); }

/* ---------------------------------------------------------------------
   5. টপ টিকার — প্রিমিয়াম "ব্রেকিং" লেবেল
   --------------------------------------------------------------------- */
.scrool { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.scrool_1 {
  background: var(--surma-crimson) !important;
  color: #fff !important;
  font-weight: 600;
  position: relative;
}
/* লেবেলের ডানে তীর-আকৃতি */
.scrool_1::after {
  content: "";
  position: absolute; top: 0; right: -10px; height: 100%; width: 20px;
  background: var(--surma-crimson);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 2;
}
.scrool_2 { background: var(--card); }
.scrool_2 a { color: var(--ink); font-weight: 500; transition: color .2s var(--ease); }
.scrool_2 a:hover { color: var(--surma-crimson); }
.scrool_2 i { color: var(--surma-gold); margin: 0 6px 0 14px; }

/* ---------------------------------------------------------------------
   6. মেনু বার — গাঢ় সুরমা গ্রেডিয়েন্ট
   --------------------------------------------------------------------- */
.section_2 { background: var(--surma-ink); }
.menu_bottom {
  background: linear-gradient(180deg, var(--surma-ink) 0%, var(--surma-ink-deep) 100%);
  border-bottom: 3px solid var(--surma-gold);
  border-radius: 0;
}
.menu_area .menu_bottom .mainmenu a,
.navbar-default .navbar-nav > li > a {
  color: rgba(255,255,255,.92);
  font-weight: 500;
  border-right: 1px solid rgba(255,255,255,.08);
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
/* সোনালি আন্ডারলাইন হোভার ইন্ডিকেটর */
.navbar-default .navbar-nav > li > a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--surma-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.navbar-default .navbar-nav > li > a:hover { color: #fff; background: rgba(255,255,255,.06); }
.navbar-default .navbar-nav > li > a:hover::after { transform: scaleX(1); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background: var(--surma-gold) !important;
  color: var(--surma-ink-deep) !important;
  font-weight: 700;
  margin-left: 0 !important;
}
.navbar-toggle { border-color: rgba(255,255,255,.4); }
.navbar-toggle .icon-bar { background: #fff; }

/* ---------------------------------------------------------------------
   7. ক্যাটাগরি টাইটেল বার — সিগনেচার উপাদান
   --------------------------------------------------------------------- */
/* স্টাইল ১ (.catagory-title) — বাঁয়ে সোনালি মার্কার + অ্যানিমেটেড আন্ডারলাইন */
.catagory-title {
  position: relative;
  background: linear-gradient(90deg, rgba(199,154,60,.10), transparent 40%);
  border-bottom: 2px solid var(--surma-ink) !important;
  padding-left: 16px !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.catagory-title::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 60%; border-radius: 3px;
  background: linear-gradient(var(--surma-gold), var(--surma-crimson));
}
.catagory-title i { color: var(--surma-gold); margin-right: 6px; }

/* "ফিক্সড ক্যাটাগরি" সাইডবার হেডার — গাঢ় সুরমা প্যানেল */
.fixed_catagory {
  background: linear-gradient(180deg, var(--surma-ink), var(--surma-ink-deep)) !important;
  border-bottom: 3px solid var(--surma-gold) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 12px !important;
}
.fixed_catagory a { color: #fff !important; font-family: var(--font-head); font-weight: 600; }
.fixed_catagory a:hover { color: var(--surma-gold-soft) !important; }

/* পয়েন্টার স্টাইল (style 2) — সোনালি টিপ */
#pointer { background: var(--surma-ink) !important; border-radius: 6px 0 0 6px; }
#pointer a, #pointer { color: #fff !important; }
#pointer:before { border-left-color: var(--surma-gold) !important; }
#pointer i { color: var(--surma-gold-soft); margin-right: 6px; }

/* style 3 ও 4 ট্যাগ আকৃতি — সুরমা টোন */
.catagory_title_2 a, .catagory_title_2 p { border-radius: 4px 0 0 4px; }
.catagory_title_2 i, .catagory_title_3 i { margin-right: 6px; }

/* ---------------------------------------------------------------------
   8. নিউজ কার্ড — সারফেস, শ্যাডো ও হোভার লিফট
   --------------------------------------------------------------------- */
.big_news,
.middle_news,
.images_title,
.images_title_1 {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.big_news, .middle_news {
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.big_news:hover,
.middle_news:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
/* কার্ড টেক্সট প্যাডিং */
.big_news .content_dtails,
.middle_news .content_dtails { color: var(--muted); }
.content_dtails span a { color: var(--surma-azure); font-weight: 600; }

/* তালিকা-আইটেম থাম্বনেইল (টেক্সট পাশে) */
.images_title, .images_title_1 {
  padding: 10px !important;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  transition: background .2s var(--ease);
}
.images_title:hover, .images_title_1:hover { background: var(--paper); }

/* ---------------------------------------------------------------------
   9. ★ রেসপন্সিভ ইমেজ ফিক্স ★  (মূল সমস্যার সমাধান)
   ---------------------------------------------------------------------
   আগে: img { width:100%; height:auto } → আলাদা অনুপাতের ছবিতে বক্স
   ছোট-বড় হতো। এখন: প্রতিটি ছবিকে নির্দিষ্ট অনুপাতে বসিয়ে object-fit:cover
   দিয়ে সমান উচ্চতা — পাশাপাশি বক্সগুলো সবসময় সারিবদ্ধ থাকবে।
   --------------------------------------------------------------------- */

/* বড় ও মাঝারি নিউজ ছবি — ১৬:৯ */
.big_news img,
.middle_news img,
.Name img,
.Name-again img,
.image-again img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper-2);
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
/* হোভারে মৃদু জুম + উজ্জ্বলতা */
.big_news:hover img,
.middle_news:hover img { transform: scale(1.04); filter: brightness(1.03); }

/* ছোট তালিকা-থাম্বনেইল — ৪:৩, বাঁয়ে ভাসমান, সমান উচ্চতা */
.images_title img,
.images_title_1 img,
.signle-tab-img img {
  float: left;
  width: 34% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  margin-right: 12px;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm);
  padding: 0 !important;
  background: var(--paper-2);
}

/* গ্যালারি ও আর্কাইভ ছবি — সামঞ্জস্যপূর্ণ অনুপাত */
.gallary img,
.archive_page img,
.archive-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.profile_news img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}

/* খুব পুরোনো ব্রাউজার ফলব্যাক (aspect-ratio অসমর্থিত) */
@supports not (aspect-ratio: 1 / 1) {
  .big_news img, .middle_news img, .Name img { max-height: 230px; object-fit: cover; }
  .images_title img, .images_title_1 img, .signle-tab-img img { height: 78px; }
}

/* ক্যারোসেল ক্যাপশন (গ্যালারি) — সবসময় পাঠযোগ্য */
.photo_caption, .sgl-hadding {
  background: linear-gradient(transparent, rgba(10,44,61,.85)) !important;
  opacity: 1 !important;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------------------------------------------------------------------
   10. হেডিং ও লিঙ্ক — পরিশীলিত হোভার
   --------------------------------------------------------------------- */
.hadding_1 a, .hadding_2 a, .hadding_3 a {
  font-family: var(--font-head);
  color: var(--ink);
  transition: color .2s var(--ease);
}
.hadding_1 a:hover, .hadding_2 a:hover { color: var(--surma-crimson); }
.hadding_3 a:hover { color: var(--surma-azure); }

/* "আরও খবর" — সোনালি, স্লাইডিং তীর */
.more_news a, .archvie_more a {
  color: var(--surma-azure);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.more_news a i { transition: transform .25s var(--ease); }
.more_news a:hover { color: var(--surma-crimson); }
.more_news a:hover i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   11. ট্যাব হেডার (সর্বশেষ / জনপ্রিয়)
   --------------------------------------------------------------------- */
.tab-header { background: var(--card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-1); }
.tab-header .nav-tabs { background: var(--paper-2); }
.tab-header .nav-tabs > li > a {
  border-top: 3px solid transparent;
  color: var(--muted); font-weight: 600;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.tab-header .nav-tabs > li > a:hover { background: var(--card); color: var(--ink); }
.tab-header .nav-tabs > li.active > a,
.tab-header .nav-tabs > li.active > a:focus,
.tab-header .nav-tabs > li.active > a:hover {
  background: var(--card);
  color: var(--surma-ink);
  border-top: 3px solid var(--surma-gold);
}

/* ---------------------------------------------------------------------
   12. প্রিমিয়াম স্ক্রলবার (তালিকা ও পেজ)
   --------------------------------------------------------------------- */
.news-title, .tab-header .tab-content ul.media-list { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.news-title::-webkit-scrollbar, .tab-header .tab-content ul.media-list::-webkit-scrollbar { width: 6px; }
.news-title::-webkit-scrollbar-thumb,
.tab-header .tab-content ul.media-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.news-title::-webkit-scrollbar-thumb:hover { background: var(--surma-azure); }

/* ---------------------------------------------------------------------
   13. ক্যারোসেল ন্যাভ/ডট
   --------------------------------------------------------------------- */
.carasoule-news .owl-nav div { background-color: var(--surma-ink); box-shadow: 0 4px 12px rgba(14,58,79,.3); }
.carasoule-news .owl-dots div.active { background: var(--surma-gold); }
.carasoule-news .owl-dots div { background: var(--line-2); }

/* ---------------------------------------------------------------------
   14. বিজ্ঞাপন/উইজেট ব্লক
   --------------------------------------------------------------------- */
.add img { border-radius: var(--radius-sm); }
.photo_gallary { border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------------------------------------------------------------------
   15. স্ক্রোল-টু-টপ — পরিশীলিত
   --------------------------------------------------------------------- */
.scrollToTop {
  background: linear-gradient(180deg, var(--surma-ink), var(--surma-ink-deep)) !important;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow-2);
  opacity: .9 !important;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.scrollToTop:hover { opacity: 1 !important; transform: translateY(-3px); }
.scrollToTop i.fa { color: var(--surma-gold-soft); }

/* ---------------------------------------------------------------------
   16. ফুটার — গাঢ় সুরমা
   --------------------------------------------------------------------- */
.footer-section {
  background: linear-gradient(180deg, var(--surma-ink), var(--surma-ink-deep)) !important;
  border-top: 3px solid var(--surma-gold);
}
.footer-border { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.footer-menu ul li a, .btm-footer-menu ul li a { transition: color .2s var(--ease); }
.footer-menu ul li a:hover, .btm-footer-menu ul li a:hover { color: var(--surma-gold-soft) !important; }
.footer-menu ul li::before { content: "▸"; color: var(--surma-gold); margin-right: 8px; font-size: 12px; }

/* ফুটার সোশ্যাল আইকন */
.btm-social ul li {
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.btm-social ul li:hover { background: var(--surma-gold); border-color: var(--surma-gold) !important; transform: translateY(-2px); }
.btm-social ul li:hover a { color: var(--surma-ink-deep) !important; }

.btm-footer-section { background: #061E29 !important; }

/* ---------------------------------------------------------------------
   17. সিঙ্গেল পেজ — হালকা পরিশীলন
   --------------------------------------------------------------------- */
.single-title { color: var(--surma-ink); }
.single-cat-home { background: var(--surma-crimson); }
.single-cat-cate { background: var(--surma-ink); }
.single-img img, .psingle_page img { border-radius: var(--radius); }
.sgl-cat-tittle { background: var(--surma-ink); border-radius: var(--radius-sm); }
.archive-page-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }

/* ---------------------------------------------------------------------
   18. অ্যানিমেশন
   --------------------------------------------------------------------- */
@keyframes surmaFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* হোম পেজের প্রথম সেকশন লোডে মৃদু প্রকাশ */
.section_4 .big_news { animation: surmaFadeUp .6s var(--ease) both; }
.section_4 > div > .row > div:nth-child(2) { animation: surmaFadeUp .7s .08s var(--ease) both; }

/* ---------------------------------------------------------------------
   19. মোশন-সংবেদনশীল ব্যবহারকারীদের জন্য
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .big_news:hover img, .middle_news:hover img { transform: none; }
}

/* ---------------------------------------------------------------------
   20. রেসপন্সিভ পরিশীলন
   --------------------------------------------------------------------- */
/* ট্যাবলেট */
@media (min-width: 768px) and (max-width: 991px) {
  .big_news, .middle_news { margin-bottom: 12px; }
  .images_title img, .images_title_1 img, .signle-tab-img img { width: 38% !important; }
}
/* মোবাইল — ছবি একই অনুপাতে, কার্ড পূর্ণ-প্রস্থ */
@media (max-width: 767px) {
  :root { --radius: 12px; }
  .big_news img, .middle_news img { aspect-ratio: 16 / 9; }
  .images_title img, .images_title_1 img, .signle-tab-img img {
    width: 40% !important; aspect-ratio: 4 / 3; margin-right: 10px;
  }
  .big_news:hover, .middle_news:hover { transform: none; }   /* টাচে লিফট নয় */
  .menu_bottom { border-bottom-width: 2px; }
  .scrool_1::after { display: none; }
}