#global_nav {
  /* Gradient background for the navigation */
  background-image: url('../image/banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Sets font for the navigation */
  font-family: Arial, sans-serif;
  padding: 0;
  /* Full-width navigation */
  width: 100%;
  /* Fixes the menu to the top of the screen */
  position: relative;
  /* Keeps the menu above other content */
  z-index: 1000;
  /* overflow: hidden; Prevents overflow content from being visible*/
  /* transform-origin: top; Sets the origin for any transformations to the top */
  /* Sets initial opacity to fully visible */
  opacity: 1;
  display: flex;
}

/* Menu styling */
#global_nav .menu {
  /* Removes default list styling */
  list-style: none;
  padding: 0;
  margin: 0;
  /* Full width for menu */
  align-items: baseline;
}
#donate-button-container{
  list-style: none;
  margin-left: auto;
  padding: 20px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.616) 0%, rgba(0, 0, 0, 0) 100%);
}
#global_nav .menu a {
  /* White text color */
  color: white;
  /* Removes underline from links */
  text-decoration: none;
  /* Adds padding around links */
  padding: 10px 20px;
  position: relative;
}
.menu{
  background: linear-gradient(to top, rgba(0, 0, 0, 0.726) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items:initial;
}
@media (max-width: 768px) {
  .menu{
    background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  }
}
/* Font Awesome icon spacing */
#global_nav .menu a i {
  /* Adds space to the right of icons */
  margin-right: 8px;
}

/* Pill underline effect */
#global_nav .menu .item a::before {
  /* Creates an empty content element */
  content: '';
  position: absolute;
  /* Centers the underline */
  left: 50%;
  /* Positions the underline at the bottom */
  bottom:  -5px;
  /* Sets the height of the underline */
  height: 4px;
  /* Starts with no width for animation effect */
  width: 0;
  /* Sets the color of the underline */
  background-color: #1e1b1f;
  /* Adds rounded corners */
  border-radius: 10px;
  /* Smooth transition for width and position */
  transition: width 0.3s ease, transform 0.3s ease;
  /* Centers underline horizontally */
  transform: translateX(-50%);
  z-index: 1001;
}

#global_nav .menu a:hover::before,
#global_nav .menu .active > a::before {
  /* Expands underline to full width on hover or active */
  width: 100%;
}


.submenu .subitem a {
  /* White text color for submenu items */
  color: rgb(3, 3, 3);
  /* Adds padding around submenu items */
  padding: 8px 20px;
  /* Block display for full clickable area */
  display: block;
}

/* Show submenu with slide-down effect when .submenu-active is added */
.has-submenu.submenu-active .submenu {
  display: block;
  /* Applies slide-down animation */
  animation: slideDown 0.4s ease forwards;
}

/* Apply the slide-down animation */
.submenu-active .submenu {
  display: block;
  /* Makes submenu visible */
  visibility: visible;
  /* Slide-down animation */
  animation: slideDown 0.4s ease forwards;
}

/* Apply the slide-up animation */
.submenu-hide .submenu {
  display: block;
  /* Slide-up animation */
  animation: slideUp 0.4s ease forwards;
  /* Keeps the final state of the animation */
  animation-fill-mode: forwards;
}

.specialHoverEffect:hover{
  transition: 0.2s;
  transform: rotate(-15deg);
}
.special_hover_effect{
  animation: rotateSlideDown 0.4s; 
}
/* Keyframes for slide-down with slight left rotation */
@keyframes rotateSlideDown {
  0% {
    /* Initially transparent and shrunken */
    opacity: 0;
    /* Scales down vertically and rotates slightly to the left */
    transform: scaleY(0.3) rotate(-10deg);
  }
  60% {
    /* Fully opaque */
    opacity: 1;
    /* Slightly over-expands vertically and rotates back to center */
    transform: scaleY(1.05) rotate(-2deg);
  }
  100% {
    /* Fully visible, resets to normal scale and no rotation */
    opacity: 1;
    transform: scaleY(1) rotate(0deg);
  }
}
/* Keyframes for liquid slide-down effect */
@keyframes liquidSlideDownNav {
  0% {
    /* Initially transparent */
    opacity: 0;
    /* Shrinks vertically to create slide effect */
    transform: scaleY(0.3);
  }
  60% {
    /* Fully opaque */
    opacity: 1;
    /* Slightly over-expand vertically for bounce effect */
    transform: scaleY(1.05);
  }
  100% {
    /* Fully visible */
    opacity: 1;
    /* Resets to normal scale */
    transform: scaleY(1);
  }
}

