/* =================================
   🧱 HOME BODY
   👉 মেনুবারের ঠিক 5px নিচে শুরু
================================ */
.home-body{
    background:#ffffff;                 /* পুরো বডির ব্যাকগ্রাউন্ড */
    padding-top:10px;                   /* 🔹 মেনুবার থেকে 5px নিচে */
    padding-bottom:40px;                /* নিচের ফাঁকা জায়গা */
    font-family:'SolaimanLipi','Noto Sans Bengali',sans-serif;
}

/* =================================
   📦 MAIN BODY GRID
   👉 এখান থেকেই সম্পূর্ণ বডির প্রস্থ
   👉 ডান পাশ (এক নজরে + নোটিশ) বড়/ছোট হবে
================================ */
.body-wrapper{
    max-width:1400px;                   /* 🔹 🔥 এখানে 1200 → 1400
                                           🔹 ডান পাশ চওড়া করার মূল জায়গা */
    margin:0 auto;                      /* পুরো বডি মাঝখানে */
    display:grid;                       /* গ্রিড লেআউট */
    grid-template-columns:280px 1fr;    /* 🔹 বাম (প্রশাসক) 280px অপরিবর্তিত
                                           🔹 ডান পাশ বাকি সব জায়গা নেবে */
    gap:15px;                           /* দুই পাশের দূরত্ব */
    align-items:start;                  /* উপরে থেকে শুরু */
}

/* =================================
   👨‍💼 ADMIN CARD (LEFT)
================================ */
.admin-card{
    background:#ffffff;                 /* কার্ড ব্যাকগ্রাউন্ড */
}

/* 🔹 প্রশাসক টাইটেল (ঘড়ির বারের মতো) */
.admin-title{
    background:#006a4e;                 /* ঘড়ির বারের কালার */
    color:#ffffff;                      /* সাদা লেখা */
    height:36px;                        /* ঘড়ির বারের সমান উচ্চতা */
    display:flex;                       /* লেখা সেন্টার করার জন্য */
    align-items:center;                /* উপর-নিচে মাঝখানে */
    justify-content:center;             /* ডানে-বামে মাঝখানে */
    padding:0 12px;                     /* বাম-ডান স্পেস */
    font-size:20px;                     /* ফন্ট সাইজ */
    font-weight:400;
}

/* 🔹 প্রশাসকের নিচের পাতলা বার */
.admin-bar{
    height:4px;                         /* পাতলা বারের উচ্চতা */
    background:#006a4e;                 /* একই কালার */
    margin-bottom:5px;                  /* ডান পাশের বারের সাথে 5px দূরত্ব */
}

/* =================================
   🖼️ ADMIN CONTENT
================================ */
.admin-content{
    text-align:center;                  /* সবকিছু মাঝখানে */
    padding:15px;                       /* ভেতরের স্পেস */
}

.admin-content img{
    width:100%;                         /* পুরো প্রস্থ */
    max-width:220px;                    /* ছবির সর্বোচ্চ সাইজ */
    height:auto;
}

.admin-content h4{
    margin-top:10px;
    font-size:20px;
}

.admin-content p{
    font-size:14px;
    color:#555;
}

/* =================================
   👉 RIGHT AREA (এক নজরে + নোটিশ)
================================ */
.right-area{
    display:flex;                       /* উপর-নিচে সাজানো */
    flex-direction:column;
    gap:10px;                           /* প্রতিটা বক্সের দূরত্ব */
}

/* =================================
   🏛️ OVERVIEW TITLE
================================ */
.overview-title{
    background:#006a4e;                 /* ঘড়ির বারের কালার */
    color:#ffffff;
    height:36px;                        /* ঘড়ির বারের সমান উচ্চতা */
    display:flex;
    align-items:center;
    justify-content:center;             /* লেখা মাঝখানে */
    padding:0 12px;
    font-size:20px;
    font-weight:400;
}

/* 🔹 overview এর নিচের পাতলা বার */
.overview-bar{
    height:4px;
    background:#006a4e;
}

/* =================================
   📝 OVERVIEW TEXT
================================ */
.overview-text{
    background:#f3f5f4;
    padding:18px;
    font-size:16px;
    line-height:1.9;
}

/* =================================
   📢 NOTICE BOARD
================================ */
.notice-card{
    border:1px solid #ddd;
}

/* 🔹 নোটিশ টাইটেল বার */
.notice-header{
    background:#006a4e;
    color:#ffffff;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;             /* লেখা মাঝখানে */
    padding:0 12px;
    font-size:19px;
    font-weight:400;
}

/* 🔹 নোটিশ আইটেম */
.notice-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-top:1px solid #eee;
}

.notice-dot{
    width:8px;
    height:8px;
    background:#006a4e;
    border-radius:50%;
   
}

.notice-text{
    flex:1;
}

.notice-date{
    font-size:16px;
    color:#666;
}

/* =================================
   📱 RESPONSIVE
================================ */
@media(max-width:900px){
    .body-wrapper{
        grid-template-columns:1fr;      /* মোবাইলে এক কলাম */
    }
}





/* ===============================
   🧑‍💼 নাগরিক সেবা সেকশন
================================ */
.citizen-service{
    margin-top:20px;
}

/* 🔹 টাইটেল বার (ঘড়ির বারের মতো) */
.citizen-title{
    background:#006a4e;              /* ✅ ঘড়ির বারের কালার */
    color:#fff;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:400;
}

.citizen-bar{
    height:4px;
    background:#006a4e;
    margin-bottom:12px;
}

/* ===============================
   🔳 সার্ভিস গ্রিড
================================ */
.citizen-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:35px;
}

/* ===============================
   📦 Single Service Card
   👉 রেশিও: আনুমানিক 7:8 (লম্বা)
================================ */
.service-card{
    background:#ffffff;
    border:1px solid #dcdcdc;
    border-radius:6px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:250px;                    /* ✅ বক্স লম্বা করা হয়েছে */
    transition:all .3s ease;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 6px 15px rgba(0,0,0,.12);
}

/* ===============================
   🖼️ উপরের আইকন অংশ (৫ ভাগ)
================================ */
.service-icon{
    flex:5;                          /* 🔹 5 অংশ */
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f5f4;
}

.service-icon img{
    width:55px;
    height:auto;
}

/* ===============================
   🏷️ নিচের টাইটেল অংশ (৩ ভাগ)
   👉 আগের ঘড়ির বারের কালার
================================ */
.service-title{
    flex:3;                          /* 🔹 3 অংশ */
    background:#006a4e;              /* ✅ স্বচ্ছ বাদ, ঘড়ির কালার */
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8px;
    font-size:16px;
    line-height:1.4;
    font-weight:200;
}