/* ==========================================================================
   NaughtyKodi modern header (sticky, blur-on-scroll, mega menus, mobile)
   ========================================================================== */
.nk-nav2{
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* transparent over the hero at the top */
.nk-nav2 .nk-nav2__bar{
  max-width: 1280px;
  margin: 0 auto;
  min-height: 74px;
  padding: 14px 24px 8px;   /* breathing space above the logo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* frosted bar once scrolled */
.nk-nav2.is-scrolled{
  background: rgba(18,15,24,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
/* While the mobile slide-menu is open, drop the nav's backdrop-filter.
   backdrop-filter makes .nk-nav2 a containing block for the fixed menu,
   which clips it to the 74px bar when scrolled (menu appeared empty). */
.nk-nav2.is-open{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nk-nav2__logo img{ height: 56px; width: auto; display: block; }

/* ---- desktop menu ---- */
.nk-nav2__menu{ display: flex; align-items: center; gap: 4px; }
.nk-nav2__menu > a,
.nk-nav2__item > button{
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 600; font-size: 15.5px; letter-spacing: .01em;
  color: #f3ece0;
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 16px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; transition: background .25s ease, color .25s ease;
}
.nk-nav2__menu > a:hover,
.nk-nav2__item:hover > button{ background: rgba(255,255,255,.12); color: #fff; }
.nk-nav2__item > button .chev{ font-size: 11px; transition: transform .3s ease; }
.nk-nav2__item:hover > button .chev{ transform: rotate(180deg); }

.nk-nav2__item{ position: relative; }

/* ---- dropdown panels ---- */
.nk-nav2__panel{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fffdf8;
  border: 1px solid #ece3cf;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(24,24,36,.20);
  padding: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 50;
}
.nk-nav2__item:hover .nk-nav2__panel{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nk-nav2__panel::before{ /* hover bridge */
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nk-nav2__grid{ display: grid; gap: 6px; }
.nk-nav2__grid.cols-3{ grid-template-columns: repeat(3, minmax(210px, 1fr)); width: 680px; }
.nk-nav2__grid.cols-1{ grid-template-columns: 1fr; width: 320px; }

.nk-tile{
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: 11px; text-decoration: none;
  transition: background .2s ease;
}
.nk-tile:hover{ background: #f3ead6; }
.nk-tile__ic{
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ece3cf; color: #E45424; font-size: 17px;
}
.nk-tile__tx b{ display: block; color: #2c2733; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.nk-tile__tx span{ display: block; color: #8a8174; font-size: 12px; margin-top: 2px; line-height: 1.3; }

/* ---- right CTAs ---- */
.nk-nav2__cta{ display: flex; align-items: center; gap: 12px; }
.nk-nav2__cta a{
  font-family: 'Alegreya Sans', sans-serif; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 22px; border-radius: 999px; text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nk-nav2__cta .btn-outline{ color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.nk-nav2__cta .btn-outline:hover{ background: #fff; color: #2c2733; }
.nk-nav2__cta .btn-fill{ background: #E45424; color: #fff; }
.nk-nav2__cta .btn-fill:hover{ background: #c43f17; transform: translateY(-2px); }

/* ---- burger ---- */
.nk-nav2__burger{
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
}
.nk-nav2__burger span{ width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nk-nav2.is-open .nk-nav2__burger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nk-nav2.is-open .nk-nav2__burger span:nth-child(2){ opacity: 0; }
.nk-nav2.is-open .nk-nav2__burger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ---- mobile slide menu ---- */
.nk-nav2__mobile{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 190;
  /* glassmorphic frosted panel */
  background:
    radial-gradient(130% 55% at 100% 0%, rgba(228,84,36,.22), transparent 62%),
    linear-gradient(180deg, rgba(25,21,31,.62) 0%, rgba(18,15,24,.7) 100%);
  backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%);
  padding: 0 22px 28px; overflow-y: auto;
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.nk-nav2.is-open .nk-nav2__mobile{ opacity: 1; visibility: visible; transform: translateY(0); }

/* top: logo + close — sticks to the top of the scrolling panel, frosted */
.nk-nav2__mobile .m-head{
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -22px 18px; padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(18,15,24,.45);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.nk-nav2__mobile .m-head__logo img{ height: 48px; width: auto; display: block; }
/* clean rounded-square close button (reference style) */
.nk-nav2__mobile .m-close{
  position: relative;
  width: 44px; height: 44px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .35s ease;
}
.nk-nav2__mobile .m-close::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255,255,255,.16);
  transform: scale(0); transform-origin: center;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.nk-nav2__mobile .m-close:hover,
.nk-nav2__mobile .m-close:focus-visible{
  transform: rotate(90deg); border-color: rgba(255,255,255,.5); outline: none;
}
.nk-nav2__mobile .m-close:hover::before,
.nk-nav2__mobile .m-close:focus-visible::before{ transform: scale(1); }
.nk-nav2__mobile .m-close:active{ transform: rotate(90deg) scale(.92); }

.nk-nav2__mobile .m-group{ margin-bottom: 22px; }
/* section label with an accent rule */
.nk-nav2__mobile .m-label{
  display: flex; align-items: center; gap: 12px;
  color: #FCA818; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  margin: 0 0 6px;
}
.nk-nav2__mobile .m-label::after{ content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(252,168,24,.5), transparent); }

/* links with chevron + slide-on-hover */
.nk-nav2__mobile .m-group > a{
  position: relative; display: flex; align-items: center; justify-content: space-between;
  color: #efe7da; text-decoration: none;
  font-family: 'Alegreya Sans', sans-serif; font-size: 16.5px; font-weight: 500;
  padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .25s ease, padding-left .25s ease;
}
.nk-nav2__mobile .m-group > a::after{
  content: "\203A"; font-family: 'Khula', sans-serif; font-size: 22px; line-height: 1; color: rgba(255,255,255,.3);
  transition: color .25s ease, transform .25s ease;
}
.nk-nav2__mobile .m-group > a:hover,
.nk-nav2__mobile .m-group > a:active{ color: #FCA818; padding-left: 8px; }
.nk-nav2__mobile .m-group > a:hover::after{ color: #E45424; transform: translateX(4px); }

/* ---- flattened menu: icon-chip rows ---- */
.nk-nav2__mobile .m-group--main{ margin-bottom: 10px; }
.nk-nav2__mobile .m-lk{ display: flex; align-items: center; gap: 14px; }
.nk-nav2__mobile .m-lk i{
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 15px;
  color: #FCA818; background: rgba(252,168,24,.12);
  border: 1px solid rgba(252,168,24,.20);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nk-nav2__mobile .m-group > a:hover .m-lk i,
.nk-nav2__mobile .m-group > a:active .m-lk i{
  background: #E45424; color: #fff; border-color: #E45424;
  transform: translateY(-1px) rotate(-5deg);
}
/* staggered entrance when the panel opens */
@keyframes nkMIn{ from{ opacity: 0; transform: translateX(16px); } to{ opacity: 1; transform: none; } }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a{ animation: nkMIn .45s cubic-bezier(.22,1,.36,1) both; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(1){ animation-delay: .06s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(2){ animation-delay: .11s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(3){ animation-delay: .16s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(4){ animation-delay: .21s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(5){ animation-delay: .26s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(6){ animation-delay: .31s; }
.nk-nav2.is-open .nk-nav2__mobile .m-group--main > a:nth-child(7){ animation-delay: .36s; }

/* ---- mobile accordion submenus ---- */
.nk-nav2__mobile .m-acc > .m-label{ cursor: pointer; user-select: none; padding: 6px 2px; margin-bottom: 0; outline: none; }
.nk-nav2__mobile .m-acc > .m-label:focus-visible{ color: #fff; }
.nk-nav2__mobile .m-label__chev{
  order: 2; flex: 0 0 auto; margin-left: 4px;
  font-size: 13px; color: #FCA818; line-height: 1;
  transition: transform .3s ease;
}
.nk-nav2__mobile .m-acc.is-open .m-label__chev{ transform: rotate(180deg); }
.nk-nav2__mobile .m-sub{ overflow: hidden; max-height: 0; transition: max-height .42s cubic-bezier(.4,0,.2,1); }
.nk-nav2__mobile .m-acc.is-open .m-sub{ max-height: 1600px; }
.nk-nav2__mobile .m-sub__inner{ padding-top: 4px; }
/* slightly tighter rows inside the accordion */
.nk-nav2__mobile .m-acc .m-sub__inner > a{ font-size: 16px; padding: 11px 4px; }

/* CTAs */
.nk-nav2__mobile .m-cta{ display: flex; flex-direction: column; gap: 12px; margin: 26px 0 30px; }
.nk-nav2__mobile .m-cta a{ text-align: center; border: 0; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 14px; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.nk-nav2__mobile .m-cta .btn-outline{ border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.nk-nav2__mobile .m-cta .btn-outline:active{ background: rgba(255,255,255,.1); }
.nk-nav2__mobile .m-cta .btn-fill{ background: #E45424; color: #fff; }
.nk-nav2__mobile .m-cta .btn-fill:active{ background: #c43f17; }

/* footer: phone, address, socials */
.nk-nav2__mobile .m-foot{ border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; text-align: center; }
.nk-nav2__mobile .m-foot__phone{ display: inline-block; color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; padding: 0; border: 0; }
.nk-nav2__mobile .m-foot__phone i{ color: #E45424; margin-right: 6px; }
.nk-nav2__mobile .m-foot__addr{ color: #9c93a7; font-size: 13px; margin: 8px 0 18px; padding: 0; border: 0; }
.nk-nav2__mobile .m-foot__addr i{ color: #E45424; margin-right: 5px; }
.nk-nav2__mobile .m-foot__social{ display: flex; justify-content: center; gap: 12px; }
.nk-nav2__mobile .m-foot__social a{
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff; font-size: 16px; border: 0;
  transition: background .25s ease, transform .25s ease;
}
.nk-nav2__mobile .m-foot__social a:active{ background: #E45424; transform: scale(.94); }

@media (max-width: 991px){
  .nk-nav2__menu, .nk-nav2__cta{ display: none; }
  .nk-nav2__burger{ display: flex; }
  .nk-nav2__bar{ height: 64px; }
  .nk-nav2__logo img{ height: 46px; }
  /* glassmorphic sticky nav bar on mobile — applied to the BAR (not .nk-nav2),
     so it doesn't become the containing block for the fixed mobile menu */
  .nk-nav2__bar{
    background: rgba(18,15,24,.45);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}