.middle_navbar {
  width: 90%;
  margin: 20px auto;
  padding: 12px 20px;
  height: 60px;
  display: flex;
  /* justify-content: center;
  align-items: center; */
  gap: 40px;
  border-bottom: 2px solid burlywood;
  transition: all 0.4s ease;
}

.middle_navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}
/* Default: hide mobile navbar */
.mobile-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  height: 60px;
  width: 100%;
  background: #e6fde9;
}



.mobile-navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}




@media (max-width: 370px) {
/* ===== STICKY BEHAVIOR (shared) ====== */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}

/* ===== FULL NAVBAR (desktop) ===== */
.full-navbar { display: none; }

.mobile-navbar { display: none; }   /* keep hidden until sticky */
.mobile-navbar.sticky { display: flex; }  /* show only when sticky */


.middle_navbar_search {
    display: none;
}

/* ===========================================================
   MOBILE HAMBURGER SIDEBAR
   =========================================================== */
.hamburger_menu { position: relative; }
.hamburger_menu i { cursor: pointer; }

.hamburger-dropdown {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #fdf5e6;
  border-right: 2px solid burlywood;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 2000;
  list-style: none;
  margin: 0;
}
.hamburger-dropdown.show { left: 0; }
.hamburger_menu i {
    font-size: 25px;
}
/* Top-level mobile items */
.hamburger-dropdown > li,
.hamburger-dropdown > li > a {
  font-weight: 800;
  color: #333;
  text-decoration: none;
  display: block;
  margin: 8px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.3s;
}
.hamburger-dropdown > li:hover,
.hamburger-dropdown > li > a:hover { color: #093ba8; }

.hamburger-dropdown .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Submenus */
.hamburger-dropdown .submenu {
  display: none;
  list-style: none;
  margin: 6px 0 6px 15px;
  padding: 0;
}
.hamburger-dropdown .submenu li,
.hamburger-dropdown .submenu li a {
  font-weight: normal;
  color: #333;
  text-decoration: none;
  margin: 8px 0;
  padding: 4px 0;
}
.hamburger-dropdown .submenu li a:hover { color: #093ba8; }
.hamburger-dropdown .has-submenu.open > .submenu { display: block; }
/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: flex;              /* ✅ show icons */
  justify-content: flex-end;  /* ✅ align inside block to the right */
  align-items: center;
  gap: 20px;

}

.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 25px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.dropdown li {
    font-size: 1rem;
}



}

@media (min-width: 371px) and (max-width: 490px) {
/* ===== STICKY BEHAVIOR (shared) ====== */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}

/* ===== FULL NAVBAR (desktop) ===== */
.full-navbar { display: none; }

.mobile-navbar { display: none; }   /* keep hidden until sticky */
.mobile-navbar.sticky { display: flex; }  /* show only when sticky */

.middle_navbar_search {
    display: none;
}
/* ===========================================================
   MOBILE HAMBURGER SIDEBAR
   =========================================================== */
.hamburger_menu { position: relative; }
.hamburger_menu i { cursor: pointer; }

.hamburger-dropdown {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #fdf5e6;
  border-right: 2px solid burlywood;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 2000;
  list-style: none;
  margin: 0;
}
.hamburger-dropdown.show { left: 0; }
.hamburger_menu i {
    font-size: 25px;
}
/* Top-level mobile items */
.hamburger-dropdown > li,
.hamburger-dropdown > li > a {
  font-weight: 800;
  color: #333;
  text-decoration: none;
  display: block;
  margin: 8px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.3s;
}
.hamburger-dropdown > li:hover,
.hamburger-dropdown > li > a:hover { color: #093ba8; }

.hamburger-dropdown .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Submenus */
.hamburger-dropdown .submenu {
  display: none;
  list-style: none;
  margin: 6px 0 6px 15px;
  padding: 0;
}
.hamburger-dropdown .submenu li,
.hamburger-dropdown .submenu li a {
  font-weight: normal;
  color: #333;
  text-decoration: none;
  margin: 8px 0;
  padding: 4px 0;
}
.hamburger-dropdown .submenu li a:hover { color: #093ba8; }
.hamburger-dropdown .has-submenu.open > .submenu { display: block; }
/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: none; /* hidden by default */
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
}
.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 25px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.dropdown li {
    font-size: 1rem;
}




}

@media (min-width: 491px) and (max-width: 800px) {
/* ===== STICKY BEHAVIOR (shared) ====== */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}


  .mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    height: 70px;
    width: 100%;
    background: #fdf5e6;
  }
  .mobile-navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: slideDown 0.4s forwards;
  }



