html{
	font-size: 25px;
	
}
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* আধুনিক ফন্ট */
    background-color: black; /* হালকা ব্যাকগ্রাউন্ড */
	font-size: 25px;
	text-align: center;
}
h1{
	text-align: center;
	font-size: 25px;
}
h2{
	text-align: center;
	font-size: 25px;
}
h3{
	text-align: center;
	font-size: 25px;
}
h4{
	text-align: center;
	font-size: 25px;
}
p{
	text-align: center;
	font-size: 25px;
}


/* প্রধান হেডার স্টাইল */
.mobile-header {
    background-color: #4a90e2; /* আকর্ষণীয় নীল ব্যাকগ্রাউন্ড */
    color: #ffffff; /* সাদা টেক্সট কালার */
    padding: 12px 15px; /* উপরে-নিচে এবং বামে-ডানে প্যাডিং */
    box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* সুন্দর শ্যাডো */
    border-bottom-left-radius: 8px; /* নিচের বাম কোণে রাউন্ড বর্ডার */
    border-bottom-right-radius: 8px; /* নিচের ডান কোণে রাউন্ড বর্ডার */
}

/* লোগো এবং টেক্সট কন্টেইনার */
.header-top-row {
    display: flex;
    justify-content: center; /* লোগো ও টেক্সটকে অনুভূমিকভাবে মাঝখানে আনবে */
    align-items: center; /* উল্লম্বভাবে মাঝখানে সারিবদ্ধ করবে */
    margin-bottom: 12px; /* বাটনগুলোর থেকে দূরত্ব */
}

.logo-and-text {
    display: flex;
    align-items: center;
}

/* লোগো স্টাইল */
.logo {
    height: 45px; /* লোগোর উচ্চতা */
    margin-right: 12px; /* লোগো এবং টেক্সটের মধ্যে স্পেস */
    border-radius: 50%; /* লোগোকে গোলাকার দেখানোর জন্য (যদি বর্গাকার লোগো হয়) */
    box-shadow: 0 0 8px rgba(0,0,0,0.2); /* লোগোতে হালকা শ্যাডো */
}

/* হেডার টেক্সট স্টাইল */
.header-title {
    font-size: 24px;
    font-weight: 700; /* বোল্ড ফন্ট */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* টেক্সটে হালকা শ্যাডো */
}

/* বাটন সারি স্টাইল */
.header-button-row {
    display: flex; /* বাটনগুলোকে পাশাপাশি সাজানোর জন্য Flexbox ব্যবহার */
    justify-content: space-around; /* বাটনগুলোর মধ্যে সমান স্পেস */
    flex-wrap: wrap; /* ছোট স্ক্রিনে বাটনগুলো পরের লাইনে চলে যাবে */
    gap: 8px; /* বাটনগুলোর মধ্যে ফাঁকা স্থান */
}

/* প্রতিটি বাটনের স্টাইল */
.header-btn {
    flex: 1; /* বাটনগুলো তাদের প্যারেন্ট কন্টেইনারের পুরো প্রস্থ সমানভাবে ভাগ করে নেবে */
    min-width: 25%; /* বাটনের সর্বনিম্ন প্রস্থ যাতে বেশি ছোট না হয় */
    display: flex;
    flex-direction: column; /* আইকন এবং টেক্সটকে উল্লম্বভাবে সাজানোর জন্য */
    align-items: center; /* অনুভূমিকভাবে মাঝখানে সারিবদ্ধ করবে */
    padding: 10px 5px;
    background-color: rgba(255, 255, 255, 0.25); /* হালকা স্বচ্ছ সাদা ব্যাকগ্রাউন্ড */
    color: #ffffff; /* সাদা টেক্সট */
    border: 1px solid rgba(255, 255, 255, 0.4); /* হালকা সাদা বর্ডার */
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

/* বাটন আইকনের স্টাইল */
.header-btn i {
    font-size: 22px; /* আইকনের আকার */
    margin-bottom: 6px; /* আইকন এবং টেক্সটের মধ্যে স্পেস */
}

/* বাটনের হোভার/ফোকাস স্টাইল */
.header-btn:hover,
.header-btn:focus {
    background-color: rgba(255, 255, 255, 0.4); /* হোভারে একটু বেশি স্বচ্ছ */
    border-color: rgba(255, 255, 255, 0.8); /* হোভারে বর্ডার একটু গাঢ় */
    transform: translateY(-2px); /* হোভারে হালকা উপরে উঠবে */
    outline: none; /* ফোকাসে ব্রাউজার আউটলাইন সরিয়ে নেওয়া */
}

/* --- মোবাইল রেসপনসিভনেস --- */
@media (max-width: 1600px) {
	body{
    font-size: 0.5rem;
	}
    .mobile-header {
        padding: 10px 10px;
    }
    .logo {
        height: 30px; /* আরও ছোট স্ক্রিনে লোগোর উচ্চতা কমানো */
    }
   
    .header-button-row {
        gap: 6px; /* আরও ছোট স্ক্রিনে বাটনের গ্যাপ কমানো */
    }
    .header-btn {
        padding: 8px 3px;
        min-width: unset; /* মিনিমাম উইডথ তুলে নেওয়া, Flex এর উপর নির্ভরশীল */
    }
    
}