menu50

hmenu-1

hmenu-2

hmenu-3

hmenu-4

hmenu-5

hmenu-6

hmenu-7

hmenu-8

hmenu-9

hmenu-10

hmenu-11

hmenu-12

hmenu-13

hmenu-14

hmenu-15

hmenu-16

hmenu-17

hmenu-18

hmenu-19

hmenu-20

hmenu-21

hmenu-22

hmenu-23

hmenu-24

hmenu-25

hmenu-26

hmenu-27

hmenu-28

hmenu-29

hmenu-30

hmenu-31

hmenu-32

hmenu-33

hmenu-34

hmenu-35

hmenu-36

hmenu-37

hmenu-38

hmenu-39

hmenu-40

hmenu-41

hmenu-42

hmenu-43

hmenu-44

hmenu-45

hmenu-46

hmenu-47

hmenu-48

hmenu-49

hmenu-50

.menu-list li
{
    list-style-type: none;
    margin: 10px;
}
.menu-list li a
{
    padding: 5px 15px;
}
.menu-list
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

#hmenu-1
{
    
       /* Main menu item */
 .menu-list li a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Pseudo-element for gradient */
.menu-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
  background-size: 200% auto;
  transition: all .5s;
  transform: translateX(-100%);
}

/* Hover effect */
.menu-list li a:hover::after {
  transform: translateX(0%);
  animation: gradient-89 3s linear infinite;
}

/* Keyframes for gradient animation */
@keyframes gradient-89 {
  0% { background-position: 100% 0%; }
  50% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

}



#hmenu-2
{
    /* Main menu and submenu toggle */
.menu-list li > a {
  position: relative;
  overflow: hidden;
}

/* Pseudo-element for the underline */
.menu-list li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: #ffffff;
  width: 0;
  transition: width 0.3s ease;
}

/* Hover effect */
.menu-list li > a:hover::after {
  width: 100%;
  animation: heartbeat116 1.5s infinite;
}

/* Keyframes for the heartbeat effect */
@keyframes heartbeat116 {
  0%, 100% {
    width: 100%;
  }
  50% {
    width: 60%;
  }
}

}
#hmenu-3
{
    /* Main menu and submenu toggle */
.menu-list li > a {
  position: relative;
}

/* Pseudo-element for the underline */
.menu-list li > a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #F1C40F, #E74C3C); /* Change Color Here */
  border-radius: 0;
  transition: all 0.5s ease-in-out;
}

/* Hover effect */
.menu-list li > a:hover::before {
  width: 100%;
  border-radius: 50%;
}

}
#hmenu-4
{
    /* Main menu and submenu toggle */
.menu-list li > a {
  position: relative;
  overflow: hidden;
}

/* Pseudo-elements for lines */
.menu-list li > a::before,
.menu-list li > a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #ffffff;
  transition: all 0.5s;
}

/* Top line */
.menu-list li > a::before {
  top: 0;
  left: 0;
}

/* Bottom line */
.menu-list li > a::after {
  bottom: 0;
  right: 0;
}

/* Hover effect for top line */
.menu-list li > a:hover::before {
  width: 100%;
  transition: width 0.25s ease-in-out;
}

/* Hover effect for bottom line */
.menu-list li > a:hover::after {
  width: 100%;
  transition: width 0.25s ease-in-out 0.25s;
}

}
#hmenu-5
{
/* Main menu and submenu toggle */
.menu-list li > a {
  position: relative;
  transition: color 0.5s ease;
}

/* Pseudo-element for shimmer effect */
.menu-list li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity 0.5s;
}

/* Hover effect for link */
.menu-list li > a:hover {
  color: #ffffff;
}

/* Hover effect for shimmer */
.menu-list li > a:hover::after {
  opacity: 1;
  animation: shimmer111 2s linear infinite;
}

