body {
  overflow-x: hidden;
}
span.ast-icon.icon-arrow {
  background-color: #000000;
 border: unset;
 font-size: 2vw;
 bottom: 3vh;
 position: relative;
 padding: 15px;
 right: 3vw;
 border-radius: 40vw;
}
#menu_1 {
  z-index: 999;
  top: 6vh;
  left: 39vw;
  font-family: 'NovaFontbold';
  font-size: 20px;
}
.menu_2 {
  position: absolute;
  z-index: 99;
  bottom: 0vh;
  left: -1vw;
  font-family: 'NovaFontbold';
  font-size: 24px;
  background: #000000;
  width: 101vw;
  height: 5vh;
  padding-top: 1vh;
}
section#home, #intro {
  height: 100vh;
  border-bottom: unset;
}
div.menu_2 > ul > li > a {
  color: #ffffff;
  padding: 5px 30px;
}
	/* Reset default list styles */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style for horizontal menu */
ul.horizontal-menu {
  display: flex; /* Use flexbox for horizontal layout */
}

ul.horizontal-menu li::after {
  margin-right: 20px; /* Adjust spacing between menu items */
}

/* Optional: Style for menu item links */
ul.horizontal-menu li a {
    color: #000000;
    padding: 5px 10px;
}

/* Optional: Style for menu item hover state */
ul.horizontal-menu li a:hover {
    color: #EC5601;
}
li {display: inline;}
.li_1, .li_2, .li_3, .li_4 {
  opacity: 0;
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
  font-size: 2vw;
  margin-left: 2vw;
}
.li_2  {
  animation-delay: 2s;
}
.li_3  {
  animation-delay: 2.5s;
}
.li_4  {
  animation-delay: 3s;
}

@media (max-width : 2000px){
#menu_1 {
            position: absolute;
        }
    }
/*  END MENU 1 */
 
/*****  HAMDUGER HERE  *******/
div#trading_menu, div#arbitrage_menu, div#technology_menu, div#purchasing_menu {
  position: absolute;
  right: 0vw;
  width: 100vw;
  top: -2vh;
}
button.menu__toggle.r-button {
  background: #000000;
  border-radius: 0 0 35px 35px !important;
  transform: scale(0.7);
  opacity: 1;
  transition: opacity 1s ease;
}
button.menu__toggle.r-button.opened {
  all: unset;
  background: #000000;
border: #ffffff;
transform: scale(0.7);
cursor: pointer;
}

.r-button {
  background-color: transparent;
  padding: 0;
  border-width: 0;
  border-style: unset;
  border-color: var(--uirButtonBorderColor);
  cursor: pointer;
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
a.r-link {
    display: inline-flex !important;
    font-family: 'NovaFontbold';
    text-decoration: none !important;
    margin-bottom: 3vh;
    color: #ffffff;
}
.r-list {
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}
ul.menu__list.r-list {
    left: 4vw;
    position: relative;
}
.the_menu {
  position: relative;
  z-index: 10000; /* Set a high z-index value */
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  left: 92vw;
}


#trading_background {
  /* Adjust background styles as needed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Set a lower z-index value than the menu */
}

.menu__nav {
    box-sizing: border-box;
    width: 100%;
    height: 0;
    opacity: 0;
    display: flex;
    align-items: flex-end;
    z-index: 2;
    position: absolute;
    top: 2vh;
    background: #000000;
    height: 9vh;
    right: -101vw; /* Move the menu outside the viewport initially */
    transition: right 1.3s ease, opacity 1.3s ease-out; /* Smooth transition effect */
}
.menu_activated .menu__nav {
  opacity: 1;
  width: 102vw;
  right: -2vw !important;
  height: 9vh;
  opacity: 1;
  z-index: 0;
}
.menu__toggle {
    position: relative;
    z-index: 1;
    transition: opacity 1.3s ease; /* Smooth transition effect for opacity */
}

.menu__toggle.fade-out {
    opacity: 0;
}

.menu__toggle::before { /* behind menu svg toggle */
  content: "";
  width: 1em;
  height: 1em;
  font-size: 3rem;
  border-radius: 10%;
  position: absolute;
  bottom: 24px;
  left: calc(50% - .5em);
  z-index: -1;
  will-change: width, height;
  transition: transform 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
  width 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
  height 1s cubic-bezier(0.04, -0.1, 0.29, 0.98);
  padding:20px;
}

.menu__toggle:focus {
  outline: none;
  outline-offset: var(--menuHaburgerOutlineOffset, 5px);
}

.menu_activated .menu__toggle::before {
  width: 100vmax;
  height: 100vmax;
  opacity: 1;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
  transition-duration: 1s;
  transition: opacity 0s ease; 
}

.the_menu:not(.menu_activated) .menu__list {

}

.menu_activated .m-hamburger::before {
  top: 70%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .m-hamburger::after {
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}

.menu_activated .m-hamburger__label {
  transform: rotate(-45deg) translate3d(-.285em, -.3em, 0);
  opacity: 0;
}

.page__name {
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

.page__hint {
  display: block;
  line-height: 1.45;
  margin-top: 1rem;
}
.menu__group {
  padding: .5rem 2rem;
  font-size: 2vw;
  font-weight: 700;
  text-transform: none;
  font-family: 'Gloss and Bloom';
  letter-spacing: 2px;
  margin-left: 5vw;
}
.line {
  fill: none;
  stroke: white;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 8;
  stroke-linecap: round;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 8;
  stroke-linecap: round;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 8;
  stroke-linecap: round;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 8;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 8;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 8;
}
section {
  width: 100vw;
  height: 100vh;
  background: blue;
  border-bottom: 5px solid black;
}
