body {
  
  font-family: 'Roboto', sans-serif;
}


/* Enhanced Navigation Styling */
.navbar {
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}



/* Main nav styles - updated to match middle-nav-tabs */
.navbar .nav-link {
  /* color: var(--text-color) !important; */  
  margin: 0 0.25rem;
  padding: 10px 15px !important;
  border: 1px solid transparent;
  border-radius: 30px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  cursor: pointer;

}

.navbar .nav-link:hover {
  background-color: #303240;
  border: 1px solid #abf2ff;
  
}

.navbar .nav-link.active {
  background-color: #44495e;
  border: 1px solid #abf2ff;
  color: white !important; 
  cursor: default; 
}



/* Style for the navbar brand */
.navbar-brand {
  padding: 0.5rem 1rem;
  margin-right: 1.5rem;
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  .navbar .nav-link {
    text-align: center;
    margin: 0.25rem 0;
  }
  
  .middle-nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.75rem;
  }
  
  .middle-nav-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 0.8rem;
  }
}

/* Remove all text decoration in navigation elements */
.navbar *,
.middle-nav-tabs *,
a, a:hover, a:active, a:focus,
.navbar a, .navbar a:hover, .navbar a:active, .navbar a:focus,
.navbar-nav a, .navbar-nav a:hover, .navbar-nav a:active, .navbar-nav a:focus,
.navbar-brand a, .navbar-brand a:hover, .navbar-brand a:active, .navbar-brand a:focus,
.nav-link a, .nav-link a:hover, .nav-link a:active, .nav-link a:focus,
.navbar-nav li.nav-link a, .navbar-nav li.nav-link a:hover, .navbar-nav li.nav-link a:active, .navbar-nav li.nav-link a:focus,
.navbar ul.navbar-nav li.nav-link a, .navbar ul.navbar-nav li.nav-link a:hover,
li.nav-link a[href*="reddit"], li.nav-link a[href*="reddit"]:hover,
li.nav-link a[href="/"], li.nav-link a[href="/"]:hover {
  text-decoration: none !important;
}



/* Ensure active tabs have white text */
.navbar .nav-link.active,
.navbar .nav-link.active a,
.navbar .nav-link.active i {
  color: white !important;
}