/* Basic styling for the navigation bar */
.navbar {
    background-color: #333; /* Dark background */
    overflow: hidden;
}

/* Navigation list styling */
.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Align items to the right */
}

/* Style for each navigation item */
.nav-list li {
    display: inline-block;
    margin: 0 10px;
}

/* Style for navigation links */
.nav-list li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Additional styling for the Connect Wallet button */
.connect-btn {
    background-color: #04AA6D; /* Green background */
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
}

/* Change color on hover */
.nav-list li a:hover, .connect-btn:hover {
    background-color: #ddd;
    color: black;
}

/* Responsive design: adjusting padding for smaller screens, etc. */
@media screen and (max-width: 600px) {
    .nav-list li {
        margin: 5px;
    }
    .connect-btn {
        padding: 8px 10px;
    }
}
/* Add this to your styles.css */
.navbar {
    background: #4b6cb7; /* Adjust the color to match your design */
    background: -webkit-linear-gradient(to right, #182848, #4b6cb7); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* ... other styles ... */
}

.connect-btn {
    /* ... existing styles ... */
    float: right; /* if you want the button to be aligned to the right */
}

/* Hide elements that should only be visible when connected */
.dashboard-link, .profile-link {
    display: none;
}

.nav-item {
    position: relative; /* This allows absolute positioning relative to the nav-item */
  }
  
/* Dropdown Menu */

  
  /* Dropdown Links */
  .dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: black;
  }
  
  /* Dropdown Links - Hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show Dropdown Content when .show is added via JavaScript */
  .dropdown-content.show {
    display: block;
  }
  
  .connect-btn {
    background-color: #04AA6D; /* Green background or any color you prefer */
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    margin-right: 10px; /* Adjust the margin as needed */
  }
  .connect-btn.connected {
    background-color: #286090; /* Different background color when connected */
  }