.navbar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: .9375rem 1.875rem;
    background-color: #9c7771;
    position: fixed;
    width: 100%; 
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
}
  

.nav-links a {
  white-space: nowrap;
  font-size: 1rem; }

  .navbar .logo {
    display: flex;
    align-items: center; /* Ensures text and image align */
    gap: .625rem; /* Space between image and text */
    white-space: nowrap; /* Prevents text from wrapping */
}

.navbar .logo img {
    width: 3,125rem;
    height: 3.125rem;
    object-fit: cover;
    border-radius: .625rem;
    display: block; /* Prevents extra spacing */
}

.navbar .logo span {
    font-size: 1.5rem; /* Adjust text size */
    font-weight: bold;
    color: #3b322e;
    font-family: "Saira", sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Nav links alignment */
.navbar .nav-links {
  display: flex;
  gap: .9375rem; /* Adds spacing between links */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  position: relative; /* For gradient fade positioning */
}

body {
  background-color: rgb(187, 162, 162);
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

.nav-links a {
  color: rgb(63, 38, 38) !important;
  font-style: bold;
}

.navbar .nav-links a:hover {
    color: #546d49 !important; /* Hover effect */
}
.navbar .nav-links a.active {
    color: rgb(204, 109, 109) !important; /* Active link color */
    text-decoration: underline;
    text-underline-offset: .3125rem;
    font-weight: bold;
}

.navbar .nav-links a:visited {
    color: rgb(204, 109, 109) !important; /* Prevents purple visited links */
}