/* Shimmer animation */
@keyframes shimmer111 {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

}
#hmenu-6
{
/* Main menu link styling */
.menu-list li a {
  position: relative;
  transition: all 0.5s ease;
}

/* Pseudo-element for neon effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #00ff00;
  visibility: hidden;
  clip: rect(0, 0, 0, 0);
  transition: all 0.5s ease;
}

/* Hover effect for link */
.menu-list li a:hover {
  color: #00ff00;
  animation: neonFlicker 1.5s infinite alternate;
}

/* Hover effect for neon */
.menu-list li a:hover::before {
  visibility: visible;
  clip: rect(0, 900px, 0, 0);
  animation: neonFlicker 1.5s infinite alternate;
}

/* Neon flicker animation */
@keyframes neonFlicker {
  0%, 100% {
    text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 25px #ff00ff, 0 0 30px #ff00ff, 0 0 35px #ff00ff;
  }
  50% {
    text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 25px #ff00ff, 0 0 30px #ff00ff, 0 0 35px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff, 0 0 75px #ff00ff;
  }
}

}
#hmenu-7
{
/* Main menu link styling */
.menu-list li a {
  position: relative;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-elements for radial gradient */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(transparent, #ffffff); /* Change Color Here */
  z-index: -1;
  opacity: 0;
  transition: all 0.4s ease-out;
}

.menu-list li a::before {
  top: 0;
  left: 0;
}

.menu-list li a::after {
  bottom: 0;
  right: 0;
}

/* Hover effects */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 200%;
  height: 200%;
  opacity: 0.6;
  transition: all 0.4s ease-out;
}

.menu-list li a:hover::before {
  top: -50%;
  left: -50%;
}

.menu-list li a:hover::after {
  bottom: -50%;
  right: -50%;
}

}
#hmenu-8
{
/* Main menu link styling */
.menu-list li a {
  position: relative;
  display: inline-block;
  transition: all 0.5s ease !important;
  text-shadow: none;
}

/* Pseudo-elements for shadow effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #ffffff;
  transition: all 0.5s ease;
}

.menu-list li a::before {
  clip-path: inset(0 100% 0 0);
  text-shadow: 2px 0 #ff00e1, -2px 0 #00f3ff;
}

.menu-list li a::after {
  clip-path: inset(0 0 0 100%);
  text-shadow: 0 2px #ff00e1, 0 -2px #00f3ff;
}

/* Hover effects */
.menu-list li a:hover {
  text-shadow: 2px 0 #ff00e1, -2px 0 #00f3ff, 0 2px #ff00e1, 0 -2px #00f3ff;
}

.menu-list li a:hover::before,
.menu-list li a:hover::after {
  clip-path: inset(0 0 0 0);
}

}
#hmenu-9
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  z-index: 1;
}

/* Pseudo-element for the background effect */
.menu-list > li > a::before {
  content: '';
  background-color: #A6A6A6; /* Change Color Here */
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 100%;
  height: 12px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

/* Hover effect */
.menu-list > li > a:hover::before {
  bottom: 0;
  height: 100%;
  z-index: -1;
}

}
#hmenu-10
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  display: inline-block;
  transition: transform 0.3s !important;
}

/* Hover effect for scaling */
.menu-list > li > a:hover {
  transform: scale(1.07);
}

}

#hmenu-11
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
}

/* Hover effect with spinning gradient background */
.menu-list > li > a::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff0000, #00ff00, #0000ff);
  background-size: 300% 300%;
  z-index: -1;
  border-radius: 100vmax;
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s;
  animation: rotate-97 5s linear infinite;
}

.menu-list > li > a:hover::after {
  opacity: 1;
}

/* Spinning gradient background animation */
@keyframes rotate-97 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

}
#hmenu-12
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* Hover effect with circular gradient background */
.menu-list > li > a::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 30%;
  transform: translate(-50%, -50%);
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff0000, #00ff00, #0000ff);
  background-size: 100% 100%;
  z-index: -1;
  filter: blur(15px);
  opacity: 0.5;
  transition: opacity 0.5s;
  animation: rotate-96 5s linear infinite;
  border-radius: 100vmax;
  width: 50px;
  height: 50px;
}

.menu-list > li > a:hover::after {
  opacity: 1;
}

/* Circular gradient background animation */
@keyframes rotate-96 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

}
#hmenu-13
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  border-radius: 10px;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
}

/* Hover effect with linear gradient background */
.menu-list > li > a::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff0000, #00ff00, #0000ff); /* Change Gradient Here */
  background-size: 600%;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
  animation: gradient-95 5s infinite linear;
}

.menu-list > li > a:hover::after {
  opacity: 1;
}

/* Linear gradient background animation */
@keyframes gradient-95 {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

}
#hmenu-14
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  display: inline-block;
  background: linear-gradient(120deg, #ff00cc 0%, #333399 100%); /* Change Gradient Here */
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 100%;
  transition: background-size 0.25s ease-in !important;
}

