diff --git a/cyber-pss.css b/cyber-pss.css
index 697f9ad..f4beae4 100644
--- a/cyber-pss.css
+++ b/cyber-pss.css
@@ -55,6 +55,120 @@
   --select-fg: #b5becc;
 }
 
+/*==============================================================================
+  MOBILE ADJUSTMENTS
+==============================================================================*/
+
+/*–– Breakpoints & transition ––*/
+:root {
+  --bp-md:    1196px;  /* hide search, center logo */
+  --bp-sm:    1030px;  /* hide stats, icons, avatar */
+  --bp-icon:  1000px;  /* hide icon-bar only */
+  --bp-xs:     800px;  /* full collapse (menu + search) */
+  --nav-trans: 0.4s ease-in-out;
+}
+
+/*==============================================================================
+  1) Medium (≤1196px):
+     • hide search
+     • center logo
+     • pin toggle & icon-bar
+==============================================================================*/
+@media (max-width: var(--bp-md)) {
+  .quick-search {
+    display: none !important;
+  }
+
+  .top-nav__left {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    position: relative !important;
+    transition: all var(--nav-trans);
+  }
+
+  .top-nav__toggle,
+  .top-nav__icon-bar {
+    position: absolute !important;
+    right: 1rem !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    transition: all var(--nav-trans);
+  }
+}
+
+
+/*==============================================================================
+  2) Small-tablet (≤1030px):
+     • hide stats (ratio-bar)
+     • hide icon-bar & profile avatar
+==============================================================================*/
+@media (max-width: var(--bp-sm)) {
+  .top-nav__ratio-bar,
+  .top-nav__icon-bar,
+  .top-nav__profile-image {
+    display: none !important;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--nav-trans), visibility var(--nav-trans);
+  }
+}
+
+
+/*==============================================================================
+  3) Icon-bar only (≤1000px):
+     • hide icon-bar
+==============================================================================*/
+@media (max-width: var(--bp-icon)) {
+  .top-nav__icon-bar {
+    display: none !important;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--nav-trans), visibility var(--nav-trans);
+  }
+}
+
+
+/*==============================================================================
+  4) Extra-small (≤800px):
+     • hide menu & search
+     • center logo
+     • show pinned toggle
+==============================================================================*/
+@media (max-width: var(--bp-xs)) {
+  .top-nav__main-menus,
+  .quick-search {
+    display: none !important;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--nav-trans), visibility var(--nav-trans);
+  }
+
+  .top-nav__left {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    position: relative !important;
+    transition: all var(--nav-trans);
+  }
+
+  .top-nav__toggle {
+    display: block !important;
+    position: absolute !important;
+    right: 1rem !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    transition: all var(--nav-trans);
+  }
+}
+
+/* Hide the search bar on viewports narrower than 1000px */
+@media (max-width: 1230px) {
+  .quick-search {
+    display: none !important;
+  }
+}
+
 /* ===============================================================  
     QUICK SEARCH  
 ================================================================= */
@@ -74,6 +188,9 @@
   top: var(--quick-search-input-offset);
 }
 
+
+
+
 /* Add glowing effect and scale transformation on hover */
 .quick-search__input:hover {
   transform: scale(1.0035); /* Slight scale on hover */