.menu-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  padding: 5px 0;
}

.slides {
  display: flex;
  transition: transform 0.3s ease;
  align-items: flex-start;
}

.menu-container .slides {
  --slide-transition-speed: 0.5s;
  --height-transition-speed: 0.6s;
  transition: transform var(--slide-transition-speed)
      cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height var(--height-transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body:not(.elementor-editor-active) .menu-container:not(.js-loaded) .slides {
  position: relative;
}
body:not(.elementor-editor-active) .menu-container:not(.js-loaded) .slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
body:not(.elementor-editor-active)
  .menu-container:not(.js-loaded)
  .slide:first-child {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

.slide {
  display: grid;
  gap: 10px 0;
  min-width: 100%;
}

.menu-item {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item a {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  --oea-hover-animation-duration: 0.3s;
  --oea-hover-animation-delay: 0s;
  transition: transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s),
    opacity var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    box-shadow var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect="oea-hover-lift"]:hover {
  transform: translateY(-5px);
  transition: transform var(--oea-hover-animation-duration, 0.5s) ease
    var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect="oea-hover-grow"]:hover {
  transform: scale(1.07);
  transition: transform var(--oea-hover-animation-duration, 0.5s) ease
    var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect="oea-hover-rotate"]:hover {
  transform: rotate(7deg);
  transition: transform var(--oea-hover-animation-duration, 0.5s) ease
    var(--oea-hover-animation-delay, 0s);
}



.menu-item a[data-hover-effect] .menu-icon {
  transition: color var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect] .menu-icon svg {
  transition: fill var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect] .menu-icon .menu-image {
  transition: transform var(--oea-hover-animation-duration, 0.3s)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-item a[data-hover-effect] .menu-title {
  transition: color var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-icon {
  font-size: 40px;
  margin-bottom: 5px;
  --oea-hover-animation-duration: 0.3s;
  --oea-hover-animation-delay: 0s;
  transition: color var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
  line-height: 1;
}

.menu-icon svg {
  width: 40px;
  height: 40px;
  --oea-hover-animation-duration: 0.3s;
  --oea-hover-animation-delay: 0s;
  transition: fill var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-icon .menu-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  --oea-hover-animation-duration: 0.3s;
  --oea-hover-animation-delay: 0s;
  transition: transform var(--oea-hover-animation-duration, 0.3s)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.menu-title {
  font-size: 14px;
  --oea-hover-animation-duration: 0.3s;
  --oea-hover-animation-delay: 0s;
  transition: color var(--oea-hover-animation-duration, 0.3s) ease
      var(--oea-hover-animation-delay, 0s),
    transform var(--oea-hover-animation-duration, 0.3s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--oea-hover-animation-delay, 0s);
}

.dots {
  text-align: center;
  margin-top: 15px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--oea-dots-color, #ccc);
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dot.active {
  background: var(--oea-dots-active-color, #555);
  transform: scale(1.2);
}

@media (hover: hover) and (min-width: 1025px) {
  .dot:hover {
    transform: scale(1.1);
    background: var(--oea-dots-hover-color, #999);
  }
}

.oea-dots-style-rounded .dot {
  border-radius: 8px;
  background: var(--oea-dots-color, #ccc);
}

.oea-dots-style-rounded .dot.active {
  background: var(--oea-dots-active-color, #555);
}

.oea-dots-style-square .dot {
  border-radius: 0;
  background: var(--oea-dots-color, #ccc);
}

.oea-dots-style-square .dot.active {
  background: var(--oea-dots-active-color, #555);
}

.oea-dots-style-diamond .dot {
  border-radius: 0;
  background: var(--oea-dots-color, #ccc);
  transform: rotate(45deg);
}

.oea-dots-style-diamond .dot.active {
  background: var(--oea-dots-active-color, #555);
  transform: rotate(45deg) scale(1.2);
}

@media (hover: hover) and (min-width: 1025px) {
  .oea-dots-style-rounded .dot:hover {
    background: var(--oea-dots-hover-color, #999);
  }

  .oea-dots-style-square .dot:hover {
    background: var(--oea-dots-hover-color, #999);
  }

  .oea-dots-style-diamond .dot:hover {
    background: var(--oea-dots-hover-color, #999);
    transform: rotate(45deg) scale(1.1);
  }
}



body:not(.elementor-editor-active) .menu-container:not(.js-loaded) {
  opacity: 0;
}

body:not(.elementor-editor-active) .menu-container.js-loaded {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.elementor-editor-active .menu-container {
  opacity: 1 !important;
}

body:not(.elementor-editor-active) .menu-container:not(.js-loaded) .dots {
  display: none;
}

@media (max-width: 1024px) and (min-width: 768px) {
  body:not(.elementor-editor-active)
    .menu-container:not(.js-loaded)
    .slide
    .menu-item:nth-child(n + var(--tablet-limit, 999)) {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body:not(.elementor-editor-active)
    .menu-container:not(.js-loaded)
    .slide
    .menu-item:nth-child(n + var(--mobile-limit, 999)) {
    display: none !important;
  }
}

.menu-container.v2-css-driven .slide {
  display: none;
}

.menu-container.v2-css-driven .slide-desktop {
  display: grid;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .menu-container.v2-css-driven .slide-desktop,
  .menu-container.v2-css-driven .slide-mobile {
    display: none;
  }
  .menu-container.v2-css-driven .slide-tablet {
    display: grid;
  }
}

@media (max-width: 767px) {
  .menu-container.v2-css-driven .slide-desktop,
  .menu-container.v2-css-driven .slide-tablet {
    display: none;
  }
  .menu-container.v2-css-driven .slide-mobile {
    display: grid;
  }
}

.menu-container.v2-css-driven .slides {
  transition: transform var(--slide-transition-speed, 0.5s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height var(--height-transition-speed, 0.6s)
      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-container.v2-css-driven .menu-item {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-container.v2-css-driven .menu-icon {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s ease;
}

.menu-container.v2-css-driven .menu-title {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.3s ease, opacity 0.3s ease;
}

.menu-container .menu-item {
  opacity: 1;
  transform: none;
}

body:not(.elementor-editor-active)
  .menu-container.oea-animate-on-scroll
  .menu-item {
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  animation-play-state: paused;
}

.elementor-editor-active .menu-container.oea-animate-on-scroll .menu-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-fade-in {
  animation: fadeIn forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-fade-in-up {
  animation: fadeInUp forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-fade-in-down {
  animation: oeaFadeInDown forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-fade-in-left {
  animation: oeaFadeInLeft forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-fade-in-right {
  animation: oeaFadeInRight forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-zoom-in {
  animation: oeaZoomIn forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-bounce-in {
  animation: bounceIn forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-flip-in {
  animation: oeaFlipIn forwards;
  animation-play-state: paused;
}

.menu-container.oea-animate-on-scroll .menu-item.oea-rotate-in {
  animation: oeaRotateIn forwards;
  animation-play-state: paused;
}

@media (max-width: 767px) {
  .oea-disable-load-animation-mobile .menu-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .oea-disable-load-animation-mobile .menu-item a {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .oea-disable-load-animation-mobile .menu-icon,
  .oea-disable-load-animation-mobile .menu-icon svg,
  .oea-disable-load-animation-mobile .menu-icon .menu-image,
  .oea-disable-load-animation-mobile .menu-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .oea-disable-load-animation-mobile .menu-item.oea-fade-in,
  .oea-disable-load-animation-mobile .menu-item.oea-fade-in-up,
  .oea-disable-load-animation-mobile .menu-item.oea-fade-in-down,
  .oea-disable-load-animation-mobile .menu-item.oea-fade-in-left,
  .oea-disable-load-animation-mobile .menu-item.oea-fade-in-right,
  .oea-disable-load-animation-mobile .menu-item.oea-zoom-in,
  .oea-disable-load-animation-mobile .menu-item.oea-bounce-in,
  .oea-disable-load-animation-mobile .menu-item.oea-flip-in,
  .oea-disable-load-animation-mobile .menu-item.oea-rotate-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

@media (max-width: 767px) {
  .oea-disable-hover-animation-mobile .menu-item a {
    transition: transform 0s, opacity 0s, box-shadow 0s !important;
  }

  .oea-disable-hover-animation-mobile .menu-icon,
  .oea-disable-hover-animation-mobile .menu-icon svg,
  .oea-disable-hover-animation-mobile .menu-icon .menu-image,
  .oea-disable-hover-animation-mobile .menu-title {
    transition: color 0s, fill 0s, transform 0s !important;
  }

  .oea-disable-hover-animation-mobile .menu-item a[data-hover-effect]:hover {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect]:hover
    .menu-icon,
  .oea-disable-hover-animation-mobile
    .menu-item
    a:not([data-hover-effect]):hover
    .menu-icon {
    color: var(--oea-icon-color, #444) !important;
  }

  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect]:hover
    .menu-icon
    svg,
  .oea-disable-hover-animation-mobile
    .menu-item
    a:not([data-hover-effect]):hover
    .menu-icon
    svg {
    fill: var(--oea-icon-color, #444) !important;
  }

  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect]:hover
    .menu-title,
  .oea-disable-hover-animation-mobile
    .menu-item
    a:not([data-hover-effect]):hover
    .menu-title {
    color: var(--oea-title-color, #333) !important;
  }

  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-lift"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-grow"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-rotate"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-rotate-ccw"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-shadow-pop"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-glow-main"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-pulse-gentle"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-shake-gentle"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-float-gentle"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-fade"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-skew"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-flip"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-wobble"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-tada"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-swing"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-rubberband"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-heartbeat"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-jello"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-bounce"]:hover,
  .oea-disable-hover-animation-mobile
    .menu-item
    a[data-hover-effect="oea-hover-flash"]:hover {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
}

.oea-icon-menu-wrapper {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.navigation-arrows {
  position: absolute;
  top: 50%;
  left: -24px;
  right: -24px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
  display: none;
  transition: top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--oea-dots-color, #ccc);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: none;
}

.nav-arrow-prev {
  left: 0;
}

.nav-arrow-next {
  right: 0;
}

.nav-arrow svg {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-arrow:disabled svg {
  transform: none;
}

@media (min-width: 1025px) {
  .oea-show-arrows .navigation-arrows {
    display: block;
  }
}

@media (hover: hover) and (min-width: 1025px) {
  .nav-arrow:hover {
    color: var(--oea-dots-hover-color, #999);
    transform: translateY(-50%) scale(1.3);
  }

  .nav-arrow:hover svg {
    transform: scale(1.2);
  }

  .nav-arrow:active {
    transform: translateY(-50%) scale(1.1);
  }

  .nav-arrow:disabled:hover {
    color: var(--oea-dots-color, #ccc);
    transform: translateY(-50%);
  }

  .nav-arrow:disabled:hover svg {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .navigation-arrows {
    display: none !important;
  }
}
