/* ============================================================
   PREMIUM LAYER  —  Trust Soft BD
   ------------------------------------------------------------
   এই ফাইলটি থিমের সব স্টাইলের শেষে লোড হয়, তাই উপরে বসে।
   এখানে শুধু "প্রিমিয়াম পলিশ" যোগ করা হয়েছে — লেআউট/স্ট্রাকচার
   অপরিবর্তিত। পুরো কালার স্কিম নিচের ভেরিয়েবল দিয়ে নিয়ন্ত্রিত;
   মাত্র ২–৩টি মান বদলালেই পুরো সাইটের লুক বদলে যাবে।
   ============================================================ */

:root{
  /* ---- Brand palette (এখানে বদলান) ---- */
  --pr-accent:    #be1e2d;   /* মূল ব্র্যান্ড কালার (premium crimson) */
  --pr-accent-2:  #8c0f1d;   /* গ্রেডিয়েন্টের গাঢ় শেড */
  --pr-ink:       #15171c;   /* গাঢ় চারকোল (টাইটেল বার / টেক্সট) */
  --pr-ink-2:     #2a2e37;   /* সেকেন্ডারি ইঙ্ক */
  --pr-gold:      #ecc15a;   /* ছবির উপর হোভার হাইলাইট (নিয়ন হলুদের বদলে) */

  /* ---- Surfaces ---- */
  --pr-bg:        #f4f3f1;   /* পেজ ব্যাকগ্রাউন্ড (ওয়ার্ম পেপার-হোয়াইট) */
  --pr-card:      #ffffff;   /* কার্ড ব্যাকগ্রাউন্ড */
  --pr-line:      rgba(21,23,28,.08);
  --pr-line-2:    rgba(21,23,28,.14);

  /* ---- Depth & motion ---- */
  --pr-shadow:    0 10px 28px rgba(18,20,26,.10), 0 2px 6px rgba(18,20,26,.06);
  --pr-shadow-sm: 0 4px 14px rgba(18,20,26,.08);
  --pr-shadow-lg: 0 18px 44px rgba(18,20,26,.16);
  --pr-radius:    12px;
  --pr-radius-sm: 8px;
  --pr-ease:      cubic-bezier(.22,.61,.27,1);
}

/* ============================================================
   1) GLOBAL  —  টাইপোগ্রাফি, ব্যাকগ্রাউন্ড, স্মুদনেস
   ============================================================ */
