:root{
  --blue:#0b3c5d;
  --dark-blue:#06273d;
  --saffron:#ff9933;
}

/* NAVBAR BASE */
.navbar{
  background:linear-gradient(90deg,var(--blue),var(--dark-blue));
}

.navbar ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
}

.navbar li{
  padding:14px 20px;
  color:#fff;
  cursor:pointer;
  position:relative;
}

.navbar a{
  color:#fff;
  text-decoration:none;
}

.navbar i{
  margin-right:6px;
  font-size:14px;
}

/* DESKTOP DROPDOWN */
.dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  background:linear-gradient(90deg,var(--blue),var(--dark-blue));
}

.dropdown:hover .dropdown-content{
  display:block;
}

.dropdown-content a{
  display:block;
  padding:12px 14px;
}

.dropdown-content a:hover{
  background:var(--saffron);
  color:#000;
}

/* MOBILE HEADER */
.nav-header{
  display:none;
  padding:14px 20px;
  color:#fff;
}

.navbar li:hover{
  background: linear-gradient(90deg, #ff9933, #ffb366);
  color: #000 !important;
}

@media (min-width: 769px) {
  .arrow {
    display: none !important;
  }
}

/* MOBILE */
@media(max-width:768px){

  .nav-header {
    display: block;
    background: linear-gradient(90deg, var(--blue), var(--dark-blue));
  }

  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .navbar ul.active {
    display: flex;
  }

  .navbar li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #fff;
    background: linear-gradient(90deg, var(--blue), var(--dark-blue));
  }

  .navbar li:hover {
    background: linear-gradient(90deg, var(--blue), var(--dark-blue));
    color: #fff;
  }

  .navbar li i {
    min-width: 22px;
    text-align: center;
  }

  .navbar li a {
    color: #fff;
  }

  /* Dropdown mobile */
  .navbar li.dropdown {
    display: block;
    padding: 0;
    flex-direction: column;
  }

  .nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 2;
  }

  .nav-item .left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .arrow {
    font-size: 12px;
    transition: transform 0.25s ease;
  }

  .dropdown.open .arrow {
    transform: rotate(180deg);
  }

  .dropdown-content {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    background: linear-gradient(90deg, var(--blue), var(--dark-blue));
    box-shadow: none;
    border-radius: 0;
  }

  .dropdown.open .dropdown-content {
    max-height: none;
  }

  .dropdown-content a {
    display: block;
    padding: 12px 20px 12px 54px;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.2);
  }

  .dropdown .nav-item,
  .dropdown .nav-item span,
  .dropdown .nav-item i{
    color: #ffffff !important;
  }

}