$glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.25)
$glass-border: 1px solid rgba(255, 255, 255, 0.12)
$text-light: #ffffff
$text-muted: #cbd5e1
$blue-accent: #3b82f6

@keyframes shineBorder
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%

.custom_container_fluid
  width: 100% !important
  max-width: 1920px !important
  margin: 0 auto !important
  padding: 0 !important
  @include phone
    overflow: hidden !important
  @media (min-width: 1920px)
    max-width: 2560px !important
  @media (min-width: 2560px)
    max-width: 3840px !important
  @media (min-width: 3840px)
    max-width: 5120px !important
  @media (min-width: 5120px)
    max-width: 7680px !important

.common_container
  width: 98% !important
  max-width: none !important
  margin: 0 auto !important
  @include phone
    width: 100% !important
  @media (min-width: 1920px)
    width: 98% !important
  @media (min-width: 2560px)
    width: 88% !important
  @media (min-width: 3840px)
    width: 85% !important
  @media (min-width: 5120px)
    width: 80% !important

.lg-layer
  border-radius: inherit !important
  transform: translate3d(0, 0, 0)
  -webkit-transform: translate3d(0, 0, 0)
  backface-visibility: hidden
  -webkit-backface-visibility: hidden

.site_header
  position: fixed
  top: 20px
  left: 0
  width: 100%
  z-index: 999
  transition: top 0.4s ease
  &.is_expanded
    .navbar
      border-bottom-left-radius: 0 !important
      border-bottom-right-radius: 0 !important
      border-bottom-color: transparent !important
      .lg-layer
        border-bottom-left-radius: 0 !important
        border-bottom-right-radius: 0 !important
      &::before
        clip-path: polygon(-10% -10%, 110% -10%, 110% calc(100% - 1px), -10% calc(100% - 1px))

.navbar
  background: transparent !important
  border: $glass-border
  border-radius: 16px
  display: flex
  justify-content: space-between
  align-items: center
  height: 80px
  padding: 0 32px
  position: relative
  box-shadow: $glass-shadow
  transition: border-radius 0.3s ease, border-color 0.3s ease
  z-index: 10
  box-sizing: border-box
  isolation: isolate
  @include desktop
    height: 65px
  > *
    position: relative
    z-index: 5
  @media (max-width: 1024px)
    padding: 0 20px
    height: 70px
    width: 96%
    margin: 0 auto

.brand_logo
  display: flex
  align-items: center
  gap: 12px
  color: $text-light
  font-size: 1.5rem
  font-weight: 700
  text-decoration: none
  flex-shrink: 0
  position: relative
  z-index: 10
  img
    width: auto
    height: 3rem
    min-width: 40px

.nav_links
  display: flex
  list-style: none
  gap: 2.5rem
  margin: 0
  padding: 0
  height: 100%
  align-items: center
  position: static
  z-index: 5
  > *
    position: relative
    z-index: 5
  @media (max-width: 1024px)
    display: block !important
    position: fixed
    top: 87px
    left: 2%
    right: 2%
    width: 96vw
    max-height: calc(100vh - 110px)
    overflow-y: auto
    background: transparent !important
    padding: 1.5rem 20px 8rem 20px !important
    border-radius: 16px
    opacity: 0
    visibility: hidden
    transform: translateY(-10px) translate3d(0, 0, 0)
    -webkit-transform: translateY(-10px) translate3d(0, 0, 0)
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s
    box-sizing: border-box
    isolation: isolate
    &.is_mobile_open
      opacity: 1
      visibility: visible
      transform: translateY(0) translate3d(0, 0, 0) !important
      -webkit-transform: translateY(0) translate3d(0, 0, 0) !important
      border: $glass-border !important
      box-shadow: $glass-shadow !important
      border-top-left-radius: 0 !important
      border-top-right-radius: 0 !important
      border-top-color: transparent !important
      overflow: hidden !important
      .lg-layer
        border-top-left-radius: 0 !important
        border-top-right-radius: 0 !important
        z-index: -1 !important
        transform: scale(1.1) translate3d(0, 0, 0) !important
        -webkit-transform: scale(1.1) translate3d(0, 0, 0) !important
      &::before
        content: ""
        position: absolute
        inset: 0
        border-radius: inherit
        padding: 1px
        background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.5) 50%, transparent 52%)
        background-size: 300% 300%
        animation: shineBorder 8s linear infinite
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
        -webkit-mask-composite: xor
        mask-composite: exclude
        pointer-events: none
        z-index: 3