/* ===== FULL NAVBAR (desktop) ===== */
.full-navbar { display: none; }

.mobile-navbar { display: none; }   /* keep hidden until sticky */
.mobile-navbar.sticky { display: flex; }  /* show only when sticky */

.middle_navbar_search {
    display: none;
}
/* ===========================================================
   MOBILE HAMBURGER SIDEBAR
   =========================================================== */
.hamburger_menu { position: relative; }
.hamburger_menu i { cursor: pointer; left: 125px;}

.hamburger-dropdown {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #fdf5e6;
  border-right: 2px solid burlywood;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 2000;
  list-style: none;
  margin: 0;
}
.hamburger-dropdown.show { left: 0; width: 350px;}
.hamburger_menu i {
    font-size: 40px;
}
/* Top-level mobile items */
.hamburger-dropdown > li,
.hamburger-dropdown > li > a {
  font-weight: 800;
  color: #333;
  text-decoration: none;
  display: block;
  margin: 8px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.3s;
}
.hamburger-dropdown > li:hover,
.hamburger-dropdown > li > a:hover { color: #093ba8; }

.hamburger-dropdown .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Submenus */
.hamburger-dropdown .submenu {
  display: none;
  list-style: none;
  margin: 6px 0 6px 15px;
  padding: 0;
}
.hamburger-dropdown .submenu li,
.hamburger-dropdown .submenu li a {
  font-weight: normal;
  color: #333;
  text-decoration: none;
  margin: 8px 0;
  padding: 4px 0;
}
.hamburger-dropdown .submenu li a:hover { color: #093ba8; }
.hamburger-dropdown .has-submenu.open > .submenu { display: block; }
.has-submenu {
    font-size: 1.4rem;
}
.hamburger-dropdown > li {
    font-size: 1.4rem;   /* ✅ applies to all top-level li */
}
.submenu li {
    font-size: 1.3rem;
}

/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: none; /* hidden by default */
  justify-content:space-evenly;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
  width: 300px;
  
}
.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 40px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.dropdown li {
    font-size: 1.5rem;
}




}

@media (min-width: 801px) and (max-width: 1025px) {
/* ===== STICKY BEHAVIOR (shared) ====== */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}


  .mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    height: 80px;
    width: 100%;
    background: #fdf5e6;
  }
  .mobile-navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: slideDown 0.4s forwards;
  }



/* ===== FULL NAVBAR (desktop) ===== */
.full-navbar { display: none; }

.mobile-navbar { display: none; }   /* keep hidden until sticky */
.mobile-navbar.sticky { display: flex; }  /* show only when sticky */

/* ===========================================================
   MOBILE SEARCH BAR
   =========================================================== */
.mobile-navbar .middle_navbar_search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;          /* stretch across mobile navbar */
}

.mobile-navbar .middle_navbar_search input {
  flex: 1;               /* take available space */
  min-width: 0;          /* allow shrinking */
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  height: 50px;
}

.mobile-navbar .middle_navbar_search button {
  flex-shrink: 0;        /* keep button size */
  padding: 6px 14px;
  background: linear-gradient(135deg, #0078D7, #005fa3);
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.3rem;
}

.mobile-navbar .middle_navbar_search button:hover {
  background: linear-gradient(135deg, #005fa3, #004080);
}

input::placeholder {
  font-size: 1.2rem;   /* ✅ adjust font size */
  color: #888;         /* change color */
  font-style: italic;  /* optional styling */
}
/* ===========================================================
   ICON + ARROW STYLING
   =========================================================== */
.arrow-icon, .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Ensure dropdowns shrink to fit */
.middle_navbar_menu .new_thread .dropdown,
.middle_navbar_icons .dropdown {
  min-width: auto;
  width: auto;
  white-space: nowrap;
}


/* ===========================================================
   MOBILE HAMBURGER SIDEBAR
   =========================================================== */
.hamburger_menu { position: relative; }
.hamburger_menu i { cursor: pointer; left: 125px;}

.hamburger-dropdown {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #fdf5e6;
  border-right: 2px solid burlywood;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 2000;
  list-style: none;
  margin: 0;
}
.hamburger-dropdown.show { left: 0; width: 350px;}
.hamburger_menu i {
    font-size: 40px;
}
/* Top-level mobile items */
.hamburger-dropdown > li,
.hamburger-dropdown > li > a {
  font-weight: 800;
  color: #333;
  text-decoration: none;
  display: block;
  margin: 8px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.3s;
}
.hamburger-dropdown > li:hover,
.hamburger-dropdown > li > a:hover { color: #093ba8; }

.hamburger-dropdown .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Submenus */
.hamburger-dropdown .submenu {
  display: none;
  list-style: none;
  margin: 6px 0 6px 15px;
  padding: 0;
}
.hamburger-dropdown .submenu li,
.hamburger-dropdown .submenu li a {
  font-weight: normal;
  color: #333;
  text-decoration: none;
  margin: 8px 0;
  padding: 4px 0;
}
.hamburger-dropdown .submenu li a:hover { color: #093ba8; }
.hamburger-dropdown .has-submenu.open > .submenu { display: block; }
.has-submenu {
    font-size: 1.4rem;
}
.hamburger-dropdown > li {
    font-size: 1.4rem;   /* ✅ applies to all top-level li */
}
.submenu li {
    font-size: 1.3rem;
}

/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: none; /* hidden by default */
  justify-content:space-evenly;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
  width: 300px;
  
}
.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 40px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.dropdown li {
    font-size: 1.5rem;
}




}

@media (min-width: 1026px) and (max-width: 1205px) {
/* ===== STICKY BEHAVIOR (shared) ====== */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}


  .mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    height: 80px;
    width: 100%;
    background: #fdf5e6;
  }
  .mobile-navbar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: slideDown 0.4s forwards;
  }



