:root {
  --green: #6dff00;
  --white: #f4f4f4;
  --black: #000;
}

.logo-placeholder {
  position: absolute;
  left: 3.45%;
  top: 3%;
  width: 6.7%;
  height: 8.7%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.logo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav {
  position: absolute;
  top: 3%;
  right: 2.8%;
  height: 5.1%;
  display: flex;
  align-items: center;
  gap: 3.6vw;
  z-index: 10;
}

.nav a {
  color: var(--white);
  text-decoration: none;
  font-size: mamp(9px, 1.05vw, 16px);
  font-weight: 500;
  white-space: nowrap;
  transition: 0.2s ease;
}

.nav a:hover {
  color: var(--green);
}

.nav-ticket {
  margin-left: 0.2vw;
  width: 12.5vw;
  min-width: 130px;
  max-width: 192px;
  height: 100%;
  border: 1px solid var(--green);
  color: var(--green) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-ticket:hover {
  background: var(--green);
  color: #000 !important;
}

@media (max-width: 900px) {
  .nav {
    gap: 2vw;
  }
  .nav-ticket {
    min-width: 120px;
  }
}

/* =========================================================
   MOBILE NAV — FINAL OVERRIDE
   ========================================================= */

.mobile-menu {
  display: none;
}

.mobile-menu-panel {
  display: none;
}


@media screen and (max-width: 600px) {

  /* -------------------------------------------------------
     NAV CONTAINER
     ------------------------------------------------------- */

  .nav {
    position: absolute !important;

    top: 16px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 40px !important;

    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 0 !important;

    z-index: 100 !important;
  }


  /* -------------------------------------------------------
     HIDE ALL DESKTOP NAV LINKS
     ------------------------------------------------------- */

  .nav > a {
    display: none !important;
  }


  /* -------------------------------------------------------
     HAMBURGER — TOP RIGHT
     ------------------------------------------------------- */

  .mobile-menu {
    display: flex !important;

    position: relative !important;

    width: 35px !important;
    height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--green) !important;

    background: transparent !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    cursor: pointer;

    z-index: 110 !important;
  }

  .mobile-menu span {
    display: block !important;

    width: 18px !important;
    height: 1px !important;

    margin: 0 !important;

    background: var(--green) !important;
  }


  /* -------------------------------------------------------
     LOGO — TOP LEFT
     ------------------------------------------------------- */

  .logo-placeholder {
    display: flex !important;

    position: absolute !important;

    top: 16px !important;
    left: 12px !important;

    right: auto !important;

    width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: transparent !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 110 !important;
  }

  .logo-placeholder img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }


  /* -------------------------------------------------------
     MOBILE MENU PANEL
     ------------------------------------------------------- */

  .mobile-menu-panel {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 28px !important;

    background: #000 !important;

    z-index: 200 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
      opacity 0.2s ease,
      visibility 0.2s ease !important;
  }


  /* OPEN MENU */

  .mobile-menu-panel.open {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
  }


  /* MENU LINKS */

  .mobile-menu-panel a {
    display: block !important;

    color: var(--white) !important;

    text-decoration: none !important;

    font-size: 22px !important;

    font-weight: 500 !important;
  }


  .mobile-menu-panel a:hover {
    color: var(--green) !important;
  }


  /* GET TICKETS INSIDE MENU */

  .mobile-menu-panel .mobile-ticket {
    display: flex !important;

    width: auto !important;
    min-width: 160px !important;

    height: auto !important;

    padding: 14px 35px !important;

    margin-top: 10px !important;

    border: 1px solid var(--green) !important;

    color: var(--green) !important;

    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-menu-panel .mobile-ticket {
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  background: transparent !important;

  padding: 14px 35px !important;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.mobile-menu-panel .mobile-ticket:hover {
  background: var(--green) !important;
  color: #000 !important;
  border-color: var(--green) !important;
}
/* =====================================================
   MOBILE MENU CLOSE BUTTON
   ===================================================== */

.mobile-menu-close {
  display: flex !important;

  position: absolute !important;

  top: 16px !important;
  right: 12px !important;

  width: 35px !important;
  height: 35px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid var(--green) !important;

  background: transparent !important;

  color: transparent !important;

  cursor: pointer;

  align-items: center !important;
  justify-content: center !important;

  z-index: 210 !important;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
  content: "";

  position: absolute;

  width: 18px;
  height: 1px;

  background: var(--green);

  left: 50%;
  top: 50%;
}

.mobile-menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-close:hover {
  background: var(--green) !important;
}

.mobile-menu-close:hover::before,
.mobile-menu-close:hover::after {
  background: #000;
}
}
@media screen and (max-width: 600px) {

  html,
  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Hide scrollbars on every element */

  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
  .nav a.active {
  color: var(--white);
  position: relative;
}

.nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--green);
}
.mobile-menu-panel a.active {
  color: var(--white);
  position: relative;
}

.mobile-menu-panel a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--green);
}