.nav_item
  display: flex
  align-items: center
  height: 100%
  position: static !important
  @media (max-width: 1024px)
    display: block !important
    height: auto !important
    width: 100% !important
    padding: 0 !important
    margin: 0 !important
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
  .nav_link
    color: $text-light
    text-decoration: none
    font-size: 1.25rem
    font-weight: 500
    display: flex
    align-items: center
    gap: 6px
    cursor: pointer
    position: relative
    width: 100% !important
    justify-content: space-between
    padding: 8px 0
    box-sizing: border-box
    @include desktop
      font-size: 1rem !important
    @media (max-width: 1024px)
      padding: 18px 0 !important
      font-size: 1.1rem !important
    &::after
      content: ""
      position: absolute
      bottom: 0
      left: 50%
      width: 0
      height: 2px
      background-color: $text-light
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
      transform: translateX(-50%)
    @media (min-width: 1025px)
      &:hover, &.is_active
        &::after
          width: 100%
    .dropdown_arrow
      font-size: 0.8rem
      transition: transform 0.3s ease
      @media (max-width: 1024px)
        font-size: 1.5rem !important
  &.has_mega_menu:hover .dropdown_arrow
    @media (min-width: 1025px)
      transform: rotate(180deg)

.mega_menu
  position: absolute
  top: 100%
  left: 0 !important
  right: 0 !important
  width: 100% !important
  background: transparent !important
  border: $glass-border
  border-top: none
  border-radius: 0 0 16px 16px !important
  padding: 3rem 3rem
  box-shadow: $glass-shadow
  z-index: 5
  box-sizing: border-box
  isolation: isolate
  visibility: hidden
  opacity: 0
  transform: translateY(15px) translate3d(0, 0, 0)
  -webkit-transform: translateY(15px) translate3d(0, 0, 0)
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)
  pointer-events: none
  > *
    position: relative
    z-index: 5
  &::before
    content: ""
    position: absolute
    inset: 0
    border-radius: inherit
    padding: 1px
    background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.5) 50%, transparent 52%)
    background-size: 300% 300%
    animation: shineBorder 8s linear infinite reverse
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
    -webkit-mask-composite: xor
    mask-composite: exclude
    pointer-events: none
    z-index: 3
    clip-path: polygon(-10% 1px, 110% 1px, 110% 110%, -10% 110%)
  &.is_open
    visibility: visible !important
    opacity: 1 !important
    transform: translateY(0) translate3d(0, 0, 0) !important
    -webkit-transform: translateY(0) translate3d(0, 0, 0) !important
    pointer-events: auto !important
  @media (max-width: 1024px)
    position: static !important
    display: none
    width: 100% !important
    height: 0
    opacity: 0
    overflow: hidden
    padding: 0 !important
    margin: 0 !important
    box-shadow: none !important
    border: none !important
    border-radius: 0 !important
    pointer-events: auto !important
    visibility: visible !important
    background: transparent !important
    transform: translate3d(0, 0, 0) !important
    -webkit-transform: translate3d(0, 0, 0) !important
    transition: none !important
    &::before
      display: none !important
    &.is_mobile_expanded
      display: block !important
      height: auto !important
      opacity: 1 !important
  .mega_inner_container
    display: flex
    gap: 4rem
    padding: 0
    position: relative
    z-index: 5
    @media (max-width: 1024px)
      display: block !important
      padding: 0.5rem 0 1.5rem 0 !important
      margin: 0 !important
  .mega_sidebar
    flex: 0 0 400px
    @media (max-width: 1024px)
      display: block !important
      width: 100% !important
    ul
      list-style: none
      padding: 0
      margin: 0
      li
        display: flex
        align-items: center
        color: rgba(255, 255, 255, 0.6)
        font-weight: 700
        font-size: 2.5rem !important
        padding: 14px 0
        cursor: pointer
        transition: all 0.3s ease
        position: relative
        @media (max-width: 1024px)
          display: block !important
          width: 100% !important
          padding: 0 !important
          margin: 0 !important
          border-bottom: 1px solid rgba(255, 255, 255, 0.08)
        .scramble_text
          @media (max-width: 1024px)
            display: flex !important
            width: 100% !important
            justify-content: space-between
            align-items: center
            padding: 16px 0 !important
            color: $text-light !important
            font-size: 1.15rem !important
            cursor: pointer
            &::after
              content: "+"
              font-size: 1.8rem
              font-weight: 300
              color: $text-light
        &::before
          content: ""
          display: block
          width: 0
          height: 3px
          background-color: $text-light
          margin-right: 0
          opacity: 0
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
          @media (max-width: 1024px)
            display: none !important
        &:hover, &.active
          @media (min-width: 1025px)
            color: $text-light
            &::before
              width: 24px
              margin-right: 12px
              opacity: 1
        &.is_mobile_active
          .scramble_text::after
            content: "-"
            font-size: 2.2rem
            line-height: 0.5
            color: $text-light
          .mega_content
            display: block !important
            padding-top: 1rem !important
  .mega_content
    flex: 1
    @media (max-width: 1024px)
      display: none
      width: 100% !important
      overflow: hidden
      padding: 0.5rem 0 1.5rem 0 !important
    .content_header
      margin-bottom: 2.5rem
      @media (max-width: 1024px)
        margin-bottom: 1rem !important
        margin-top: 0 !important
      h3
        color: $text-light !important
        margin: 0 0 8px 0
        font-weight: 600
        font-size: 1.875rem !important
        @media (max-width: 1024px)
          font-size: 1.35rem !important
      p
        color: $text-muted
        margin: 0
        font-size: 1.25rem !important
        @media (max-width: 1024px)
          font-size: 0.95rem !important
    .cards_grid
      display: grid
      grid-template-columns: repeat(3, 1fr)
      grid-template-rows: repeat(2, auto)
      gap: 1.2rem
      @media (max-width: 1024px)
        grid-template-columns: 1fr !important
        grid-template-rows: auto !important
        gap: 1rem !important
      .mega_card_link
        text-decoration: none
        display: block
        &.normal_card
          grid-column: span 1
        &.explore_wrapper
          grid-column: 3
          grid-row: 1 / span 2
          @media (max-width: 1024px)
            grid-column: 1 !important
            grid-row: auto !important
      .mega_card
        background: rgba(255, 255, 255, 0.08)
        backdrop-filter: blur(12px) saturate(160%)
        -webkit-backdrop-filter: blur(12px) saturate(160%)
        border: 1px solid rgba(255, 255, 255, 0.18)
        border-radius: 12px
        padding: 1.8rem
        height: 100%
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        box-sizing: border-box
        @media (max-width: 1024px)
          padding: 1.2rem !important
        &:hover
          background-color: rgba(255, 255, 255, 0.15)
          border-color: rgba(255, 255, 255, 0.4)
          transform: scale(1.03)
          box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3)
          @media (max-width: 1024px)
            transform: none !important
            box-shadow: none !important
        h4
          color: $text-light !important
          margin: 0 0 10px 0
          font-size: 1.5rem !important
          font-weight: 600
          @media (max-width: 1024px)
            font-size: 1.15rem !important
            margin: 0 0 6px 0 !important
        p
          color: $text-muted
          margin: 0
          font-size: 1.25rem !important
          line-height: 1.4
          @media (max-width: 1024px)
            font-size: 0.9rem !important
        &.explore_card
          display: flex
          flex-direction: column
          justify-content: space-between
          @media (max-width: 1024px)
            flex-direction: row !important
            align-items: center !important
          .arrow_icon
            align-self: flex-end
            color: $blue-accent
            font-size: 1.5rem
            background: #ffffff
            padding: 8px 12px
            border-radius: 6px
            display: inline-block
            margin-top: 2rem
            @media (max-width: 1024px)
              margin-top: 0 !important
              align-self: center !important
              padding: 6px 10px !important
              font-size: 1.1rem !important