body{
  background: var(--pr-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a{ transition: color .25s var(--pr-ease), background-color .25s var(--pr-ease), opacity .25s var(--pr-ease); }

::selection{ background: var(--pr-accent); color:#fff; }

img{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }

/* সেকশনগুলোর মাঝে একটু শ্বাস নেওয়ার জায়গা */
.codedokan_section_one,
.section-two,
.section-four{ padding-top: 6px; padding-bottom: 6px; }

/* ============================================================
   2) CATEGORY TITLES  —  ১০টি স্টাইলেই প্রিমিয়াম লুক
   ------------------------------------------------------------
   টাইপোগ্রাফি ভারী + ট্র্যাকিং, রিফাইনড অ্যাকসেন্ট বার,
   সফট শ্যাডো, "আরও খবর" লিংক আপারকেস + smooth hover।
   ============================================================ */
[class^="codedokan_cat0"],
[class*=" codedokan_cat0"],
.codedokan_cat10{
  font-weight: 700 !important;
  letter-spacing: .2px;
  box-shadow: var(--pr-shadow-sm);
  border-radius: var(--pr-radius-sm);
  overflow: hidden;
  position: relative;
}

/* টাইটেলের মূল টেক্সট লিংক */
[class^="codedokan_cat0"] > a,
[class*=" codedokan_cat0"] > a,
.codedokan_cat10 > a{
  font-weight: 700 !important;
  letter-spacing: .3px;
}

/* "আরও খবর / more" লিংক — পরিশীলিত ছোট আপারকেস পিল */
.codedokan_cat01 > span > a,
.codedokan_cat03 > span > a,
.codedokan_cat08 > span > a,
.codedokan_cat10 > span > a,
.codedokan_cat09 > span > a{
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 11px !important;
  font-weight: 600;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.codedokan_cat01 > span > a:hover,
.codedokan_cat03 > span > a:hover,
.codedokan_cat08 > span > a:hover,
.codedokan_cat10 > span > a:hover{ opacity: 1; transform: translateX(2px); }

/* Style 01 — বাম দিকে অ্যাকসেন্ট বার, গাঢ় গ্রেডিয়েন্ট */
.codedokan_cat01{
  background: linear-gradient(95deg, var(--pr-ink) 0%, var(--pr-ink-2) 100%) !important;
  border-left: 4px solid var(--pr-accent) !important;
  padding: 12px 14px !important;
}

/* Style 02 — সলিড ইঙ্ক + accent বার */
.codedokan_cat02{
  background: linear-gradient(95deg, var(--pr-ink) 0%, var(--pr-ink-2) 100%) !important;
  border-left: 4px solid var(--pr-accent) !important;
  padding: 12px 14px !important;
}

/* Style 03 / 04 — slanted accent ট্যাব (অ্যারো শেপ ধরে রেখে রঙ রিফাইন) */
.codedokan_cat03 > a,
.codedokan_cat04 > a{
  background: linear-gradient(95deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%) !important;
  font-weight: 700;
  padding: 11px 16px !important;
}
.codedokan_cat03 > a::after{ border-top-color: var(--pr-accent-2) !important; }
.codedokan_cat04 > a::after{ border-top-color: var(--pr-accent-2) !important; }
.codedokan_cat03 > span > a{ color: var(--pr-accent) !important; }

/* Style 05 — ডবল লাইন আন্ডারলাইন (গ্রেডিয়েন্ট) */
.codedokan_cat05{ box-shadow:none; border-radius:0; }
.codedokan_cat05 a{ font-weight: 700; }
.codedokan_cat05 .catBar::before{ border-top-color: var(--pr-accent) !important; }
.codedokan_cat05 .catBar::after{ border-top-color: var(--pr-line-2) !important; }

/* Style 06 — রাউন্ডেড টপ বার */
.codedokan_cat06{
  background: linear-gradient(95deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%) !important;
  border-radius: var(--pr-radius-sm) var(--pr-radius-sm) 0 0 !important;
  padding: 12px 14px !important;
}

/* Style 07 / 08 — নিচে বর্ডার + slanted ট্যাব */
.codedokan_cat07,
.codedokan_cat08{
  border-bottom: 2px solid var(--pr-accent) !important;
  border-top: 1px solid var(--pr-line) !important;
  box-shadow:none;
  border-radius: var(--pr-radius-sm) var(--pr-radius-sm) 0 0;
}
.codedokan_cat07 > a,
.codedokan_cat08 > a{
  background: linear-gradient(95deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%) !important;
  font-weight: 700;
}
.codedokan_cat07 > a::after{ border-bottom-color: var(--pr-accent-2) !important; }
.codedokan_cat08 > a::after{ border-bottom-color: var(--pr-accent-2) !important; }
.codedokan_cat08 > span > a{ color: var(--pr-accent) !important; }

/* Style 09 — ডাবল আন্ডারলাইন accent */
.codedokan_cat09{
  border-bottom: 4px solid var(--pr-line-2) !important;
  padding: 12px 14px !important;
}
.codedokan_cat09 span{ border-bottom: 4px solid var(--pr-accent) !important; }

/* Style 10 — সলিড ট্যাব + নিচে accent লাইন */
.codedokan_cat10{
  border-bottom: 3px solid var(--pr-accent) !important;
  box-shadow:none;
  border-radius: var(--pr-radius-sm) var(--pr-radius-sm) 0 0;
}
.codedokan_cat10 > a{
  background: linear-gradient(95deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%) !important;
  font-weight: 700;
}
.codedokan_cat10 > span > a{ color: var(--pr-accent) !important; }

/* সেকশন-টু'র ট্যাব হেডিং (codedokan_cat6) */
.codedokan_cat6 .nav-link.active{
  color: var(--pr-accent) !important;
  font-weight: 700;
  letter-spacing: .3px;
}
.codedokan_cat6 .themeBazar6::before{ background: var(--pr-accent) !important; }

/* ============================================================
   3) NEWS CARDS / BOXES  —  ডেপথ, রাউন্ডিং, হোভার লিফট, ইমেজ জুম
   ------------------------------------------------------------
   স্লাইডার ও বক্সের স্ট্রাকচার একই; শুধু প্রিমিয়াম ফিনিশ।
   ============================================================ */

/* কার্ড র‍্যাপারগুলো — সাদা সারফেস, সফট শ্যাডো, রাউন্ডেড, হোভারে উঠে আসে */
.secFour-wrpp,
.sec-two-wrpp,
.sec-one-wrpp,
.sec-one-wrpp2,
.secThree-wrpp,
.secSeven-wrpp,
.secEight-wrpp,
.secEight-wrpp2,
.secOne-smallItem,
.secThree-smallItem,
.secFive-smallItem{
  background: var(--pr-card);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius) !important;
  box-shadow: var(--pr-shadow-sm) !important;
  overflow: hidden;
  transition: transform .35s var(--pr-ease), box-shadow .35s var(--pr-ease), border-color .35s var(--pr-ease);
}
.secFour-wrpp:hover,
.sec-two-wrpp:hover,
.sec-one-wrpp:hover,
.sec-one-wrpp2:hover,
.secThree-wrpp:hover,
.secSeven-wrpp:hover,
.secEight-wrpp:hover,
.secEight-wrpp2:hover,
.secOne-smallItem:hover,
.secThree-smallItem:hover,
.secFive-smallItem:hover{
  transform: translateY(-5px);
  box-shadow: var(--pr-shadow) !important;
  border-color: var(--pr-line-2);
}

/* ছবির র‍্যাপার — overflow hidden + smooth জুম-অন-হোভার */
.sec-one-image,
.secOne-image2,
.secOne-sub-image,
.secOne-smallImg,
.section-two-image,
.secFour-image,
.secThree-image,
.sec-theee-image,
.sec-theee-image2,
.secFive-image,
.secSeven-image,
.secSeven-image2,
.secEight-image,
.secEight-image2,
.tab-image{
  overflow: hidden;
  position: relative;
}
.sec-one-image img,
.secOne-image2 img,
.secOne-sub-image img,
.secOne-smallImg img,
.section-two-image img,
.secFour-image img,
.secThree-image img,
.sec-theee-image img,
.secFive-image img,
.secSeven-image img,
.secEight-image img{
  transition: transform .6s var(--pr-ease), filter .6s var(--pr-ease);
  will-change: transform;
}
.secFour-wrpp:hover .secFour-image img,
.sec-two-wrpp:hover .section-two-image img,
.secThree-wrpp:hover .secThree-image img,
.secSeven-wrpp:hover .secSeven-image img,
.secEight-wrpp:hover .secEight-image img,
.secEight-wrpp2:hover .secEight-image2 img,
.sec-one-image:hover img,
.secOne-image2:hover img,
.secOne-smallItem:hover .secOne-smallImg img,
.secFive-image:hover img{
  transform: scale(1.07);
}

/* slanted box-shadow accent (উজ্জ্বল লালের বদলে রিফাইনড) */
.secFour-wrpp{ box-shadow: var(--pr-shadow-sm), inset 0 -3px 0 var(--pr-accent) !important; }

/* কার্ডের ভেতরের টাইটেল প্যাচে একটু প্যাডিং */
.secFour-title,
.sec-two-title,
.secThree-title,
.secSeven-title{ padding: 10px 12px !important; }

/* ওভারলে টাইটেল ফিক্স
   ------------------------------------------------------------
   .sec-one-title = হিরো স্লাইডারের absolute ওভারলে (আসল ছবির ওপরে বসে) —
       এখানে গ্রেডিয়েন্ট সঠিক, কারণ এটা সবসময় একটা ছবির ওপরে।
   .secOne-title2 = ছবির নিচের STATIC টাইটেল (ওভারলে নয়)। এতে আধা-স্বচ্ছ
       গ্রেডিয়েন্ট দিলে পেছনের জিনিস (সাদা লোগো বনাম ফটো) ভেদে আলাদা দেখায়।
       তাই এখানে একটা SOLID অস্বচ্ছ ব্যান্ড — প্রতিটা কার্ডে একরকম। */
.sec-one-title{
  background: linear-gradient(to top, rgba(10,11,14,.92) 0%, rgba(10,11,14,.55) 45%, rgba(10,11,14,0) 100%) !important;
  padding: 26px 14px 12px !important;
}
/* স্লাইডার টাইটেল — সাদা টেক্সটে পরিশীলিত লেয়ার্ড শ্যাডো।
   একটা ধারালো কাছের শ্যাডো (পড়া স্পষ্ট) + একটা নরম গভীর শ্যাডো (প্রিমিয়াম গভীরতা)।
   ফলে ছবি উজ্জ্বল হলেও সাদা টাইটেল সবসময় পরিষ্কার ও সুন্দর দেখাবে। */
.sec-one-title a{
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 4px 16px rgba(0,0,0,.45) !important;
  font-weight: 700;
}

/* secOne-title2 = ছবির নিচের টাইটেল। আগে কালো ব্যান্ড ছিল (ভারী দেখাত)।
   এখন সাদা কার্ডের ওপর গাঢ় টেক্সট — পরিষ্কার, হালকা, প্রিমিয়াম নিউজ-কার্ড স্টাইল।
   টেক্সট রঙ জোর করে গাঢ় করা হলো যাতে সাদা ব্যাকগ্রাউন্ডে স্পষ্ট পড়া যায়। */
.secOne-title2{
  background: transparent !important;
  padding: 12px 14px 3px !important;
  margin: 0 !important;
}
.secOne-title2 a{
  color: #1d2026 !important;
  font-weight: 600;
  line-height: 1.5;
}
.secOne-title2 a:hover{ color: var(--pr-accent) !important; }
/* হেডলাইনের নিচে তারিখ স্ট্রিপ — পরিষ্কার, accent আইকন */
.sec-one-wrpp .cat-meta,
.sec-one-wrpp2 .cat-meta{
  border-top: 0 !important;
  background: transparent;
  padding: 2px 14px 12px !important;
  margin: 0 !important;
}
.sec-one-wrpp .cat-meta a,
.sec-one-wrpp2 .cat-meta a{
  color: #8a8f98 !important;
  font-size: 12px;
  letter-spacing: .2px;
}
.sec-one-wrpp .cat-meta i,
.sec-one-wrpp2 .cat-meta i{ color: var(--pr-accent); }

/* ছবির ওপর হোভারে নিয়ন হলুদের বদলে পরিশীলিত গোল্ড */
.sec-one-title a:hover,
.secFour-title a:hover,
.secOne_smallTitle a:hover,
.tab_hadding a:hover,
.secThree-title a:hover,
.secSeven-title a:hover,
.secFive-title a:hover{
  color: var(--pr-gold) !important;
}

/* কার্ডের বাইরের টাইটেল হোভারে accent */
.sec-two-title a:hover,
.secEight-title a:hover{ color: var(--pr-accent) !important; }

/* "ক্যাটাগরি" ছোট ব্যাজ (sec-small-cat) — উজ্জ্বল লালের বদলে accent + রাউন্ডেড */
.sec-small-cat{
  background: var(--pr-accent) !important;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 4px 12px rgba(190,30,45,.35);
}
.sec-small-cat a{ letter-spacing:.3px; font-weight:600; }

/* মেটা/তারিখ লাইন — পরিশীলিত */
.cat-meta a,
.sec-small-cat a,
.tab_hadding{ letter-spacing:.2px; }
.cat-meta a i,
.cat-meta i{ color: var(--pr-accent); }

/* ভিডিও প্লে আইকন — হোভারে accent */
.video-icon1 i,
.video-icon5 i,
.mediam-icon i,
.small-icon1 i,
.tab-icon i{ transition: .35s var(--pr-ease); }
.sec-one-image:hover .video-icon1 i,
.secFour-image:hover .video-icon5 i,
.section-two-image:hover .mediam-icon i{
  background:#fff !important;
  color: var(--pr-accent) !important;
  border-color:#fff !important;
}

/* ============================================================
   4) SLIDERS / CAROUSELS  —  রিফাইনড ডটস ও অ্যারো
   ============================================================ */

/* ডটস — চিকন পিল, অ্যাকটিভ accent */
.owl-carousel .owl-dots button.owl-dot,
.secFour-slider .owl-dots button,
.codedokan_led_active .owl-dots button,
.homeGallery1 .owl-dots button,
.photoSlider-active .owl-dots button{
  width: 9px; height: 9px;
  border-radius: 50px !important;
  background-color: rgba(21,23,28,.28) !important;
  padding: 0 !important;
  margin: 0 4px !important;
  transition: width .3s var(--pr-ease), background-color .3s var(--pr-ease);
}
.secFour-slider .owl-dots button.active,
.codedokan_led_active .owl-dots button.active,
.homeGallery1 .owl-dots button.active,
.photoSlider-active .owl-dots button.active{
  width: 22px;
  background: var(--pr-accent) !important;
}

/* প্রিভ/নেক্সট অ্যারো — গোলাকার, ব্লার-গ্লাস, হোভারে accent */
.codedokan_led_active button.owl-prev,
.codedokan_led_active button.owl-next,
.homeGallery button.owl-prev,
.homeGallery button.owl-next,
.photoSlider-active button.owl-prev,
.photoSlider-active button.owl-next{
  background: rgba(15,16,20,.55) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important;
  line-height: 46px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.codedokan_led_active:hover button.owl-prev,
.codedokan_led_active:hover button.owl-next,
.homeGallery:hover button.owl-prev,
.homeGallery:hover button.owl-next,
.photoSlider-active:hover button.owl-prev,
.photoSlider-active:hover button.owl-next{
  background: var(--pr-accent) !important;
}

/* মেইন স্লাইডার টাইটেল ওভারলে — একটু গাঢ় ও সফট */
.codedokan_led_active .sec-one-image::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,9,12,.45), transparent 55%);
  pointer-events:none;
}

/* ============================================================
   5) TABS  —  Recent / Popular ইত্যাদি
   ============================================================ */
#recentPopular-tab .nav-link,
#recentPopular-tab .nav-link.active{
  border-radius: var(--pr-radius-sm) var(--pr-radius-sm) 0 0;
  letter-spacing:.4px;
  font-weight:600;
  border-top-width: 3px !important;
}
#recentPopular-tab .nav-link.active{
  border-top-color: var(--pr-accent) !important;
}
.news-titletab .tab-image{
  border-radius: var(--pr-radius-sm);
  overflow:hidden;
  transition: background .3s var(--pr-ease);
  padding: 6px;
}
.news-titletab .tab-image:hover{ background: rgba(21,23,28,.035); }

