/* ============================================================
   FINAL SAMAKAL HEADER & NAVBAR DESIGN (COMPLETE)
   ============================================================ */

/* ------------------------------------------------
   1. MAIN NAVBAR WRAPPER (Lines & Gaps)
   ------------------------------------------------ */
.samakal-nav-wrapper {
    background-color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 1020;
    
    /* উপরের লাইন এবং গ্যাপ */
    border-top: 1px solid #e0e0e0; 
    margin-top: 8px; /* উপরের লাইনের পর গ্যাপ */
    
    /* নিচের ডাবল লাইন এবং গ্যাপ */
    padding-bottom: 5px; /* নিচের লাইনের আগে টেক্সট থেকে গ্যাপ */
    border-bottom: 4px double #008000; /* দুটি গ্রিন লাইন (Double Border) */
    
    transition: all 0.3s ease;
}

/* ------------------------------------------------
   2. STICKY NAVIGATION FIX (Scroll করলে যা হবে)
   ------------------------------------------------ */
/* স্ক্রল করার সময় এই ক্লাসটি JS দিয়ে অ্যাড হবে */
.sticky-nav-desktop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* স্ক্রল অবস্থায় গ্যাপ এবং বর্ডার রিমুভ */
    margin-top: 0 !important; 
    border-top: none !important; 
    border-bottom: 1px solid #ddd !important; /* ডাবল লাইনের বদলে সিম্পল লাইন */
    padding-bottom: 0 !important;
    
    /* শ্যাডো এবং এনিমেশন */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    animation: stickySlide 0.4s ease;
}

/* স্টিকি হওয়ার এনিমেশন */
@keyframes stickySlide {
    from { top: -60px; opacity: 0; }
    to { top: 0; opacity: 1; }
}

/* ------------------------------------------------
   3. MENU ITEMS & ALIGNMENT
   ------------------------------------------------ */
/* কন্টেইনারের প্যাডিং ফিক্স (হেডলাইনের সাথে মিল রাখার জন্য) */
.samakal-navbar-container {
    padding-left: 12px; 
    padding-right: 12px;
}

/* মেনু লিংক স্টাইল */
.samakal-navbar .nav-link {
    color: #000000 !important;
    font-weight: 700; /* একটু মোটা ফন্ট */
    font-size: 15px !important;       
    padding: 8px 12px !important;     
    transition: all 0.2s ease;
}

/* হোভার এফেক্ট */
.samakal-navbar .nav-link:hover,
.samakal-navbar .nav-link.active {
    color: #dc3545 !important; /* লাল রঙ */
}

/* ড্রপডাউন মেনু */
.samakal-navbar .dropdown-menu {
    border-top: 3px solid #008000; /* ড্রপডাউনের উপরে গ্রিন বর্ডার */
    border-radius: 0;
    margin-top: 0;
    border-bottom: 0;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.samakal-navbar .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #dc3545;
}

/* ------------------------------------------------
   4. STYLISH SEARCH BOX (Popup Style)
   ------------------------------------------------ */
.search-dropdown-box {
    position: absolute;
    right: 0;
    top: 100%; /* নেভবারের ঠিক নিচে */
    width: 320px;
    background: #fff;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* সুন্দর শ্যাডো */
    border-top: 3px solid #dc3545; /* সার্চ বক্সের উপরে লাল দাগ */
    z-index: 1500;
    display: none; /* ডিফল্ট হাইড */
    border-radius: 0 0 5px 5px;
}

/* যখন সার্চ ওপেন হবে */
.search-dropdown-box.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------
   5. HEADER TOP AREA (Date, Logo, Socials)
   ------------------------------------------------ */
.header-top-wrapper {
    padding: 10px 0;
    background: #fff;
}

/* তারিখ এবং লোকেশন */
.date-location-text {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* বাটন (Fact Check / English) */
.header-btn {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}
.header-btn:hover {
    background-color: #222;
    color: #fff;
}
/* ============================================================
   UPDATED COLORS & MOBILE FIXES
   ============================================================ */

/* 1. ROUND SOCIAL ICONS (Brand Backgrounds) */
.social-icon-round {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%; /* গোল শেপ */
    color: #fff !important; /* আইকন কালার সাদা */
    display: inline-block;
    transition: all 0.3s ease;
    margin: 0 4px;
    font-size: 14px;
    vertical-align: middle;
}

.social-icon-round:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    opacity: 0.9;
}