/* ===== FULL NAVBAR (desktop) ===== */
.full-navbar { display: none; }

.mobile-navbar { display: none; }   /* keep hidden until sticky */
.mobile-navbar.sticky { display: flex; }  /* show only when sticky */

/* ===========================================================
   MOBILE SEARCH BAR
   =========================================================== */
.mobile-navbar .middle_navbar_search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;          /* stretch across mobile navbar */
}

.mobile-navbar .middle_navbar_search input {
  flex: 1;               /* take available space */
  min-width: 0;          /* allow shrinking */
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
  height: 50px;
}

.mobile-navbar .middle_navbar_search button {
  flex-shrink: 0;        /* keep button size */
  padding: 6px 14px;
  background: linear-gradient(135deg, #0078D7, #005fa3);
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.3rem;
}

.mobile-navbar .middle_navbar_search button:hover {
  background: linear-gradient(135deg, #005fa3, #004080);
}

input::placeholder {
  font-size: 1.2rem;   /* ✅ adjust font size */
  color: #888;         /* change color */
  font-style: italic;  /* optional styling */
}
/* ===========================================================
   ICON + ARROW STYLING
   =========================================================== */
.arrow-icon, .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Ensure dropdowns shrink to fit */
.middle_navbar_menu .new_thread .dropdown,
.middle_navbar_icons .dropdown {
  min-width: auto;
  width: auto;
  white-space: nowrap;
}


/* ===========================================================
   MOBILE HAMBURGER SIDEBAR
   =========================================================== */
.hamburger_menu { position: relative; }
.hamburger_menu i { cursor: pointer; left: 125px;}

.hamburger-dropdown {
  position: fixed;
  top: 0; left: -250px;
  width: 250px; height: 100%;
  background: #fdf5e6;
  border-right: 2px solid burlywood;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  transition: left 0.3s ease;
  z-index: 2000;
  list-style: none;
  margin: 0;
}
.hamburger-dropdown.show { left: 0; width: 350px;}
.hamburger_menu i {
    font-size: 40px;
}
/* Top-level mobile items */
.hamburger-dropdown > li,
.hamburger-dropdown > li > a {
  font-weight: 800;
  color: #333;
  text-decoration: none;
  display: block;
  margin: 8px 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.3s;
}
.hamburger-dropdown > li:hover,
.hamburger-dropdown > li > a:hover { color: #093ba8; }

.hamburger-dropdown .fa-caret-down {
  margin-left: 6px;
  font-size: 0.8em;
  color: #333;
}

/* Submenus */
.hamburger-dropdown .submenu {
  display: none;
  list-style: none;
  margin: 6px 0 6px 15px;
  padding: 0;
}
.hamburger-dropdown .submenu li,
.hamburger-dropdown .submenu li a {
  font-weight: normal;
  color: #333;
  text-decoration: none;
  margin: 8px 0;
  padding: 4px 0;
}
.hamburger-dropdown .submenu li a:hover { color: #093ba8; }
.hamburger-dropdown .has-submenu.open > .submenu { display: block; }
.has-submenu {
    font-size: 1.4rem;
}
.hamburger-dropdown > li {
    font-size: 1.4rem;   /* ✅ applies to all top-level li */
}
.submenu li {
    font-size: 1.3rem;
}

/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: none; /* hidden by default */
  justify-content:space-evenly;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
  width: 300px;
  
}
.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 40px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -30px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.dropdown li {
    font-size: 1.5rem;
}




}

@media (min-width: 1206px) {
/* ===========================================================
   GLOBAL NAVBAR SETTINGS
   =========================================================== */
.middle_navbar {
  width: 100%;
  margin: 20px auto;
  padding: 12px 20px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  border-bottom: 2px solid burlywood;
  transition: all 0.4s ease;
}

/* ===========================================================
   STICKY BEHAVIOR (shared)
   =========================================================== */
.middle_navbar.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background-color: #fdf5e6;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: slideDown 0.4s forwards;
}

@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}


/* ===== MOBILE NAVBAR (hidden by default) ====== */
.mobile-navbar { display: none; }
.full-navbar { display: flex;}

/* ===========================================================
   LEFT MENU (desktop)
   =========================================================== */
.middle_navbar_menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  /* width: 80%; */

}

