:root {
    --primary: #2563eb;
    --dark: #1e40af;
    --orange: #f97316;
    --bg-rgb: 10, 14, 63;
    --text: #feffff;
    --card: #f8f9fa;
}

/* Navbar */
.navbar {
  position: static; /* scrolls with the page */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Transparent BLUE background */
  background-color: rgba(var(--bg-rgb), 0.2); /* Blue with 0.2 opacity */

  backdrop-filter: none; /* remove blur unless you want blur */

  transition: transform 0.3s ease;
  z-index: 10;
}

/* Hide navbar when scrolling down */
.navbar.hide {
  transform: translateY(-100%);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nav-link {
  color: white;
}

From the above css, the background property is at .navbar. The page is not applying the properties
blue with 0.2 opacity to my navbar. Is it something wrong that is in my html or is it in CSS

The above is the html page. I could have sent you the entire code but it is too long.