/* Brand Colors (Background) */
.social-icon-round.fa-facebook-f { background-color: #1877F2; }
.social-icon-round.fa-x-twitter, 
.social-icon-round.fa-twitter    { background-color: #000000; }
.social-icon-round.fa-youtube    { background-color: #FF0000; }
.social-icon-round.fa-instagram  { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-icon-round.fa-linkedin-in{ background-color: #0077B5; }
.social-icon-round.fa-whatsapp   { background-color: #25D366; }


/* 2. GREEN BUTTONS (Fact Check & English) */
.header-btn {
    background-color: #008000 !important; /* গ্রিন ব্যাকগ্রাউন্ড */
    color: #ffffff !important; /* সাদা টেক্সট */
    border: 1px solid #006a4e;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 15px;
    border-radius: 2px; /* সামান্য কার্ভ */
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.header-btn:hover {
    background-color: #006400 !important; /* হোভারে ডার্ক গ্রিন */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* 3. MOBILE FIXED HEADER FIX */
@media (max-width: 991px) {
    .sticky-top-mobile {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1040;
        background-color: #ffffff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-bottom: 1px solid #ddd;
        /* হাইট ফিক্সড করে দেওয়া হলো যাতে ক্যালকুলেশন সহজ হয় */
        min-height: 70px; 
    }

    /* বডি কন্টেন্ট নিচে নামিয়ে আনা (আগের চেয়ে বাড়ানো হয়েছে) */
    body {
        padding-top: 65px !important; /* 60px থেকে বাড়িয়ে 90px করা হলো */
    }
    
    /* যদি নির্দিষ্ট কোনো সেকশন ঢুকে যায়, তার জন্য */
    .main-content {
        margin-top: -5px;
    }
}
/* সোশ্যাল আইকন (অরজিনাল কালার) */
.social-icon-original {
    font-size: 18px;
    margin: 0 6px;
    transition: transform 0.2s ease;
    display: inline-block;
}
.social-icon-original:hover { transform: scale(1.2); }

/* ব্র্যান্ড কালার */
.social-icon-original.fa-facebook-f { color: #1877F2; }
.social-icon-original.fa-twitter, .social-icon-original.fa-x-twitter { color: #000000; }
.social-icon-original.fa-youtube { color: #FF0000; }
.social-icon-original.fa-instagram { color: #E1306C; }
.social-icon-original.fa-linkedin-in { color: #0077B5; }
.social-icon-original.fa-whatsapp { color: #25D366; }

/* ------------------------------------------------
   6. MOBILE RESPONSIVE TWEAKS
   ------------------------------------------------ */
@media (max-width: 991px) {
    /* মোবাইলে ডেস্কটপ হেডার হাইড */
    .header-top-wrapper, .samakal-nav-wrapper { 
        display: none !important; 
    }
    
    /* মোবাইল লোগো ফিক্স */
    .sticky-top-mobile img {
        max-height: 40px !important;
    }
}

/* ============================================================
   RESPONSIVE FIX FOR LAPTOPS & TABLETS (1024px - 1350px)
   ============================================================ */

/* ============================================================
   ADVANCED RESPONSIVE FIXES (SEPARATE BREAKPOINTS)
   ============================================================ */

/* ------------------------------------------------------------
   CASE 1: 1024px Screen (Nest Hub, Tablets) - THE PROBLEM AREA
   Range: 992px to 1199px
   ------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1199px) {

   /* ১. মেনু বার */
    .samakal-navbar .nav-link {
        font-size: 14px !important;      /* ১০২৪ এর চেয়ে একটু বড় */
        padding: 8px 5px !important;     /* প্যাডিং মিডিয়াম */
        font-weight: 600;
    }
    
    /* মেনু কন্টেইনার */
    .samakal-navbar-container {
        padding: 0 10px !important;
    }

    /* ২. লোগো এরিয়া */
    .header-top-wrapper img {
        max-height: 60px !important;     /* লোগো মিডিয়াম সাইজ */
    }

    /* ৩. বাম পাশের সময় */
    #realTimeDisplay { font-size: 17px !important; }
    #fullDateDisplay { font-size: 11px !important; }

    /* ৪. ডান পাশের বাটন ও সোশ্যাল */
    .header-btn {
        font-size: 9px !important;
        padding: 4px 10px !important;
    }
    .social-icon-round {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        font-size: 13px !important;
        margin: 0 3px !important;
    }
}


/* ------------------------------------------------------------
   CASE 2: 1280px Screen (Nest Hub Max, Small Laptops)
   Range: 1200px to 1399px
   ------------------------------------------------------------ */
@media (min-width: 1200px) and (max-width: 1399px) {

    /* ১. মেনু বার */
    .samakal-navbar .nav-link {
        font-size: 15px !important;      /* ১০২৪ এর চেয়ে একটু বড় */
        padding: 8px 7px !important;     /* প্যাডিং মিডিয়াম */
        font-weight: 600;
    }
    
    /* মেনু কন্টেইনার */
    .samakal-navbar-container {
        padding: 0 10px !important;
    }

    /* ২. লোগো এরিয়া */
    .header-top-wrapper img {
        max-height: 60px !important;     /* লোগো মিডিয়াম সাইজ */
    }

    /* ৩. বাম পাশের সময় */
    #realTimeDisplay { font-size: 17px !important; }
    #fullDateDisplay { font-size: 11px !important; }

    /* ৪. ডান পাশের বাটন ও সোশ্যাল */
    .header-btn {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    .social-icon-round {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        font-size: 13px !important;
        margin: 0 3px !important;
    }
}
/* ============================================================
   CATEGORY CARDS SECTION DESIGN (Scoped under .category-cards)
   ============================================================ */

/* ১. মেইন কার্ড কন্টেইনার */
.category-grid.cat-card-box {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #f0f0f0; /* খুব হালকা বর্ডার */
}

/* কার্ডে মাউস নিলে একটু উপরে উঠবে */
.category-grid.cat-card-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(220, 53, 69, 0.15);
}

/* ২. হেডার ডিজাইন */
.category-grid.cat-card-header {
    background: #ffffff;
    padding: 15px 20px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* টাইটেলের নিচে লাল দাগ */
.category-grid.cat-card-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20px;
    width: 60px;
    height: 2px;
    background-color: #dc3545;
}

.category-grid.cat-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #222;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 'আরও' বাটন */
.category-grid.cat-card-header a {
    font-size: 12px;
    font-weight: 600;
    background: #f8f9fa;
    padding: 5px 12px;
    border-radius: 20px;
    color: #555 !important;
    transition: 0.3s;
    text-decoration: none;
}

.category-grid.cat-card-header a:hover {
    background: #dc3545;
    color: #fff !important;
}

/* ৩. মেইন নিউজ (বড় ছবি) */
.category-grid.cat-main-news {
    padding: 20px;
}

.category-grid.cat-main-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: transform 0.5s ease;
}

/* ইমেজে জুম এফেক্ট */
.category-grid.cat-card-box:hover .cat-main-img {
    transform: scale(1.05);
}

.category-grid.cat-main-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 8px;
}

.category-grid.cat-main-title a {
    color: #111;
    text-decoration: none;
    transition: 0.3s;
}

.category-grid.cat-main-title a:hover {
    color: #dc3545;
}

/* ৪. নিউজ লিস্ট (ছোট খবর) */
.category-grid.cat-news-list {
    padding: 0 20px 20px 20px;
}

.category-grid.cat-list-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px dashed #e0e0e0;
    align-items: center;
    transition: 0.3s;
}

.category-grid.cat-list-item:last-child {
    border-bottom: none;
}

/* লিস্ট আইটেম হোভার এফেক্ট */
.category-grid.cat-list-item:hover {
    background-color: #fffafa;
    padding-left: 8px; /* একটু ডানে সরবে */
    border-radius: 6px;
}

.category-grid.cat-list-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* গোল ছবি */
    margin-right: 15px;
    border: 2px solid #f1f1f1;
    flex-shrink: 0;
}

.category-grid.cat-list-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: #444;
}

.category-grid.cat-list-title a {
    color: #444;
    text-decoration: none;
    transition: 0.3s;
}

.category-grid.cat-list-title a:hover {
    color: #dc3545;
}

/* তারিখ */
.category-grid.cat-date {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    display: block;
    margin-top: 4px;
}
/* ১. সব ব্রাউজারের জন্য স্ক্রলবার সম্পূর্ণ হাইড করা (Global Fix) */
* {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE & Edge */
}

/* Chrome, Safari, Opera এর জন্য গ্লোবাল স্ক্রলবার হাইড */
::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    background: transparent !important;
}

/* ২. HTML & BODY সেটিংস (White Gap & Sticky Fix) */
html {
    /* Sticky মেনু ঠিক রাখতে এবং সাদা দাগ দূর করতে */
    overflow-x: hidden !important; 
    height: 100%;
    width: 100%;
    /* বডি কালারের সাথে মিলিয়ে ব্যাকগ্রাউন্ড দেওয়া হলো যাতে গ্যাপ থাকলেও বোঝা না যায় */
    background-color: #f5f5f5; 
}

body {
    font-family: 'Hind Siliguri', sans-serif;
    background-color: #f5f5f5;
    font-size: 18px;
    
    /* হরিজন্টাল স্ক্রল বন্ধ, ভার্টিক্যাল অটো */
    overflow-x: hidden !important;
    overflow-y: auto !important; 
    
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
a { text-decoration: none; color: inherit; }

/* 2. SOCIAL ICONS (Brand Colors) */
.social-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    margin-left: 6px;
    background: #eee;
    color: #fff;
    transition: all 0.3s ease;
}
.social-icon i { font-size: 15px; }

.social-icon.fb { background-color: #3b5998; }
.social-icon.fb:hover { background-color: #2d4373; transform: scale(1.1); }

.social-icon.yt { background-color: #FF0000; }
.social-icon.yt:hover { background-color: #cc0000; transform: scale(1.1); }

.social-icon.tw { background-color: #000000; }
.social-icon.tw:hover { background-color: #333; transform: scale(1.1); }

.social-icon.insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-icon.insta:hover { transform: scale(1.1); }

.social-icon.in { background-color: #0077b5; }
.social-icon.in:hover { background-color: #005582; transform: scale(1.1); }

/* 3. TICKER (Green Bar, Red Title) */
/* Ticker Section Updated Height */
.ticker-wrapper { 
    height: 60px; /* Increased height from 45px */
    background-color: green !important;
    overflow: hidden;
}

.ticker-title {
    background-color: #f42a41 !important;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px; /* Text slightly bigger */
    position: relative;
    z-index: 10;
}

/* Align images nicely in bigger height */
.ticker-item {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 60px; /* Match wrapper height */
}
/* Triangle effect after title (Optional visual polish) */
.ticker-title::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    border-top: 45px solid #f42a41;
    border-right: 20px solid transparent;
}
.ticker-content {
    font-size: 18px;
    display: flex;
    align-items: center;
}

/* 4. NAVBAR (Red & Boxed) */
.custom-navbar {
    background-color: #f42a41; /* Red */
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.custom-navbar .nav-link {
    color: white !important;
    font-weight: 600;
    padding: 12px 18px;
    border-right: 1px solid rgba(255,255,255,0.2);
    font-size: 17px;
    transition: 0.3s;
}
.custom-navbar .nav-link:hover {
    background-color: #b71c1c; /* Darker Red */
}
.custom-navbar .nav-link.active {
    background-color: #b71c1c;
}

/* Auto Dropdown on Hover (Desktop) */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu { 
        display: none; 
        margin-top: 0; 
        border-radius: 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .navbar .nav-item:hover .dropdown-menu { 
        display: block; 
    }
}
.dropdown-item:hover {
    background-color: #f42a41;
    color: white;
}

/* 5. CONTENT & CARDS */
.hover-red:hover {
    color: green !important;
    transition: 0.3s;
}
.title-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
/* Image Zoom Effect on Hover */
.zoom-effect {
    transition: transform 0.5s ease;
}
.card:hover .zoom-effect {
    transform: scale(1.05);
}

/* Slider Caption */
.news-caption-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.5) 70%, transparent 100%);
    padding: 20px;
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: left;
}

/* 6. RIGHT SIDEBAR TABS (Flag Colors) */
.custom-tab-btn {
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    transition: 0.3s;
}

/* Green Tab Active */
.custom-tab-btn.tab-green.active {
    background-color: green !important;
    color: white !important;
    border-color: green;
}
/* Red Tab Active */
.custom-tab-btn.tab-red.active {
    background-color: #f42a41 !important;
    color: white !important;
    border-color: #f42a41;
}

.bg-success{
    background-color: green !important;
}

/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #f42a41; 
}

/* 7. ANIMATED AD */
.animated-ad-box {
    display: inline-block;
}
.animated-ad-box img {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    animation: zoom-pulse 2s infinite ease-in-out;
    border: 4px solid #fff;
}
@keyframes zoom-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Mobile Tweaks */
@media (max-width: 991px) {
    .ticker-title::after { display: none; }
}

/* Ticker Image Alignment */
.ticker-item {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.ticker-item img {
    object-fit: cover;
}

/* Sidebar News Items Alignment */
.news-item img {
    object-fit: cover;
    border: 1px solid #e0e0e0;
}
.news-item a {
    /* Ensure text doesn't overflow */
    display: block;
}

/* NEW SECTION STYLES */

/* Section Header Design (Green box + Red line) */
.section-header-wrapper {
    position: relative;
    border-bottom: 3px solid #dc3545; /* The Red Line */
    line-height: 1;
}

.section-title {
    position: relative;
    top: 3px; /* Pushes the green box down to cover the line slightly or sit on it */
    font-weight: 700;
}

/* Featured News Text Justify */
.text-justify {
    text-align: justify;
    line-height: 1.6;
    font-size: 15px;
}

/* Facebook Wrapper */
.facebook-wrapper {
    overflow: hidden;
    display: flex;             /* Enables centering */
    justify-content: center;
}

/* Opinion Cards */
.opinion-list .card {
    transition: 0.3s;
}
.opinion-list .card:hover {
    background-color: #e9ecef !important;
}

/* Ensure images in the middle column don't stretch weirdly */
.middle-col-img {
    object-fit: cover;
    height: 100%;
}

/* ENTERTAINMENT SECTION STYLES */

/* Text Overlay Background */
.overlay-text {
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black bg */
    transition: 0.3s;
}

/* Hover Effect for Overlay Cards */
.overlay-card {
    overflow: hidden;
    position: relative;
}

.overlay-card img {
    transition: transform 0.5s ease;
    width: 100%;
    object-fit: cover;
}

.overlay-card:hover img {
    transform: scale(1.05); /* Zoom effect on hover */
}

.overlay-card:hover .overlay-text {
    background: rgba(0, 0, 0, 0.85); /* Darker on hover */
}

/* Main Feature Title Size */
.entertainment-section h4 {
    font-size: 1.4rem;
    line-height: 1.4;
}

/* LIFESTYLE SECTION STYLES */

/* The Red Bottom Border for each card */
.lifestyle-card {
    border-bottom: 2px solid #dc3545 !important; /* Red line at bottom */
    border-radius: 0;
}

/* Camera Icon Styling (Black Box with White Icon) */
.camera-icon-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #222; /* Dark background */
    color: #fff;
    width: 28px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 12px;
}

/* Hover Effect */
.lifestyle-card:hover h6 {
    color: #dc3545; /* Red text on hover */
    transition: 0.3s;
}
.lifestyle-card img {
    transition: transform 0.3s ease;
}
.lifestyle-card:hover img {
    opacity: 0.9;
}
/* SHARADESH SECTION STYLES */

/* Bottom Red Border for Cards */
.sharadesh-card {
    border-bottom: 1px solid #ddd; /* Light gray initially */
    padding-bottom: 10px;
    margin-bottom: 10px;
    background-color: transparent !important; /* Matches parent bg */
}

/* Specific style to match screenshot: Red underline on the card content/wrapper?
   Looking at the image, there is a distinct line below the text.
   Let's apply a border bottom to the card itself as implemented above, 
   but ensure it looks like the screenshot (light gray).
*/

/* Camera Icon Styling (Reusing existing or refining) */
.camera-icon-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #222;
    color: #fff;
    width: 28px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 12px;
}

.camera-icon-box.small-icon {
    width: 24px;
    height: 20px;
    font-size: 10px;
    bottom: 5px;
    left: 5px;
}

/* Form Styles */
.form-select {
    border-color: #ddd;
    font-size: 13px;
}
.form-label {
    margin-bottom: 2px;
    color: #555;
}

/* PHOTO GALLERY CUSTOM STYLES */

/* Slider Indicators (Dots at bottom) */
.custom-indicators {
    margin-bottom: -15px; /* Push down slightly if needed, or keep 0 */
}
.custom-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background-color: #ccc !important; /* Inactive color (Gray) */
    opacity: 1 !important;
    margin: 0 4px !important;
    border: none !important;
}
.custom-indicators button.active {
    background-color: #0d6efd !important; /* Active color (Blue) per screenshot */
}

/* Camera Icon Position fix for Slider */
.carousel-item .camera-icon-box {
    bottom: 50px; /* Position above the caption area */
    left: 20px;
    z-index: 10;
}

/* Ensure images cover area well */
.carousel-item img {
    object-fit: cover;
    height: 100%;
}

/* VIDEO GALLERY HEADER & CARDS */

/* Navigation Buttons Style */
.video-nav-buttons .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #ddd;
    background: white;
    color: #333;
}
.video-nav-buttons .btn:hover {
    background-color: #dc3545; /* Red on hover */
    color: white;
    border-color: #dc3545;
}

/* Video Card Styling */
.video-card-modern {
    height: 260px; /* Fixed height for consistency */
    transition: transform 0.3s ease;
}
.video-card-modern:hover {
    transform: translateY(-5px);
}

/* Gradient Overlay for Text Visibility */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.95) 100%);
    z-index: 2;
}

/* Play Button Styling */
.play-trigger i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.3s ease;
    border: 2px solid white; /* White ring */
}

.video-card-modern:hover .play-trigger i {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
}

/* FOOTER SOCIAL ICONS (Square Style) */
.footer-social-icons .social-sq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: white;
    margin-right: 5px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 2px; /* Slight rounded corners */
}
.social-sq.fb { background-color: #3b5998; }
.social-sq.yt { background-color: #ff0000; }
.social-sq.tw { background-color: #1da1f2; }
.social-sq.insta { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}
.social-sq.in { background-color: #0077b5; }

/* Contact List Icons */
.contact-list i {
    width: 20px;
    text-align: center;
}

/* Scroll To Top Button */
#scrollToTopBtn {
    width: 40px;
    height: 40px;
    background-color: #222;
    transition: 0.3s;
}
#scrollToTopBtn:hover {
    background-color: #dc3545; /* Red on hover */
}

/* MOBILE OFFCANVAS STYLES */
/* MOBILE MENU SOCIAL ICONS (Detailed Style) */

.mobile-social-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Smooth rounded corners like iOS icons */
    color: white !important;
    font-size: 20px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mobile-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Specific Brand Colors for Mobile Menu */
.mobile-social-btn.fb { 
    background-color: #1877F2; /* Facebook Bright Blue */
}

.mobile-social-btn.yt { 
    background-color: #FF0000; /* YouTube Red */
}

.mobile-social-btn.tw { 
    background-color: #00ACEE; /* Twitter Cyan/Light Blue (As per llCapture.PNG) */
}

.mobile-social-btn.insta { 
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
}

.mobile-social-btn.in { 
    background-color: #0077b5; /* LinkedIn Blue */
}
/* List Item Styles */
.mobile-nav-list .list-group-item {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 20px;
    border-color: #f1f1f1;
    color: #333;
    transition: all 0.2s ease-in-out;
}

/* Hover Effect (Background Change) */
.mobile-nav-list .list-group-item:hover,
.mobile-nav-list .list-group-item:focus {
    background-color: #ffe6e6; /* Light Red tint */
    color: #dc3545; /* Red Text */
    border-left: 4px solid #dc3545; /* Red left border indicator */
    padding-left: 16px; /* Adjust padding for border */
}

/* Dropdown/Accordion Styles */
.mobile-nav-list .accordion-item {
    border: none;
}
.mobile-nav-list .collapse .list-group-item {
    font-size: 14px;
    color: #555;
    background-color: #f8f9fa;
}
.mobile-nav-list .collapse .list-group-item:hover {
    background-color: #e9ecef;
    color: #dc3545;
}

/* Scrollbar styling for sidebar */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* Social Icons in Sidebar (Reusing your square styles) */
.offcanvas-footer .social-sq {
    width: 35px;
    height: 35px;
    font-size: 16px;
    border-radius: 4px;
}

/* Animation for Search Box Slide */
#mobileSearchBox {
    transition: all 0.3s ease;
}

/* CATEGORY PAGE STYLES */

/* Card Image Zoom Effect */
.category-card .zoom-img {
    transition: transform 0.5s ease;
}
.category-card:hover .zoom-img {
    transform: scale(1.05);
}

/* Category Title */
.category-card .card-title {
    font-size: 18px; /* Matching screenshot text size */
    line-height: 1.4;
}

/* Badges Styling */
.badge {
    font-size: 12px;
    font-weight: 500;
}

/* Pagination Active State */
.page-link.bg-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* SINGLE PAGE STYLES */

/* Social Share Buttons (Square with Color) */
.share-btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    border-radius: 3px;
    font-size: 14px;
    transition: opacity 0.3s;
}
.share-btn:hover { opacity: 0.8; }

.share-btn.fb { background-color: #3b5998; }
.share-btn.x-tw { background-color: #000; }
.share-btn.pin { background-color: #bd081c; }
.share-btn.in { background-color: #0077b5; }
.share-btn.wa { background-color: #25D366; }
.share-btn.mail { background-color: #888; }
.share-btn.print { background-color: #333; }

/* Article Content */
.article-content {
    font-size: 18px; /* Default readable size */
    line-height: 1.8;
    color: #222;
}
.article-content p {
    margin-bottom: 20px;
}

/* Hover Effect for Nav Links */
.hover-bg-light:hover {
    background-color: #f8f9fa !important;
}

/* Reaction Buttons */
.reaction-section .btn-white:hover {
    background-color: #f1f1f1;
    transform: scale(1.05);
}

/* --- FIXED NAVIGATION (STICKY) --- */

/* 1. Mobile: Fix the Header (Logo + Toggle Button) */
/* Only applies to screens smaller than 992px */
@media (max-width: 991px) {
    .sticky-top-mobile {
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: 0;
        z-index: 1030;
        width: 100%;
        /* Ensure background is white so content doesn't show through */
        background-color: white !important; 
        border-bottom: 1px solid #e0e0e0;
    }
}

/* 2. Desktop: Fix the Red Navigation Bar */
/* Only applies to screens 992px and larger */
@media (min-width: 992px) {
    .sticky-nav-desktop {
        position: -webkit-sticky; /* Safari support */
        position: sticky;
        top: 0;
        z-index: 1030;
        /* Matches body background to mask scrolling content behind the sides */
       /* background-color: #f5f5f5; */
        padding-bottom: 1px; /* Prevents minor visual gaps */
    }
}

* --- GLOBAL IMAGE ZOOM EFFECT --- */

/* 1. কনটেইনারের বাইরে ছবি যেন না যায় সেজন্য overflow hidden */
.card, 
.news-item, 
.carousel-item, 
.sharadesh-card, 
.lifestyle-card, 
.video-card-modern,
.overlay-card {
    overflow: hidden; 
}

/* 2. ছবির ট্রানজিশন সেট করা */
.card img, 
.news-item img, 
.carousel-item img, 
.sharadesh-card img, 
.lifestyle-card img, 
.video-card-modern img,
.overlay-card img {
    transition: transform 0.5s ease;
    display: block; /* ইমেজ গ্যাপ দূর করতে */
}

/* 3. হোভার করলে জুম হবে */
.card:hover img, 
.news-item:hover img, 
.carousel-item:hover img, 
.sharadesh-card:hover img, 
.lifestyle-card:hover img, 
.video-card-modern:hover img,
.overlay-card:hover img {
    transform: scale(1.08); /* 1.05 থেকে একটু বাড়িয়ে ১.০৮ করা হলো */
}

/* --- RED SUBTITLE STYLE --- */
.red-subtitle {
    display: block;
    color: #dc3545; /* লাল রং */
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

/* News Subtitle Style */
.news-subtitle {
    display: block;          /* এটি নতুন লাইনে আসবে */
    color: #dc3545;          /* লাল রং */
    font-size: 13px;         /* ছোট ফন্ট সাইজ */
    font-weight: 600;        /* একটু বোল্ড */
    margin-bottom: 2px;      /* টাইটেল থেকে সামান্য দূরত্ব */
    line-height: 1.2;
}

/* --- New 4-Column Section CSS --- */
.extra-cat-main-img {
    height: 180px; /* মেইন ইমেজের হাইট ফিক্সড */
    object-fit: cover;
    width: 100%;
}

.extra-cat-list-img {
    width: 70px; /* ছোট থাম্বনেইল */
    height: 50px;
    object-fit: cover;
}


/* ================================================== */
/* Laptop/Medium Screen Menu Fix (1024px - 1366px)  */
/* ================================================== */

@media (min-width: 992px) and (max-width: 1400px) {
    /* মেনুর আইটেমগুলোর প্যাডিং এবং ফন্ট কমানো হলো */
    .custom-navbar .nav-link {
        padding: 12px 8px !important; /* ডানে-বামে প্যাডিং ১৮ থেকে কমিয়ে ৮ করা হলো */
        font-size: 14px !important;   /* ফন্ট ১৭ থেকে কমিয়ে ১৪ করা হলো */
        border-right: 1px solid rgba(255,255,255,0.1); /* বর্ডার হালকা করা হলো */
    }

    /* ড্রপডাউন আইকন বা টেক্সট যাতে ভেঙে না যায় */
    .custom-navbar .nav-link i {
        font-size: 13px; 
    }
}

/* ============================================================
   FIX: LAW, EXCLUSIVE & HEALTH - 100% EQUAL HEIGHT
   ============================================================ */

/* ১. মেইন রো (Row) ফিক্স */
.category-grid .row {
    display: flex;          /* ফ্লেক্সবক্স চালু করা */
    flex-wrap: wrap;        /* রেসপন্সিভ ব্রেকিং */
    background-color: #f8f9fa; /* গ্যাপের কালার ঠিক রাখতে */
}

/* ২. কলামগুলোকে (col-lg-4) কার্ড হিসেবে রূপান্তর করা */
/* এটিই মূল ফিক্স: কলামটিকেই আমরা সাদা কার্ড বানিয়ে ফেলছি */
.category-grid .row > .col-lg-4 {
    display: flex;
    flex-direction: column; /* কন্টেন্ট উপর থেকে নিচে */
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    
    /* টেকনিক: কলামগুলোর মাঝের গ্যাপ তৈরি করতে আমরা বর্ডার ব্যবহার করছি */
    border: 10px solid #f8f9fa; /* সেকশনের ব্যাকগ্রাউন্ড কালারের সমান বর্ডার */
    border-radius: 15px;       
    background-clip: padding-box; /* বর্ডার এবং ব্যাকগ্রাউন্ডের মিশেল ঠিক রাখতে */
    
    /* কন্টেন্ট যেন কার্ডের কিনারে লেগে না যায় */
    padding: 15px !important; 
    
    /* হাইট ফিক্স */
    height: auto; 
    min-height: 100%; /* এটি নিশ্চিত করে ছোট কার্ডগুলোও বড় কার্ডের সমান লম্বা হবে */
    
    /* শ্যাডো */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* ৩. হেডারের ডিজাইন অক্ষত রাখা */
/* যেহেতু কলামে প্যাডিং দিয়েছি, হেডার অটোমেটিক সুন্দরভাবে ভেতরে থাকবে */
.category-grid .section-header-wrapper {
    width: 100%;
    margin-bottom: 15px;
}

/* ৪. মেইন কার্ড (বড় ছবি) ফিক্স */
.category-grid .col-lg-4 > .card {
    box-shadow: none !important; /* ভেতরের শ্যাডো রিমুভ */
    border: none !important;
    background: transparent !important;
    flex-shrink: 0; 
    margin-bottom: 15px !important;
}

/* ৫. নিউজ লিস্ট (নিচের অংশ) ফিক্স */
/* ফ্লেক্স গ্রো ব্যবহার করে এই অংশটি বাকি খালি জায়গা পূরণ করবে */
.category-grid .col-lg-4 > .d-flex.flex-column {
    flex-grow: 1; /* এটি কার্ডের নিচ পর্যন্ত জায়গা দখল করবে */
    justify-content: flex-start;
}

/* ৬. মেইন ইমেজের সাইজ ফিক্স */
.category-grid .col-lg-4 .card-img-top {
    height: 200px;
    object-fit: cover;
    width: 100%;
    border-radius: 5px;
}

/* ৭. হোভার এফেক্ট */
.category-grid .row > .col-lg-4:hover {
    border-color: #ffffff; /* বর্ডার সাদা হয়ে কার্ডটিকে বড় দেখাবে */
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(220, 53, 69, 0.15);
    transition: all 0.3s ease;
    z-index: 2; /* হোভার করলে কার্ডটি উপরে আসবে */
}

/* ============================================================
   MORE CATEGORIES SECTION (4 Columns - Share Market, Jobs etc.)
   ============================================================ */

/* ১. রো (Row) সেটআপ */
.more-categories-section .row {
    display: flex;
    flex-wrap: wrap;
    background-color: #f8f9fa; /* সেকশনের ব্যাকগ্রাউন্ড কালার */
}

/* ২. কলামগুলোকে কার্ড হিসেবে রূপান্তর (Equal Height Fix) */
.more-categories-section .col-lg-3, 
.more-categories-section .col-md-6 {
    display: flex;
    flex-direction: column;
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    
    /* কলামগুলোর মাঝে গ্যাপ ঠিক রাখার টেকনিক */
    border: 8px solid #f8f9fa; /* বাইরের ব্যাকগ্রাউন্ডের সমান বর্ডার */
    border-radius: 12px;
    background-clip: padding-box;
    
    /* প্যাডিং ও হাইট */
    padding: 12px !important;
    min-height: 100%; /* সব কার্ড সমান লম্বা হবে */
    
    /* শ্যাডো */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

/* ৩. হোভার এফেক্ট */
.more-categories-section .col-lg-3:hover, 
.more-categories-section .col-md-6:hover {
    transform: translateY(-5px);
    border-color: #ffffff; /* বর্ডার সাদা হয়ে কার্ড ফোকাস হবে */
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.1); /* হালকা লাল আভা */
    z-index: 2;
}

/* ৪. হেডার ডিজাইন (অক্ষত রাখা হয়েছে) */
.more-categories-section .section-header-wrapper {
    width: 100%;
    margin-bottom: 12px;
    /* আপনার ব্লেড ফাইলের ইনলাইন স্টাইলই এখানে কাজ করবে */
}

/* ৫. মেইন নিউজ কার্ড (রিসেট) */
.more-categories-section .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* ৬. মেইন ইমেজ সাইজ ফিক্স (বড় ছবি) */
.more-categories-section .extra-cat-main-img {
    height: 160px; /* হাইট ফিক্সড */
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ৭. নিউজ লিস্ট কন্টেইনার (বাকি জায়গা পূরণ করবে) */
.more-categories-section .d-flex.flex-column {
    flex-grow: 1; /* কার্ডের নিচ পর্যন্ত ব্যাকগ্রাউন্ড টেনে নামাবে */
    justify-content: flex-start;
    margin-top: 10px;
    border-top: 1px dashed #eee; /* মেইন নিউজ এবং লিস্টের মাঝে দাগ */
    padding-top: 10px;
}

/* ৮. ছোট লিস্ট আইটেম ডিজাইন */
.more-categories-section .d-flex.flex-column .card {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.more-categories-section .d-flex.flex-column .card:last-child {
    border-bottom: none !important;
}

/* ৯. ছোট ইমেজ সাইজ ফিক্স (থাম্বনেইল) */
.more-categories-section .extra-cat-list-img {
    height: 50px;
    width: 70px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #eee;
}

/* ১০. টাইটেল এবং তারিখ */
.more-categories-section .card-title a,
.more-categories-section h6 a {
    color: #333;
    transition: 0.2s;
    line-height: 1.4;
}

.more-categories-section a:hover {
    color: #dc3545; /* হোভারে লাল */
}

.more-categories-section .bangla-date {
    font-size: 11px;
    color: #28a745; /* সবুজ তারিখ */
    display: block;
    margin-top: 3px;
}

/* ============================================================
   MIXED CATEGORY SECTION (Social, Business, Science etc.)
   ============================================================ */

/* ১. রো (Row) সেটআপ */
.mixed-category-section .row {
    display: flex;
    flex-wrap: wrap;
    background-color: #f8f9fa; /* সেকশনের ব্যাকগ্রাউন্ড */
}

/* ২. কলামগুলোকে কার্ড হিসেবে রূপান্তর (Equal Height Fix) */
.mixed-category-section .col-lg-3, 
.mixed-category-section .col-md-6 {
    display: flex;
    flex-direction: column;
    background-color: #ffffff; /* সাদা ব্যাকগ্রাউন্ড */
    
    /* কলামগুলোর মাঝে গ্যাপ ঠিক রাখার টেকনিক */
    border: 8px solid #f8f9fa; 
    border-radius: 12px;
    background-clip: padding-box;
    
    /* প্যাডিং ও হাইট */
    padding: 12px !important;
    min-height: 100%; /* সব কার্ড সমান লম্বা হবে */
    
    /* শ্যাডো */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

/* ৩. হোভার এফেক্ট */
.mixed-category-section .col-lg-3:hover, 
.mixed-category-section .col-md-6:hover {
    transform: translateY(-5px);
    border-color: #ffffff; /* হোভার ফোকাস */
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.1);
    z-index: 2;
}

/* ৪. হেডার ডিজাইন (অক্ষত রাখা হয়েছে) */
.mixed-category-section .section-header-wrapper {
    width: 100%;
    margin-bottom: 12px;
}

/* ৫. মেইন নিউজ কার্ড (রিসেট) */
.mixed-category-section .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* ৬. মেইন ইমেজ সাইজ ফিক্স */
.mixed-category-section .extra-cat-main-img {
    height: 160px; /* হাইট ফিক্সড */
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ৭. নিউজ লিস্ট কন্টেইনার (বাকি জায়গা পূরণ করবে) */
.mixed-category-section .d-flex.flex-column {
    flex-grow: 1; /* কার্ডের নিচ পর্যন্ত নামাবে */
    justify-content: flex-start;
    margin-top: 10px;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

/* ৮. ছোট লিস্ট আইটেম ডিজাইন */
.mixed-category-section .d-flex.flex-column .card {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.mixed-category-section .d-flex.flex-column .card:last-child {
    border-bottom: none !important;
}

/* ৯. ছোট ইমেজ সাইজ ফিক্স */
.mixed-category-section .extra-cat-list-img {
    height: 50px;
    width: 70px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #eee;
}

/* ১০. টাইটেল এবং তারিখ */
.mixed-category-section .card-title a,
.mixed-category-section h6 a {
    color: #333;
    transition: 0.2s;
    line-height: 1.4;
}

.mixed-category-section a:hover {
    color: #dc3545;
}

.mixed-category-section .bangla-date {
    font-size: 11px;
    color: #28a745;
    display: block;
    margin-top: 3px;
}