/* Hover effect for background-size */
.menu-list > li > a:hover {
  background-size: 100% 100%;
}

}
#hmenu-15
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  display: inline-block;
  transition: all 0.5s !important;
}

/* Hover effect for glowing text */
.menu-list > li > a:hover {
  color: #0D7CFF;
  text-shadow: 0 0 10px #0D7CFF, 0 0 20px #0D7CFF, 0 0 30px #0D7CFF, 0 0 40px #0D7CFF;
}

}
#hmenu-16
{
/* Main menu link styling for Oxygen */
.menu-list > li > a {
  position: relative;
  display: inline-block;
  transition: all 0.5s;
}

/* Keyframes for the wiggle effect */
@keyframes wiggle92 {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(2px, 2px); }
  50% { transform: translate(0px, 2px); }
  75% { transform: translate(2px, 0px); }
  100% { transform: translate(0px, 0px); }
}

/* Hover effect for wiggling text */
.menu-list > li > a:hover {
  animation: wiggle92 0.2s linear infinite;
}

}
#hmenu-17
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  transition: all 0.5s;
  z-index: 2;
}

/* Pseudo-elements for the hover effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 0;
  background-color: #A6A6A6; /* Change Color Here */
  transition: all 0.5s;
  z-index: -1;
}

/* Positioning the pseudo-elements */
.menu-list li a::before {
  right: 0;
  top: 0;
}

.menu-list li a::after {
  left: 0;
  bottom: 0;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 100%;
}

}
#hmenu-18
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: color 0.3s;
}

/* Pseudo-element for the hover effect */
.menu-list li a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #A6A6A6; /* Change Color Here */
  transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s;
  z-index: -1;
}

/* Hover effect for link text */
.menu-list li a:hover {
  color: #FFFFFF; /* Change Color Here */
}

/* Hover effect for background */
.menu-list li a:hover::after {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

}
#hmenu-19
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  border: solid 1px #ffffff !important; /* Change Color Here */
}

/* Pseudo-element for the hover effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  background: #ffffff; /* Change Color Here */
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  transition: width 0.3s ease-in-out;
}

/* Hover effect for link text */
.menu-list li a:hover {
  color: #000; /* Change Color Here */
}

/* Hover effect for background */
.menu-list li a:hover::before {
  width: 100%;
}

/* Z-index on hover */
.menu-list li a:hover {
  z-index: 1;
}

}
#hmenu-20
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease-in-out;
}

/* Animation on hover */
.menu-list li a:hover {
  animation: color-wheel80 5s linear infinite;
}

/* Keyframes for the animation */
@keyframes color-wheel80 {
  0% { color: #ffffff; }
  14% { color: #ff0000; }
  28% { color: #ff7f00; }
  42% { color: #ffff00; }
  57% { color: #00ff00; }
  71% { color: #0000ff; }
  85% { color: #4b0082; }
  100% { color: #8b00ff; }
}

}
#hmenu-21
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  animation-duration: 0.9s;
}

/* Animation on hover */
.menu-list li a:hover {
  animation-name: pulse79;
  animation-iteration-count: infinite;
}

/* Keyframes for the animation */
@keyframes pulse79 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

}
#hmenu-22
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Pseudo-element for ripple effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.8); /* Change Color Here */
  border-radius: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Animation on hover */
.menu-list li a:hover::before {
  width: 200px;
  height: 200px;
  animation: ripple78 1s ease-out infinite;
  opacity: 1;
}

/* Keyframes for the ripple animation */
@keyframes ripple78 {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

}
#hmenu-23
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  transition: all 0.3s ease !important;
}

/* Animation on hover */
.menu-list li a:hover {
  transform: translateY(-3px);
}

/* Pseudo-element for bottom hover effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #A6A6A6; /* Change Color Here */
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

/* Transform on hover */
.menu-list li a:hover::before {
  transform: scaleY(1);
}

}
#hmenu-24
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
  perspective: 1000px;
  overflow: hidden;
}

/* Pseudo-elements for hover effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  background-color: #A6A6A6; /* Change Color Here */
  width: 0%;
  height: 0%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
  transform-origin: center;
  transition: width 0.4s, height 0.4s;
  z-index: -1;
}

.menu-list li a::before {
  transition-delay: 0s, 0.2s;
}

