body 
{
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #F9F3EF 0%, #D2C1B6 100%);
  margin:0px;
  padding:0;

}

.navbar
{
  flex-direction:column;
  padding: 0.5rem 1rem;
  background:linear-gradient(to bottom,#1B3C53, #456882);
  box-shadow: 0 5px 5px #F9F3EF;
}
.navbar-logo 
{
  height: 50px;
  width:auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display:block;
  transform: transform 0.3s ease, box-shadow 0.3s ease;
}
.navbar-logo:hover
{
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.top-search
{
  display:flex;
  max-width: 300px;
  width: 100%;
}
.top-search .form-control
{
  border-radius: 1px;
  
  border-right: none;
  flex:1;
  margin:0;
}
.top-search .btn
{
  margin:0;
  border-left: none;
  border-radius: 1px;
  background-color: #456882;
  transition: transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.top-search .btn:hover
{
  background-color: #37566dca;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.add-itemBtn
{
  margin-left:15px;
  white-space: nowrap;
  background-color: #456882;
}

.profile-icon 
{
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.2s;
}

.profile-icon:hover 
{
    transform: scale(1.1);
}

.nav-item.dropdown .dropdown-menu 
{
    border-radius: 0;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 20px;
}

.nav-item.dropdown .dropdown-menu h6 
{
    font-weight: bold;
    margin-bottom: 10px;
}

.nav-item.dropdown .dropdown-menu a 
{
    color: #333;
    padding: 3px 0;
    display: block;
}

.nav-item.dropdown .dropdown-menu a:hover 
{
    color: #38556c;
    text-decoration: none;
}

.navbar-nav .nav-item.dropdown:hover > .dropdown-menu 
{
    display: block;
    opacity: 1;
    visibility: visible;
}
.nav-item.dropdown > .nav-link {
    color: white;
}

.nav-item.dropdown:hover > .nav-link {
    color: black; 
    background-color: white; 
    top: 100%;
}