/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* সার্চ বার এবং নেভিগেশন মেনু ফিক্সড হওয়ার কারণে বডির উপরের কন্টেন্ট যেন ঢাকা না পড়ে, 
তাই padding-top ব্যবহার করা হয়েছে। 
হিসাব: হেডার + সার্চ বার + মেইন নেভ। কন্টেন্ট অনুযায়ী এটি ১৭০px থেকে ১৯০px হতে পারে।
*/
body {
    padding-top: 175px; 
}

/* ================= NAVIGATION CONTAINER (FIXED) ================= */
.main-navigation {
  width: 100%;
  max-width: 100%; /* ফুল উইডথ ব্যাকগ্রাউন্ডের জন্য */
  background-color: #bf00ff;
  text-align: center;
  padding: 10px 0px;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  /* পজিশন ফিক্সড করা হয়েছে */
  position: fixed;
  top: 115px; /* সার্চ বারের নিচ থেকে শুরু হওয়ার জন্য পজিশন। আপনার হেডারের উচ্চতা অনুযায়ী এটি কম-বেশি হতে পারে */
  left: 0;
  right: 0;
  z-index: 997; /* এটি সার্চ বারের z-index থেকে কম রাখা হয়েছে */
}

/* ইনার র‍্যাপার ১৩৩০পিএক্স উইডথ ঠিক রাখার জন্য */
.nav-inner-container {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* ================= NAV LINKS ================= */
.main-Nav {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap; /* টেক্সট যেন দুই লাইনে না ভেঙে যায় */
}

/* ================= HOVER EFFECT ================= */
.main-Nav:hover {
  background-color: #9a00cc;
  color: #ffffff;
  transform: scale(1.05);
}

/* ================= MOBILE & TABLET RESPONSIVE ================= */
/* ৭৬৮পিএক্স বা তার নিচের স্ক্রিনে মেনুটি পুরোপুরি হাইড (Display None) থাকবে */
@media screen and (max-width: 768px) {
  .main-navigation {
    display: none !important;   
  }
  body {
    padding-top: 120px; /* মোবাইলে মেনু হাইড হওয়ায় প্যাডিং কমিয়ে দেওয়া হয়েছে */
  }
}

/* ৪৮০পিএক্স বা তার নিচের মোবাইল স্ক্রিনেও হাইড থাকবে */
@media screen and (max-width: 480px) {
  .main-navigation {
    display: none !important;   
  }
}

/* ক্লিয়ার ডিভ স্টাইল */
.clear {
  clear: both;
}