.mc-bottom-nav{display:none}
@media(max-width:768px){
  .mc-global-sidebar{display:none}
  .mc-bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e7eb;display:block;z-index:1000}
  .mc-bottom .mc-bottom-list{display:flex;list-style:none;margin:0;padding:6px 8px}
  .mc-bottom .mc-bottom-list li{flex:1;text-align:center}
  .mc-bottom .mc-bottom-list a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;text-decoration:none;color:#374151;font-size:13px}
  .mc-bottom .mc-bottom-list a .fa{font-size:16px;color:#6b7280}
  .mc-bottom .mc-bottom-list a:active,.mc-bottom .mc-bottom-list a:hover{color:var(--mc-accent)}
}
@media(min-width:769px){
  .has-mc-sidebar #main{margin-left:72px}
  .mc-nav .mc-nav-list a span{opacity:0;white-space:nowrap;transition:opacity .2s ease;pointer-events:none}
  .mc-global-sidebar:hover{width:220px}
  .mc-global-sidebar:hover .mc-nav .mc-nav-list a span{opacity:1;pointer-events:auto}
}
 /* --- সাইডবার স্টাইল --- */
        .mc-global-sidebar {
            position: fixed; /* ফিক্সড যাতে স্ক্রল করলেও জায়গায় থাকে */
            top: 100px;
            left: 0;
            height: 100vh; /* পুরো উচ্চতা */
            width: 60px; /* কলাপস বা ছোট অবস্থার সাইজ */
            background-color: #ffffff; /* সাইডবারের রং সাদা */
            overflow: hidden; /* টেক্সট যাতে বাইরে না যায় */
            transition: width 0.4s ease; /* ফোল্ড হওয়ার স্মুথ অ্যানিমেশন */
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 999;
        }

        /* মাউস হোভার করলে সাইডবার বড় হবে */
        .mc-global-sidebar:hover {
            width: 250px; /* বড় হওয়ার পর সাইজ */
        }

        /* নেভিগেশন লিস্ট স্টাইল */
        .mc-nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }

        .mc-nav-list li {
            width: 100%;
        }

        /* লিঙ্কের স্টাইল */
        .mc-nav-list li a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #2c3e50; /* সাদা ব্যাকগ্রাউন্ডের জন্য কালো বা গাঢ় রঙের টেক্সট */
            padding: 15px 0; /* উপরে নিচে প্যাডিং */
            width: 100%;
            transition: background 0.3s;
            white-space: nowrap; /* টেক্সট যাতে নিচে না নামে */
        }

        /* হোভার করলে লিঙ্কের ব্যাকগ্রাউন্ড কালার */
        .mc-nav-list li a:hover {
            background-color: #f0f0f0; /* হোভার করলে হালকা গ্রে */
            color: #3498db;
        }

        /* আইকন এবং ইমেজের স্টাইল */
        .mc-nav-list li a i,
        .mc-nav-list li a img {
            min-width: 60px; /* আইকনের জন্য ফিক্সড জায়গা */
            text-align: center;
            font-size: 1.7rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* অ্যাভাতার বা প্রোফাইল ইমেজের গোল আকার */
        .mc-nav-list li a img.avatar {
            width: 40px; /* নির্দিষ্ট উইডথ */
            height: 40px; /* নির্দিষ্ট হাইট - স্কয়ার শেপ নিশ্চিত করার জন্য */
            min-width: 40px; /* আগের min-width ওভাররাইড করা হলো */
            margin: 0 10px; /* (60-40)/2 = 10px মার্জিন দিয়ে সেন্টারে রাখা হলো */
            border-radius: 50%; /* পুরোপুরি গোল করার জন্য */
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.3s;
        }

        .mc-nav-list li a:hover img.avatar {
            border-color: #3498db;
        }

        /* টেক্সট (span) স্টাইল - প্রথমে লুকানো থাকবে */
        .mc-nav-list li a span {
            opacity: 0; /* প্রথমে অদৃশ্য */
            transform: translateX(-10px); /* একটু বামে সরে থাকবে */
            transition: all 0.3s ease; /* আসার সময় স্মুথ ইফেক্ট */
            font-size: 1.5rem;
            margin-left: 10px;
        }

        /* সাইডবারে হোভার করলে টেক্সট দৃশ্যমান হবে */
        .mc-global-sidebar:hover .mc-nav-list li a span {
            opacity: 1;
            transform: translateX(0);
        }
        .mc-bottom .avatar{border-radius: 50%};