.menu-list li a::after {
  transition-delay: 0.2s, 0s;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 120%;
  height: 120%;
}

.menu-list li a:hover::before {
  transition-delay: 0.2s, 0s;
}

.menu-list li a:hover::after {
  transition-delay: 0s, 0.2s;
}

}
#hmenu-25
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
}

/* Pseudo-elements for hover effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.3s ease;
}

.menu-list li a::after {
  top: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}

.menu-list li a::before {
  right: 0;
  bottom: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 10px;
  height: 10px;
  border-color: #fff; /* Change Color Here */
}

}
#hmenu-26
{
/* Main menu link styling for Oxygen */
.menu-list li a {
  position: relative;
  display: inline-block;
}

/* Pseudo-elements for hover effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  display: block;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  transition: all 0.5s ease;
}

.menu-list li a::after {
  top: 0;
  left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}

.menu-list li a::before {
  right: 0;
  bottom: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 100%;
  height: 100%;
  border-color: #FFF; /* Change Color Here */
}

}
#hmenu-27
{
/* Oxygen menu link styling */
.menu-list li a {
  position: relative;
  display: inline-block;
}

/* Pseudo-elements for creating lines */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  background-color: #FFF; /* Change Color Here */
  width: 0%;
  height: 2px;
  bottom: 0;
  transition: width 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu-list li a::before {
  left: 0;
}

.menu-list li a::after {
  right: 0;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 100%;
}

}
#hmenu-28
{
/* Oxygen menu link styling */
.menu-list li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-element for gradient background */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #A6A6A6, #FFF);
  top: 0;
  left: -100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.4s ease-in-out, left 0.4s ease-in-out;
}

/* Hover effect */
.menu-list li a:hover::before {
  opacity: 1;
  left: 0;
  transition: opacity 0.4s ease-in-out, left 0.4s ease-in-out;
  animation: gradientAnimation65 2.2s linear infinite;
}

/* Keyframes for animation */
@keyframes gradientAnimation65 {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}

}
#hmenu-29
{
/* Styling for Oxygen menu links */
.menu-list li a {
  position: relative;
  border-radius: 5px;
  z-index: 1;
  overflow: hidden;
}

/* Pseudo-elements to create hover background effect */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.2);
  width: 0%;
  height: 100%;
  top: 0;
  transition: width 0.4s ease-in-out;
  z-index: -1;
}

/* Positioning for ::before pseudo-element */
.menu-list li a::before {
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

/* Positioning for ::after pseudo-element */
.menu-list li a::after {
  right: 50%;
  transform: translateX(50%);
  border-radius: 5px;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  width: 100%;
}

}
#hmenu-30
{
/* Styling for Oxygen menu links */
.menu-list li a {
  position: relative;
  overflow: hidden;
}

/* Pseudo-elements to create border animation */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  border: 0px solid transparent;
  width: 0%;
  height: 0%;
  bottom: 0%;
  right: 0%;
}

/* Styling for ::before pseudo-element */
.menu-list li a::before {
  border-bottom-width: 2px;
  border-left-width: 2px;
}

/* Styling for ::after pseudo-element */
.menu-list li a::after {
  border-top-width: 2px;
  border-right-width: 2px;
}

/* Hover effect */
.menu-list li a:hover {
  color: #fff;
}

/* Hover effect for pseudo-elements */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  border-color: #fff;
  transition: border-color 0s, width 0.3s, height 0.3s;
  width: 100%;
  height: 100%;
}

/* Transition delay for ::before */
.menu-list li a:hover::before {
  transition-delay: 0s, 0s, 0.3s;
}

/* Transition delay for ::after */
.menu-list li a:hover::after {
  transition-delay: 0s, 0.3s, 0s;
}

}
#hmenu-31
{
/* Basic styling for menu links */
.menu-list li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-element for pulse animation */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s;
}

/* Hover effect with pulse animation */
.menu-list li a:hover::before {
  opacity: 1;
  transform: scale(1);
  animation: pulseAnimation60 0.8s infinite;
}

