/* Fuad Custom Meta Card Style */
.fuad-meta-container {
    margin-top: 8px;
    margin-bottom: 12px;
    display: flex;
    
    /* আইটেমগুলোকে এক লাইনে আনার জন্য */
    flex-direction: row; 
    
    /* পাশাপাশি থাকা আইটেমগুলোর মধ্যে ব্যবধান */
    gap: 15px;
    
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    
    /* ছোট স্ক্রিনে আইটেম না ভাঙার জন্য */
    flex-wrap: nowrap; 
}

/* প্রতিটি মেটা আইটেম */
.fuad-meta-container .meta-item {
    display: flex;
    align-items: center;
    
    /* ভেতরের আইকন ও টেক্সটের মধ্যে ব্যবধান */
    gap: 8px;
    
    font-size: 15px;
    font-weight: 600;
    /* টেক্সটের কালার পরিবর্তন করা হলো */
    color: #777; !important; 
}

/* আইকন ও লিংকের এক রঙ */
.fuad-meta-container .meta-item i {
    /* আইকনের কালার পরিবর্তন করা হলো */
    color: #777; !important; 
    font-size: 15px;
}

/* লিংক কালার পরিবর্তন করা হলো */
.fuad-meta-container .meta-item a {
    /* লিংকের কালার পরিবর্তন করা হলো */
    color: #777; !important; 
    font-weight: 600;
    text-decoration: none;
}

.fuad-meta-container .meta-item a:hover {
    text-decoration: underline;
}
/* ---------------------------------------------------------------- */
/* মোবাইল স্ক্রিনের জন্য Media Query                */
/* ---------------------------------------------------------------- */

/* 768 পিক্সেল বা তার চেয়ে ছোট স্ক্রিনের জন্য (সাধারণত ট্যাবলেটের নিচে) */
@media (max-width: 768px) {
    .fuad-meta-container {
        /* মোবাইলে আইটেমগুলোকে নিচে নিচে আনার জন্য (column) */
        flex-direction: column; 
        
        /* নিচে নিচে থাকার কারণে আনুভূমিক ব্যবধান লাগবে না,
           উল্লম্ব ব্যবধান (Vertical Gap) প্রয়োজন হবে */
        gap: 6px; 
        
        /* যাতে আইটেমগুলো পরের লাইনে যেতে পারে */
        flex-wrap: wrap; 
    }
}