/* Uzair Digital shared header styles */
:root {
  --uzair-primary: #FFB400;
  --uzair-black: #000000;
  --uzair-white: #ffffff;
  --uzair-header-radius: 20px;
  --uzair-header-shadow: 0 18px 55px -24px rgba(0, 0, 0, 0.32);
}

header.fixed,
header.site-main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9000 !important;
  background: transparent !important;
  isolation: isolate;
}

#site-header {
  min-height: 0 !important;
}

#site-header *,
#site-footer *,
header.site-main-header *,
.site-main-footer * {
  box-sizing: border-box !important;
}

header.fixed > div,
header.site-main-header > div {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

header.fixed .glass,
header.site-main-header .glass {
  min-height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-top: 1rem !important;
  padding: 0.75rem 1.5rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  box-shadow: var(--uzair-header-shadow) !important;
}

header.fixed .glass > div:first-child,
header.site-main-header .glass > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
}

header.fixed .rounded-brand,
header.site-main-header .rounded-brand {
  border-radius: var(--uzair-header-radius) !important;
}

header.fixed a,
header.site-main-header a {
  color: var(--uzair-black);
  text-decoration: none;
}

header.fixed a[aria-label="Uzair Digital home"],
header.site-main-header a[aria-label="Uzair Digital home"] {
  font-family: "Manrope", "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

header.fixed a:hover,
header.fixed a[aria-current="page"],
header.site-main-header a:hover,
header.site-main-header a[aria-current="page"] {
  color: var(--uzair-primary) !important;
}

header.fixed .text-primary,
header.site-main-header .text-primary {
  color: var(--uzair-primary) !important;
}

header.fixed .btn-primary,
header.site-main-header .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--uzair-primary) !important;
  font-family: "Manrope", "Inter", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: var(--uzair-primary) !important;
  color: var(--uzair-black) !important;
  border-color: var(--uzair-primary) !important;
  box-shadow: 0 12px 30px -10px rgba(255, 180, 0, 0.75) !important;
}

header.fixed .btn-primary:hover,
header.site-main-header .btn-primary:hover {
  color: var(--uzair-black) !important;
  transform: translateY(-2px);
}

header.fixed #menuBtn,
header.site-main-header #menuBtn {
  background: var(--uzair-white);
  color: var(--uzair-black);
  border-color: rgba(17, 17, 17, 0.12);
}

header.fixed #menuBtn:hover,
header.site-main-header #menuBtn:hover {
  background: var(--uzair-primary) !important;
}

header.fixed #menuIcon,
header.site-main-header #menuIcon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111 !important;
  font-style: normal !important;
}

header.fixed #menuIcon::before,
header.site-main-header #menuIcon::before {
  content: "☰" !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

header.fixed #menuIcon.fa-xmark::before,
header.site-main-header #menuIcon.fa-xmark::before {
  content: "×" !important;
  font-size: 1.35rem !important;
}

header.fixed #mobileMenu,
header.site-main-header #mobileMenu {
  border-color: rgba(17, 17, 17, 0.08) !important;
}

header.fixed nav,
header.site-main-header nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(1.25rem, 2vw, 2rem) !important;
  font-family: "Manrope", "Inter", sans-serif !important;
}

header.fixed nav a,
header.site-main-header nav a {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

header.fixed #mobileMenu a,
header.site-main-header #mobileMenu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

header.fixed #mobileMenu a.btn-primary,
header.site-main-header #mobileMenu a.btn-primary {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

@media (min-width: 1024px) {
  header.fixed nav.hidden.lg\:flex,
  header.site-main-header nav.hidden.lg\:flex {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  header.fixed a.hidden.lg\:inline-flex,
  header.site-main-header a.hidden.lg\:inline-flex {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  header.fixed button.lg\:hidden,
  header.fixed #mobileMenu,
  header.site-main-header button.lg\:hidden,
  header.site-main-header #mobileMenu {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  header.fixed nav.hidden.lg\:flex,
  header.fixed a.hidden.lg\:inline-flex,
  header.site-main-header nav.hidden.lg\:flex,
  header.site-main-header a.hidden.lg\:inline-flex {
    display: none !important;
  }

  header.fixed button.lg\:hidden,
  header.site-main-header button.lg\:hidden {
    display: flex !important;
  }

  header.fixed #mobileMenu.hidden,
  header.site-main-header #mobileMenu.hidden {
    display: none !important;
  }

  header.fixed #mobileMenu:not(.hidden),
  header.site-main-header #mobileMenu:not(.hidden) {
    display: block !important;
  }

  header.fixed #mobileMenu nav,
  header.site-main-header #mobileMenu nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
}

@media (max-width: 768px) {
  header.fixed .glass,
  header.site-main-header .glass {
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 18px !important;
  }

  header.fixed #mobileMenu,
  header.site-main-header #mobileMenu {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.site-main-footer {
  margin-top: auto !important;
  background: #000 !important;
  color: #9ca3af !important;
  padding-top: 3.5rem !important;
  padding-bottom: 2rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: "Manrope", "Inter", sans-serif !important;
}

.site-main-footer > div {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.site-main-footer .grid {
  display: grid !important;
  gap: 2.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.site-main-footer .grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.site-main-footer p {
  margin-top: 0 !important;
}

.site-main-footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-main-footer li + li {
  margin-top: 0.75rem !important;
}

.site-main-footer h3,
.site-main-footer .text-primary {
  color: var(--uzair-primary) !important;
}

.site-main-footer a {
  color: inherit !important;
  text-decoration: none !important;
}

.site-main-footer a:hover {
  color: var(--uzair-primary) !important;
}

.site-main-footer .bg-primary {
  background: var(--uzair-primary) !important;
}

.site-main-footer button {
  border: 0 !important;
  cursor: pointer !important;
}

.site-main-footer [class*="rounded-full"] {
  border-radius: 999px !important;
}

.site-main-footer .flex {
  display: flex !important;
}

.site-main-footer .items-start {
  align-items: flex-start !important;
}

.site-main-footer .items-center {
  align-items: center !important;
}

.site-main-footer .justify-center {
  justify-content: center !important;
}

.site-main-footer .gap-3 {
  gap: 0.75rem !important;
}

.site-main-footer form {
  display: flex !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.site-main-footer input {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #fff !important;
  padding: 0.75rem 1rem !important;
}

.site-main-footer form button {
  background: var(--uzair-primary) !important;
  color: #000 !important;
  padding: 0.75rem 1rem !important;
  font-weight: 800 !important;
}

@media (max-width: 1023px) {
  .site-main-footer .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .site-main-footer .grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  header.fixed .glass,
  header.site-main-header .glass {
    max-width: calc(100vw - 18px);
  }

  header.fixed a[aria-label="Uzair Digital home"],
  header.site-main-header a[aria-label="Uzair Digital home"] {
    font-size: 1rem !important;
  }
}