/* =====================================================
   CUSTOM CSS - HONG GAR
===================================================== */

*
{
   box-sizing: border-box;
}

/* =====================================================
   MENU MODERNO
===================================================== */

#menu14Menu
{
   position: sticky;
   top: 0;
   z-index: 9999;

   background: rgba(10,10,10,0.92);

   backdrop-filter: blur(14px);

   border-bottom: 1px solid rgba(212,175,55,0.15);

   box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

/* Container */
#menu14Menu .container
{
   display: flex;
   align-items: center;
   justify-content: space-between;

   min-height: 76px;
}

/* Logo */
#menu14Menu-logo img
{
   height: 56px;
   width: auto;

   transition: transform 0.3s ease;
}

#menu14Menu-logo img:hover
{
   transform: scale(1.05);
}

/* Desktop menu */
#menu14Menu .navbar-nav
{
   display: flex;
   align-items: center;
   gap: 8px;
}

#menu14Menu .nav-item
{
   list-style: none;
}

#menu14Menu .nav-link
{
   color: #F5F5F5;

   font-size: 17px;
   font-weight: 600;

   padding: 14px 18px;

   border-radius: 10px;

   transition: all 0.3s ease;
}

#menu14Menu .nav-link:hover
{
   color: #D4AF37;

   background: rgba(255,255,255,0.05);
}

/* HAMBURGER */

.navbar-toggle
{
   background: transparent;
   border: none;

   width: 50px;
   height: 50px;

   display: none;

   flex-direction: column;
   align-items: center;
   justify-content: center;

   cursor: pointer;
}

.navbar-toggle .line
{
   width: 28px;
   height: 3px;

   background: #ffffff;

   margin: 3px 0;

   border-radius: 20px;

   transition: all 0.3s ease;
}

/* Hamburger animation */

.navbar-toggle.active .line:nth-child(1)
{
   transform: rotate(45deg) translate(5px,5px);
}

.navbar-toggle.active .line:nth-child(2)
{
   opacity: 0;
}

.navbar-toggle.active .line:nth-child(3)
{
   transform: rotate(-45deg) translate(7px,-7px);
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 991px)
{
   .navbar-toggle
   {
      display: flex;
   }

   #menu14Menu .container
   {
      padding-left: 16px;
      padding-right: 16px;
   }

   .menu14Menu-navbar-collapse
   {
      position: absolute;

      top: 78px;
      left: 12px;
      right: 12px;

      background: rgba(15,15,15,0.96);

      backdrop-filter: blur(18px);

      border-radius: 18px;

      padding: 18px;

      box-shadow: 0 18px 45px rgba(0,0,0,0.45);

      animation: menuFade 0.35s ease;
   }

   @keyframes menuFade
   {
      from
      {
         opacity: 0;
         transform: translateY(-10px);
      }

      to
      {
         opacity: 1;
         transform: translateY(0);
      }
   }

   #menu14Menu .navbar-nav
   {
      width: 100%;

      flex-direction: column;

      gap: 10px;
   }

   #menu14Menu .nav-item
   {
      width: 100%;
   }

   #menu14Menu .nav-link
   {
      display: block;

      width: 100%;

      text-align: center;

      font-size: 20px;

      padding: 16px;

      background: rgba(255,255,255,0.03);

      border-radius: 12px;
   }

   #menu14Menu .nav-link:hover
   {
      background: rgba(212,175,55,0.15);

      color: #D4AF37;
   }

   #menu14Menu-logo img
   {
      height: 48px;
   }
}