/* ============================================================
   6) SIDEBAR / LIVE / WIDGETS
   ============================================================ */
.live_title{
  background: linear-gradient(95deg, var(--pr-accent) 0%, var(--pr-accent-2) 100%) !important;
  border-radius: var(--pr-radius-sm) var(--pr-radius-sm) 0 0;
  letter-spacing:.4px;
}
.live_title a{ font-weight:700; }
.live-image{ border-radius: 0 0 var(--pr-radius-sm) var(--pr-radius-sm); overflow:hidden; }

.codedokan_widget h3{
  border-radius: var(--pr-radius-sm);
  letter-spacing:.3px;
  box-shadow: var(--pr-shadow-sm);
}

/* ক্যালেন্ডার / ডেট সার্চ ফর্ম — পরিশীলিত ইনপুট */
.wordpress-date input[type="text"]{
  border:1px solid var(--pr-line-2);
  border-radius: var(--pr-radius-sm);
  padding:10px 12px;
}
.wordpress-date input[type="submit"]{
  background: var(--pr-accent);
  color:#fff; border:0;
  border-radius: var(--pr-radius-sm);
  padding:10px 16px;
  letter-spacing:.4px; font-weight:600;
  transition: background .25s var(--pr-ease);
}
.wordpress-date input[type="submit"]:hover{ background: var(--pr-accent-2); }

