:root{
  --text-main:#1f2a63;
  --accent:#d98e33;
  --donate-start:#c4322c;
  --donate-end:#f1dc5e;
  --bg-start:#ffffff;
  --bg-end:#f7f9ff;
}

/* Top Bar Gradient */
.topbar-gradient{
  background:linear-gradient(90deg,var(--donate-start),var(--donate-end));
}

/* Header Gradient */
.header-gradient{
  background:linear-gradient(180deg,var(--bg-start),var(--bg-end));
}

/* NGO Name Gradient */
.ngo-name{
  font-family:'Merriweather', serif;
  background:linear-gradient(90deg,var(--text-main),var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:0.3px;
}

/* Donate / Help Button */
.donate-btn{
  background:linear-gradient(90deg,var(--donate-start),var(--donate-end));
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:0.3s;
}
.donate-btn:hover{
  transform:translateY(-1px);
  opacity:0.95;
}

/* ===== DESKTOP MENU: TEXT ONLY WITH HOVER EFFECT ===== */
.desktop-link{
  position:relative;
  font-weight:500;
  color:var(--text-main);
  padding:4px 2px;
  transition:0.3s;
  cursor:pointer;
}

/* Underline Animation */
.desktop-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--donate-start));
  border-radius:3px;
  transition:0.3s;
}

.desktop-link:hover::after,
.desktop-link.active::after{
  width:100%;
}

/* ===== MOBILE MENU WITH GRADIENT BACKGROUND ===== */
#mobileMenu {
  background: linear-gradient(
    180deg,
    #ffffffe3 0%,
    #fffafa 55%,
    #f69535cb 100%
  );
}




/* ===== MOBILE MENU: TEXT ONLY, VERTICAL ===== */
.menu-item{
  display:block;
  width:100%;
  font-weight:500;
  color:var(--text-main);
  padding:6px 4px;
  cursor:pointer;
  transition:0.3s;
  position:relative;
}

/* Hover / Active underline */
.menu-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--donate-start));
  border-radius:3px;
  transition:0.3s;
}

.menu-item:hover::after,
.menu-item.active::after{
  width:100%;
}