/* =========================================================
   NOVALIGN MOBILE MENU — same soft style as doctype.html
   Works with: .hamburger, .nav-hamburger, .nav-burger, .mb
   ========================================================= */

.hamburger,
.nav-hamburger,
.nav-burger,
.mb {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  z-index: 10002;
}

.hamburger span,
.nav-hamburger span,
.nav-burger span,
.mb span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform .3s ease, opacity .3s ease;
}

.hamburger.open span:nth-child(1),
.nav-hamburger.open span:nth-child(1),
.nav-burger.open span:nth-child(1),
.mb.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2),
.nav-hamburger.open span:nth-child(2),
.nav-burger.open span:nth-child(2),
.mb.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3),
.nav-hamburger.open span:nth-child(3),
.nav-burger.open span:nth-child(3),
.mb.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Full screen drawer */
.mobile-menu {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(7, 28, 52, .97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 82px 28px 38px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-12px) !important;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease !important;
}

.mobile-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Top part: centered logo + small close button */
.mobile-menu-top {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
}

.mobile-menu-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.mobile-menu-logo img {
  width: 220px !important;
  max-width: 72vw !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.mobile-close {
  position: fixed !important;
  top: 18px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 10003 !important;
}

/* Hide the extra big brand text to match the doctype.html menu */
.mobile-menu-brand {
  display: none !important;
}

.mobile-menu-links,
.mobile-menu ul {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 30px !important;
  margin: 0 !important;
}

.mobile-menu-links a,
.mobile-menu ul li a,
.mobile-menu > a:not(.mobile-menu-logo):not(.mobile-menu-cta) {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  text-align: center !important;
  padding: 15px 18px !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: 'Syne', 'DM Sans', 'Cairo', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.mobile-menu-links a:hover,
.mobile-menu ul li a:hover,
.mobile-menu > a:not(.mobile-menu-logo):not(.mobile-menu-cta):hover {
  background: rgba(43, 191, 206, .15) !important;
  color: var(--teal-light, #2BBFCE) !important;
}

.mobile-menu-cta,
.mobile-menu .mob-cta,
.mobile-menu .m-cta,
.mobile-menu .m-wa {
  margin-top: 16px !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: min(86vw, 420px) !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, var(--teal, #1A7A8A), var(--teal-light, #2BBFCE)) !important;
  color: #ffffff !important;
  padding: 16px 34px !important;
  border-radius: 50px !important;
  font-family: 'Syne', 'DM Sans', 'Cairo', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 25px rgba(26, 122, 138, .40) !important;
  border: 0 !important;
}

body.menu-open {
  overflow: hidden !important;
}

@media (max-width: 1024px) {
  .hamburger,
  .nav-hamburger,
  .nav-burger,
  .mb {
    display: flex !important;
  }

  .nav-links,
  nav > .nav-cta,
  .nl {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .mobile-menu {
    padding: 76px 20px 32px !important;
  }

  .mobile-menu-logo img {
    width: 190px !important;
    max-width: 70vw !important;
  }

  .mobile-menu-links,
  .mobile-menu ul {
    gap: 4px !important;
    padding: 0 14px !important;
  }

  .mobile-menu-links a,
  .mobile-menu ul li a,
  .mobile-menu > a:not(.mobile-menu-logo):not(.mobile-menu-cta) {
    font-size: 17px !important;
    padding: 13px 14px !important;
  }

  .mobile-menu-cta,
  .mobile-menu .mob-cta,
  .mobile-menu .m-cta,
  .mobile-menu .m-wa {
    min-width: 240px !important;
    padding: 15px 28px !important;
    font-size: 15px !important;
  }

  .mobile-close {
    top: 14px !important;
    right: 16px !important;
    font-size: 38px !important;
  }
}