.mobile-footer {
    position: fixed; /* স্ক্রিনের নিচের দিকে স্থির থাকবে */
    bottom: 0; /* স্ক্রিনের একদম নিচে */
    left: 0;
    width: 100%; /* পুরো প্রস্থ জুড়ে থাকবে */
    display: flex; /* বাটনগুলোকে পাশাপাশি সাজানোর জন্য Flexbox ব্যবহার */
    justify-content: space-around; /* বাটনগুলোর মধ্যে সমান স্পেস */
    align-items: center; /* উল্লম্বভাবে মাঝখানে সারিবদ্ধ করবে */
    background-color: #000; /* কালো ব্যাকগ্রাউন্ড */
    padding: 8px 0; /* উপরে-নিচে হালকা প্যাডিং */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* উপরের দিকে হালকা শ্যাডো */
    z-index: 1000; /* অন্য কন্টেন্টের উপরে থাকার জন্য */
    float: left;
}

/* প্রতিটি ফুটারে বাটনের স্টাইল */
.footer-button {
    display: flex; /* আইকন এবং টেক্সটকে উল্লম্বভাবে সাজানোর জন্য Flexbox ব্যবহার */
    flex-direction: column; /* উপাদানগুলো একটার নিচে একটা থাকবে */
    align-items: center; /* অনুভূমিকভাবে মাঝখানে সারিবদ্ধ করবে */
    text-decoration: none; /* আন্ডারলাইন সরিয়ে নেওয়া */
    color: #fff; /* সাদা টেক্সট কালার */
    padding: 5px 0; /* বাটনের ভিতরের প্যাডিং */
    width: 25%; /* চারটি বাটনের জন্য সমান প্রস্থ */
    box-sizing: border-box; /* প্যাডিং যেন প্রস্থের অংশ হয় */
    border: 1px solid red; /* ডিফল্ট বর্ডার (স্বচ্ছ) */
	margin: 2px;
	border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* হোভার/ক্লিক ইফেক্টের জন্য ট্রানজিশন */
}

/* বাটন আইকনের স্টাইল */
.footer-button i {
    margin-bottom: 4px; /* আইকন এবং টেক্সটের মধ্যে স্পেস */
}

/* বাটনের হোভার/ফোকাস স্টাইল (মোবাইলে সাধারণত ব্যবহৃত হয় না, কিন্তু ডেস্কটপে ভালো দেখাবে) */
.footer-button:hover,
.footer-button:focus {
    background-color: #333; /* হোভারে হালকা ধূসর ব্যাকগ্রাউন্ড */
    border: 1px solid #555; /* হোভারে হালকা বর্ডার */
    border-radius: 5px; /* হালকা গোলাকার বর্ডার */
    outline: none; /* ফোকাসে ব্রাউজার আউটলাইন সরিয়ে নেওয়া */
}

/* সক্রিয় বাটনের স্টাইল (যদি আপনি বর্তমানে কোন পেজে আছেন তা বোঝাতে চান) */
/* আপনি JavaScript ব্যবহার করে এটি যোগ করতে পারেন, যেমন: document.querySelector('.footer-button.active').classList.add('active'); */
.footer-button.active {
    background-color: #333;
    border: 1px solid #007bff; /* সক্রিয় বাটনের জন্য নীল বর্ডার */
    color: #007bff; /* সক্রিয় টেক্সট এবং আইকন নীল */
}

/* শুধুমাত্র ছোট স্ক্রিনের জন্য (যদি আপনি বড় স্ক্রিনে এই ফুটারটি না দেখাতে চান) */
@media (min-width:1600px){
    .mobile-footer {
        display: none; /* ডেস্কটপ ভিউতে ফুটারটি লুকানো থাকবে */
    }

    /* যদি ডেস্কটপে অন্য ফুটার থাকে, তবে সেটি এখানে যোগ করতে পারেন */
}

/* যদি আপনি বডির প্যাডিং 60px এর বেশি করতে চান এবং ফুটারটি আরও ছোট স্ক্রিনে একটু কম প্যাডিং চায় */
@media (max-width:1600px){
    .footer-button {
        padding: 3px 0;
    }
}