.navbar {
    position: fixed;
     top: 0;
  width: 100%;
    z-index: 1;
  background: #2c2d42;
  color: white;
box-shadow: 0px 0.5px 4px 0px #00000052 inset;

}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.navbar-logo {
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  background-image: linear-gradient(147.14deg, #FF3B3B 6.95%, #6600CC 93.05%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
    cursor: pointer;

}

.navbar-menu {
  display: flex;
  align-items: center;
}

.navbar-item {
  background: linear-gradient(147.14deg, #3e7bfa 6.95%, #6600cc 93.05%);
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0px 2px 8px 0px #0000000a;
  margin-left: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}



.navbar-item:hover {
  transform: scale(1.1);
}


@media (max-width: 699px) {
  .navbar-container {
    padding: 5px 10px; /* Reduce padding for smaller container */
    display: flex;
    align-items: center;
    justify-content: center;
  }



  .navbar-menu{
    display: none;
  }
  .navbar-item {
    font-size: 12px;
    padding: 5px 10px; 
  }
  .navbar-logo {
    font-size: 2rem; /* Decrease the font size for the logo */
  /* margin-left: 8rem; */
  }

  .navbar-item {
    font-size: 14px; /* Decrease the font size for the menu items */
    padding: 8px 15px; /* Reduce padding for smaller items */
  }
}

/* Media query for screen sizes between 340px and 499px */
@media (min-width: 340px) and (max-width: 499px) {
  .navbar-container {
    padding: 2px 5px; /* Further reduce padding for smaller container */
  }

  .navbar-logo {
    font-size: 1.5rem; /* Further decrease the font size for the logo */


  }

  .navbar-menu {
   display: none;
  }

 
}