.middle_navbar_menu li {
  font-weight: 800;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
  font-size: 1rem;
}

.middle_navbar_menu li:hover { color: #093ba8; }
.middle_navbar_menu a { color: inherit; text-decoration: none; }

/* Dropdown menu */
.middle_navbar_menu .new_thread { position: relative; }
.middle_navbar_menu .new_thread .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  z-index: 1000;
  white-space: nowrap;
  width: auto;
  min-width: 130px;
  white-space: nowrap;
}
.middle_navbar_menu .new_thread:hover .dropdown { display: block; }
.middle_navbar_menu .new_thread .dropdown li {
  padding: 5px;
  cursor: pointer;
}
.middle_navbar_menu .new_thread .dropdown li:hover { background: #f0f0f0; }
.middle_navbar_menu .dropdown li {
  margin: 8px 0;
  padding: 4px 0;
  font-size: 0.9rem;
}
/* ===========================================================
   CENTER SEARCH BAR
   =========================================================== */

/* Shared search bar styles */
.middle_navbar_search {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative; /* anchor dropdown for desktop */
  /* width: 130px; */

}

/* Inputs/buttons (general look) */
.middle_navbar_search input {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  outline: none;
}

.middle_navbar_search button {
  padding: 6px 14px;
  background: linear-gradient(135deg, #0078D7, #005fa3);
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  /* font-size: 0.8rem; */
}

.middle_navbar_search button:hover {
  background: linear-gradient(135deg, #005fa3, #004080);
}


/* ===========================================================
   DESKTOP FULL NAVBAR DROPDOWN
   =========================================================== */
.full-navbar .middle_navbar_search .search-dropdown {
  display: none;              /* hidden by default */
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;              /* inner spacing around children */
  z-index: 1000;

  width: auto;                /* parent fits children */
  white-space: nowrap;        /* keep input + button on one line */
}

.full-navbar .middle_navbar_search .search-dropdown.show {
  display: flex;              /* visible only when toggled */
  align-items: center;
  gap: 12px;                  /* spacing between input and button */
}

/* Input + button inside dropdown */
.full-navbar .middle_navbar_search .search-dropdown input {
  min-width: 180px;           /* reasonable minimum width */
}

.full-navbar .middle_navbar_search .search-dropdown button {
  flex-shrink: 0;             /* keep button size */
}

/* ===========================================================
   RIGHT ICONS
   =========================================================== */
.middle_navbar_icons {
  display: none; /* hidden by default */
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-right: 40px;
}
.middle_navbar.sticky .middle_navbar_icons { display: flex; }

.middle_navbar_icons i {
  font-size: 25px;
  cursor: pointer;
  color: #333;
}
.middle_navbar_icons a {
  color: #333;
  text-decoration: none;
}
.middle_navbar_icons a:hover {
  color: #093ba8;
  text-decoration: none;
}

/* Dropdowns for icons */
.middle_navbar_icons .dropdown {
  display: none;
  position: absolute;
  top: 100%; left: -40;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  list-style: none;
  padding: 5px 10px;
  margin: 0;
  width: auto;
  white-space: nowrap;
}
.middle_navbar_icons div:hover .dropdown { display: block; }
.middle_navbar_menu .new_thread:hover .dropdown { display: block; }
.middle_navbar_menu .new_thread .dropdown li:hover { background: #f0f0f0; }





}