/* Keyframes for pulse animation */
@keyframes pulseAnimation60 {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

}
#hmenu-32
{
/* Basic setup for menu links */
.menu-list li a {
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* Pseudo-element for pulse animation */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 1.4s, transform 1.4s;
}

/* Hover effect with pulse animation */
.menu-list li a:hover::before {
  opacity: 1;
  transform: scale(1);
  animation: pulseAnimation59 1.0s infinite;
}

/* Keyframes for pulse animation */
@keyframes pulseAnimation59 {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

}
#hmenu-33
{
/* Basic setup for menu links */
.menu-list li a {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-elements for the lines */
.menu-list li a::before,
.menu-list li a::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.4s;
}

/* Top line */
.menu-list li a::before {
  top: 0;
  left: 0;
  transform-origin: left;
}

/* Bottom line */
.menu-list li a::after {
  bottom: 0;
  right: 0;
  transform-origin: right;
}

/* Hover effect */
.menu-list li a:hover::before,
.menu-list li a:hover::after {
  transform: scaleX(1);
}

}
#hmenu-34
{
/* Basic setup for menu links */
.menu-list li a {
  position: relative;
  perspective: 800px;
  overflow: hidden;
}

/* Pseudo-element for the flip effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  top: 0;
  left: 0;
  transform: rotateX(90deg) scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.4s, opacity 1.1s;
}

/* Hover effect */
.menu-list li a:hover::before {
  transform: rotateX(0deg) scaleY(1);
  opacity: 0;
}

}
#hmenu-35
{
/* Basic setup for menu links */
.menu-list li a {
  transition: all 0.4s !important;
  position: relative;
}

/* Hover effect */
.menu-list li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

}
#hmenu-36
{
/* Basic setup for menu links */
.menu-list li a {
  transition: all 0.2s !important;
  position: relative;
}

/* Hover effect with text shadow */
.menu-list li a:hover {
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.7);
}

}
#hmenu-37
{
/* Basic setup for menu links */
.menu-list li a {
  display: inline-block;
  transition: all 0.4s;
  overflow: hidden;
  position: relative;
}

/* Ripple effect on hover */
.menu-list li a:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  animation: ripple-31 1s infinite;
}

/* Keyframes for the ripple animation */
@keyframes ripple-31 {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

}
#hmenu-38
{
/* Setup for main menu links, ignoring sub-menus */
.menu-list > li:not(.menu-item-has-children) > a {
  position: relative;
}

/* Create a triangle below each link */
.menu-list > li:not(.menu-item-has-children) > a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff; /* Change this to set the color of the triangle */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transition: all 0.4s;
}

/* Reveal the triangle on hover */
.menu-list > li:not(.menu-item-has-children) > a:hover::before {
  transform: translateX(-50%) scaleY(1);
}

}
#hmenu-39
{
/* Target main menu links and links with a submenu, ignoring sub-menus */
.menu-list > li:not(.menu-item-has-children) > a,
.menu-list > li.menu-item-has-children > a {
  display: inline-block;
  transition: all 0.4s !important;
}

/* Increase letter-spacing on hover */
.menu-list > li:not(.menu-item-has-children) > a:hover,
.menu-list > li.menu-item-has-children > a:hover {
  letter-spacing: 4px;
}

}
#hmenu-40
{
.menu-list li a {
  display: inline-block;
  transition: all 0.4s !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
  background-size: 200% 100%;
  background-position: 100% 0;
}

.menu-list li a:hover {
  background-position: 0 0;
}

}
#hmenu-41
{
/* Oxygen-specific selector for navigation menu items */
.menu-list li a {
  display: inline-block;
  transition: all 0.4s !important;
}

/* Hover state for navigation menu items */
.menu-list li a:hover {
  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

}
#hmenu-42
{
/* Enable flexbox layout and align items to center for main menu items */
.menu-list > li {
  display: flex;
  align-items: center;
}

/* Styling for Oxygen top-level menu items and submenu toggle */
.menu-list > li:not(.sub-menu) > a,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a {
  display: inline-block;
  transition: all 0.8s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-element for background hover effect */
.menu-list > li:not(.sub-menu) > a::before,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  clip-path: circle(0 at center);
  transition: clip-path 0.8s;
  z-index: -1;
}

/* Hover state to reveal the circle background */
.menu-list > li:not(.sub-menu) > a:hover::before,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a:hover::before {
  clip-path: circle(100% at center);
}

}
#hmenu-43
{
/* Styling for Oxygen top-level menu items and submenu toggle */
.menu-list > li:not(.sub-menu) > a,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a {
  display: inline-block;
  transition: all 0.4s !important;
  position: relative;
}

/* Apply rotation on hover for top-level menu items and submenu toggle */
.menu-list > li:not(.sub-menu) > a:hover,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a:hover {
  transform: rotate(-10deg);
}

}
#hmenu-44
{
/* Main styling for Oxygen menu links */
.menu-list li a {
  display: inline-block;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;  /* Makes sure the ::before element doesn't spill over */
  z-index: 1;        /* Keeps the link text above the ::before element */
}

/* Hover effect for menu links */
.menu-list li a:hover {
  background-color: rgba(255, 255, 255, 0.1);  /* Add slight white background on hover */
  color:#000;
}

/* Before pseudo-element styling */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 0;           /* Initially hidden */
  height: 100%;       /* Full height of the link */
  background: #fff;   /* White background; adjust as needed */
  left: 0;
  top: 0;
  transition: all 0.4s;
  z-index: -1;        /* Place it below the text */
}

/* Hover effect for before pseudo-element */
.menu-list li a:hover::before {
  width: 100%;  /* Fill the full width on hover */
}

}
#hmenu-45
{
/* General link styling for top-level items and submenu toggles */
.menu-list > li:not(.sub-menu) > a,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a {
  display: inline-block;
  transition: all 0.4s !important;
  position: relative;
  border: 2px solid transparent !important;  /* Transparent border to avoid layout shift */
}

/* Hover effects for top-level items and submenu toggles */
.menu-list > li:not(.sub-menu) > a:hover,
.menu-list > li.menu-item-has-children:not(.sub-menu) > .brx-submenu-toggle > a:hover {
  border: 2px solid #fff !important;  /* White border on hover */
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2);  
  background-color: rgba(255, 255, 255, 0.1);  
}

}
#hmenu-46
{
/* Styling for menu links in Oxygen Builder */
.menu-list li a {
  display: inline-block;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}

/* Initial state for hover effect */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background: rgba(255, 255, 255, 0.3);  /* Change this color */
  left: 0;
  top: 0;
  transition: all 0.4s;
}