.nav_actions_wrapper
  display: flex
  align-items: center
  gap: 1.5rem
  position: relative
  z-index: 1000
  @media (max-width: 1024px)
    gap: 0

.nav_actions
  display: flex
  gap: 1rem
  align-items: center
  @media (max-width: 1024px)
    display: none !important

.mobile_only_actions
  display: none !important
  @media (max-width: 1024px)
    display: flex !important
    flex-direction: column
    gap: 1rem
    width: 100% !important
    padding-top: 1.5rem !important
    border-bottom: none !important
    margin-top: 1rem
    .btn
      width: 100% !important
      text-align: center
      padding: 14px 0 !important
      justify-content: center

.btn
  text-decoration: none
  padding: 10px 24px
  font-size: 0.95rem
  font-weight: 600
  transition: all 0.2s ease
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)
  display: inline-flex
  align-items: center
  gap: 8px
  &.btn_login
    background-color: #ffffff
    color: #000000
    &:hover
      background-color: #f1f1f1
  &.btn_primary
    background-color: #318af2
    color: #ffffff
    &:hover
      background-color: #2563eb

.mobile_menu_trigger
  display: none
  flex-direction: column
  justify-content: space-between
  width: 24px
  height: 18px
  background: none
  border: none
  cursor: pointer
  padding: 0
  margin-left: 0.5rem
  z-index: 1001
  @media (max-width: 1024px)
    display: flex
  .line
    width: 100%
    height: 2px
    background-color: $text-light
    transition: all 0.3s ease
    transform-origin: left center
  &.is_active
    .line:nth-child(1)
      transform: rotate(45deg)
    .line:nth-child(2)
      opacity: 0
    .line:nth-child(3)
      transform: rotate(-45deg)


.is_mac
  .mega_menu
    backdrop-filter: blur(7px)
  .is_mobile_open
    backdrop-filter: blur(7px)
  &::before
    content: ''
    width: 100%
    height: 100%
    backdrop-filter: blur(7px)
    position: absolute
    left: 0
    right: 0