/* ============================================================
   7) MENU / HEADER polish
   ============================================================ */
.menu_section{ box-shadow: 0 6px 18px rgba(18,20,26,.10) !important; }
.stellarnav.dark .active,
.stellarnav.dark .current-menu-item{
  background: var(--pr-accent) !important;
}
.stellarnav.dark li a:hover{ background: var(--pr-accent) !important; }

/* ============================================================
   8) FOOTER polish
   ============================================================ */
.footer-menu ul > li > a{
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius: 50px;
  transition: background .25s var(--pr-ease), border-color .25s var(--pr-ease);
}
.footer-menu ul > li > a:hover{
  background: var(--pr-accent) !important;
  border-color: var(--pr-accent) !important;
}

/* Back-to-top — accent */
.scrollToTop i{ background: var(--pr-accent) !important; }
.scrollToTop{ background: var(--pr-accent-2) !important; }

/* ============================================================
   9) RESPONSIVE refinements (মোবাইল)
   ============================================================ */
@media (max-width: 991px){
  .secFour-wrpp:hover,
  .sec-two-wrpp:hover,
  .secThree-wrpp:hover,
  .secSeven-wrpp:hover{ transform: translateY(-3px); }
}
@media (max-width: 575px){
  [class^="codedokan_cat0"],
  [class*=" codedokan_cat0"],
  .codedokan_cat10{ font-size: 16px !important; }
}