@media (max-width: 1100px) {
       .list li a {
           text-decoration: none;
           color: #000;
           padding: 0 11px;
           font-weight: 600;
           transition: color 0.3s;
       }
   }

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

       .list {
           position: absolute;
           top: 70px;
           right: 0;
           width: 100%;
           background: #fff;
           flex-direction: column;
           align-items: flex-start;
           padding: 20px;
           display: none;
           /* hidden */
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
           opacity: 0;
           transform: translateY(-15px);
           transition: opacity 0.3s ease, transform 0.3s ease;
       }

       .list.active {
           display: flex;
           opacity: 1;
           transform: translateY(0);
       }

       .list li {
           width: 100%;
           margin: 10px 0;
       }

       .list li a {
           display: block;
           width: 100%;
           padding: 2px 0;
       }

       .hamburger.open span:nth-child(1) {
           transform: rotate(45deg) translateY(8px);
       }

       .hamburger.open span:nth-child(2) {
           opacity: 0;
       }

       .hamburger.open span:nth-child(3) {
           transform: rotate(-45deg) translateY(-8px);
       }
   }