/*

   Title: Navigation
   Author: QBIT
   Date: 05/05/2024

*/

/* Main navigation styles */
header nav {
      position: absolute;
      top: 0;
      right: 0;
}

header nav a {
   color: #fff;
   display: block;
   padding: 10px;
}

.main-nav li {
   position: relative;
   display: inline-block;
}

.main-nav li:hover .sub-nav {
   display: block;
}

/* Sub navigation styles */
.sub-nav {
   width: 275px;
   position: absolute;
   top: 100%;
   left: 0;
   text-align: left;
   display: none;
   background-color: rgba(0, 0, 0, 0.4);
   overflow-y: auto; 
   z-index: 1;  
}

.sub-nav li {
   display: block;
}

.sub-nav a:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

/* Burger styles */
.burger {
   position: fixed;
   top: 20px;
   right: 10px;
   display: none;
}

.bar1,.bar2,.bar3,.bar4 {
   width: 30px;
   height: 1px;
   background: #fff;
   margin-bottom: 7px;
   transition: 0.4s;
}

.change .bar1 {
   transform: translate(0, 12px) rotate(-45deg);
   width: 30px;
}

.change .bar2 {
   opacity: 0;
}

.change .bar3 {
   opacity: 0;
}

.change .bar4 {
  transform: translate(0, -12px) rotate(45deg);
  width: 30px;
}

/* Media queries */
@media (max-width: 64em) 
{

   /* Main navigation styles */
   header nav {
      position: fixed;
      top: 0;
      left: 0;
   }

   .main-nav {
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      text-align: left;
      background-color: #333;
      display: none;
      flex-direction: column;
      padding: 20px 0;
      z-index: 1;
   } 

   .main-nav a {
      color: #999;
   }

   .menu-open {
      display: flex;
   }

   /* Sub navigation styles */
   .sub-nav {
      width: 100%;
      height: 100vh;
      background-color: #333;
   }

   .subnav a {
      color: #999;
   }

   /* Burger styles */
   .burger {
      display: block;
      z-index: 1000;
   }

}