/* Slide-down and slide-up animations for submenu */
@keyframes slideDown {
  0% {
    /* Start at fully transparent */
    opacity: 0;
    /* Begin above final position */
    transform: translateY(-10px);
    /* Ensure visibility is on */
    visibility: visible;
  }
  100% {
    /* End at fully opaque */
    opacity: 1;
    /* Reach final position */
    transform: translateY(0);
    /* Keep visibility on */
    visibility: visible;
  }
}

@keyframes slideUp {
  0% {
    /* Start at fully visible */
    opacity: 1;
    /* Begin at final position */
    transform: translateY(0);
    /* Keep visibility on */
    visibility: visible;
  }
  100% {
    /* End at fully transparent */
    opacity: 0;
    /* Move slightly up */
    transform: translateY(-10px);
    /* Hides visibility */
    visibility: hidden;
  }
}

/* Hide burger menu icon on desktop */
.menu-toggle {
  /* Hidden on desktop */
  display: none;
}

/* Mobile menu */
.menu {
  display: flex;
  /* Allows items to wrap on small screens */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.menu li a {
  display: block;
  /* Full width for clickable area */
  width: 100%;
}

.toggle {
  /* Sets toggle button to span full width */
  flex: 1;
  /* Aligns toggle to the right */
  text-align: right;
  /* Orders toggle first in flex layout */
  order: 1;
  /* Increases toggle font size */
  font-size: 20px;
}

/* Base styles for mobile menu */
.menu {
  display: flex;
  /* Allows items to wrap on mobile */
  
  justify-content: space-between;
  align-items: center;
  /* Stacks menu items vertically */
  flex-direction: column;
}

.menu li a {
  display: block;
  /* Full width for clickable area */
  width: 100%;
}

.toggle {
  /* Orders toggle button first */
  order: 1;
  /* Sets font size */
  font-size: 20px;
  /* Pointer cursor for interactivity */
  cursor: pointer;
}

.item {
  /* Orders items last */
  order: 3;
  /* Full width for each item */
  width: 100%;
  /* Centers text in each item */
  text-align: center;
  /* Hidden by default */
  display: none;
}

.active .item {
  /* Displays items when active */
  display: block;
}

.button.secondary {
  /* Bottom border for secondary button */
  border-bottom: 1px #444 solid;
}

/* Submenu styles */
.submenu {
  /* Hidden by default */
  display: none;
}

.submenu-active .submenu {
  /* Displays submenu when active */
  display: block;
}

.has-submenu > a::after {
  /* Font family for submenu indicator */
  font-family: "Font Awesome 5 Free";
  /* Sets icon size */
  font-size: 12px;
  line-height: 16px;
  /* Sets font weight for the icon */
  font-weight: 900;
  /* Font Awesome down arrow icon */
  content: "\f078";
  color: #ff0000;
  /* Adds spacing to left of icon */
  padding-left: 5px;
}

.subitem a {
  /* Padding for submenu items */
  padding: 10px 15px;
  text-decoration: none;
}
.item a:hover{
  color: rgb(238, 219, 219) !important;
  background-color: rgba(24, 24, 24, 0.253);
  font-weight: bold;
  text-shadow: #d8d2d2b6 !important;
}

.submenu-active {
  /* Rounds submenu corners */
  border-radius: 3px;
  position: relative;
}

/* Desktop menu styles */
@media (min-width: 768px) {
  .menu {
    /* Sets horizontal layout on desktop */
    flex-direction: row;
  }

  .toggle {
    /* Hides toggle button on desktop */
    display: none;
  }

  .item {
    /* Displays items on desktop */
    display: block;
    /* Sets width for desktop layout */
    width: auto;
    /* Resets order for desktop */
    order: initial;
  }

  .submenu {
    /* Positions submenu relative to parent item */
    position: absolute;
    /* Sets dark background for submenu */
    background-color: rgb(0, 0, 0);;
    /* Rounds corners of submenu */
    border-radius: 3px;
    list-style-type: none;
  }

  .submenu-active .submenu {
    /* Displays submenu when active */
    display: block;
   
  }
@media (max-width:768){
  
}
}
#burger{
  position: absolute;
  left: -15px;
  top: 57px;
}