.cd-main-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.cd-main-header .navbar-brand img {
  height: 40px;
  width: auto;
}

.navbar-nav.header-bottom {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.navbar-nav.header-bottom .nav-item a {
  color: #333;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.navbar-nav.header-bottom .nav-item a:hover {
  /* color: #007bff; */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-info .username {
  font-weight: 600;
}

.user-info .coins {
  background: #ffeb3b;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
}

.btn-second {
  background-color: #007bff;
  color: #fff !important;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}

.navbar-search-box {
  flex-basis: 80%;
}

.navbar-nav .dropdown-menu:before,
.navbar-nav.header-bottom .submenu-web:before {
  left: 55%;
}

.navbar-nav .perks-button .button {
  border: 1px solid var(--color-first);
}

.perks-button img {
  width: 20px;
  object-fit: scale-down;
}

/* Tablet view adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  header .user-login-name {
    width: 100px !important;
  }
}

/* Mobile view adjustments */
@media screen and (min-width: 320px) and (max-width: 767px) {
  header .user-login-name {
    width: 40px !important;
    font-size: 12px !important;
  }
}