/* Logo */
.classy-navbar .nav-brand img {
  max-width: 130px;
}


/* Navbar Flex */
.classy-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Nav Links Desktop */
.classynav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  align-items: center;
}



.classynav ul li a {
  font-family: 'Exo 2', 'Archivo Narrow', sans-serif;
  /* modern geometric font */
  font-weight: 600;
  /* medium-bold for visibility */
  letter-spacing: 0.5px;
  /* subtle spacing for elegance */
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 18px;
  display: block;
  transition: all 0.3s ease;

}


/* Dropdown Menu Desktop */
.classynav ul li {
  position: relative;
}

.classynav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  z-index: 4000;
}

.classynav ul li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.classynav ul li ul li a {
  display: block;
  padding: 10px 20px;
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease;
  font-family: 'Exo 2', 'Archivo Narrow', sans-serif;
  letter-spacing: 0.4px;
  font-size: 16px;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.9);
}



/* Hamburger Toggler Desktop & Mobile */
.classy-navbar-toggler {
  width: 30px;
  /* match old hamburger */
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4000;
  position: relative;

}


.bb8-toggle__container {
  width: 100%;
  height: 100%;
  transform: scale(0.5);
  /* scale down BB8 to fit */
  transform-origin: top left;
  transition: transform 0.3s ease;
}

.bb8-toggle__scenery {
  display: none;
  transform: scale(1);
}



/* BB8 animation when menu is open */
.bb8-toggle__checkbox:checked+.bb8-toggle__container .bb8__head {
  animation: bb8-head-spin 1s infinite linear;
}

.bb8-toggle__checkbox:checked+.bb8-toggle__container .bb8-toggle__star {
  animation: bb8-star-twinkle 2s infinite alternate;
}

/* Keyframes for head rotation */
@keyframes bb8-head-spin {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Keyframes for twinkling stars */
@keyframes bb8-star-twinkle {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

.classy-navbar-toggler span {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 0px;
  transition: all 0.4s ease;
}

/* Hamburger Animation */
.classy-navbar-toggler.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.classy-navbar-toggler.active span:nth-child(2) {
  opacity: 0;
}

.classy-navbar-toggler.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ===========================
   Mobile Navbar Enhancements
=========================== */
/* ===============================
   Awe-Inspiring Mobile Navbar
=============================== */
@media (max-width: 991px) {

  /* BB8 / toggle container */
  .classy-navbar-toggler {
      display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 99999;
    padding: 6px;

    /* remove the unwanted box */
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  /* Hamburger lines */
  .classy-navbar-toggler span {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 3px;
    transition: all 0.4s ease;
  }

  /* Hamburger morph into X */
  .classy-navbar-toggler.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .classy-navbar-toggler.active span:nth-child(2) {
    opacity: 0;
  }

  .classy-navbar-toggler.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Mobile menu container: glass effect, unique shape */
  .classy-menu {
    position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-20px);
width: 85%;
max-width: 360px;

/* Oceanic gradient glass */
background: linear-gradient(
    135deg,
    rgba(0, 200, 255, 0.6),
    rgba(0, 50, 200, 0.5),
    rgba(0, 255, 150, 0.4)
);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);

/* Liquid wavey corners */
border-radius: 45% 55% 65% 35% / 55% 35% 65% 45%;

border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 15px 50px rgba(0, 255, 200, 0.3),
  0 0 70px rgba(0, 100, 255, 0.4),
  inset 0 0 30px rgba(255, 255, 255, 0.15);

padding: 35px 25px;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 99999;


  }

  .classy-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Nav list: vertical, aligned */
  .classynav ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .classynav ul li {
    position: relative;
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
    transition: all 0.5s ease;
  }

  /* Staggered appearance */
  .classy-menu.active .classynav ul li:nth-child(1) {
    transition-delay: 0.05s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .classy-menu.active .classynav ul li:nth-child(2) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .classy-menu.active .classynav ul li:nth-child(3) {
    transition-delay: 0.15s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .classy-menu.active .classynav ul li:nth-child(4) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .classy-menu.active .classynav ul li:nth-child(5) {
    transition-delay: 0.25s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .classy-menu.active .classynav ul li:nth-child(6) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  /* Links: glass neon effect */
  .classynav ul li a {
    font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif;
    color: #ffffff;
    padding: 12px 0;
    display: block;
    transition: all 0.3s ease;
    border-radius: 12px;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
  }

  .classynav ul li a:hover {
    transform: scale(1.05);
  }

  /* Submenus: soft glow inside menu */
  .classynav ul li ul {
    display: none;
    flex-direction: column;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(4px);
  }

  .classynav ul li.active>ul {
    display: flex;
  }

  .classynav ul li ul li a {
    font-size: 16px;
    padding: 8px 16px;
    color: #ffffff;
  }
}


@media (min-width: 992px) {
  .classy-navbar-toggler {
    display: none !important;
    /* Never show on desktop */
  }
}