/* Hover state */
.menu-list li a:hover::before {
  height: 100%;
}

}
#hmenu-47
{
/* Styling for diagonal gradient hover effect on menu links */
.menu-list li a {
  display: inline-block;
  transition: all 0.4s !important;
  background-image: linear-gradient(45deg, #5B5B5B, #5B5B5B 50%, transparent 50%);
  background-size: 200% 200%;
}

/* Hover state to move the gradient */
.menu-list li a:hover {
  background-position: 100% 0;
}

}
#hmenu-48
{
/* Styling for menu links that do NOT have sub-menus. Pulse animation on hover */
.menu-list > li:not(.menu-item-has-children) > a {
  transition: all 0.3s ease;
  border-radius: 8px; /* Rounded corners */
  position: relative;
}

/* Style for the underline animation for menu links without sub-menus */
.menu-list > li:not(.menu-item-has-children) > a::after {
  content: "";
  position: absolute;
  width: 0;
  background-color: rgba(255, 255, 255, 0.4); /* Change color here if needed */
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.25em;
  height: 2px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover effect to activate the underline and pulse animation for menu links without sub-menus */
.menu-list > li:not(.menu-item-has-children) > a:hover::after {
  width: 100%;
  animation: pulsemenu 1s;
  box-shadow: 0 0 0 1em transparent;
}

/* Keyframe for pulse animation */
@keyframes pulsemenu {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 1em transparent;
  }
}

}
#hmenu-49
{
/* Styling for all menu links. Adds a top bar on hover */
.menu-list li a {
  transition: 0.4s;  
  position: relative;  
}

/* Style for the top bar */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%; 
  height: 0;  
  background-color: #ffffff;  /* Change color here */
  top: 0; 
  left: 0;  
  transition: height 0.4s;  
}

/* Hover effect to expand the top bar */
.menu-list li a:hover::before {
  height: 4px;  
}

}

#hmenu-50
{

.menu-list li a {
  transition: 0.4s;
  position: relative;
  display: flex;
  align-items: center;
}

/* Initial state of the underline */
.menu-list li a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 4px;
  bottom: 0;
  left: 50%;
  background-color: #ffffff; /* Change Color Here */
  transition: all 0.4s;
}

/* Hover state expands the underline */
.menu-list li a:hover::before {
  width: 100%;
  left: 0;
}

}