@media screen and (max-width: 992px) {
     
     .navigation .navigation-container .container
     {
          max-width: 100%;
     }
     .logo-area
     {
          position: relative;
     }
     .logo-area .logo
     {
          display: block;
          width: 85%;
     }
     .logo-area .toggle-btn
     {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          width: 40px;
          height: 40px;
          border-radius: 5px;
          background-color: var(--color1);
          display: block;
          cursor: pointer;
     }
     .logo-area .toggle-btn img
     {
          padding:6px;
     }

     .navigation .navigation-container .main-ul
     {
          float: none;
          padding:10px 10px;
          display: none;
     }
     .navigation .navigation-container .main-ul .main-li
     {
          float: none;
          margin:0 0;
     }
     .navigation .navigation-container .main-ul .main-li a
     {
         padding:5px 10px;
         text-align: center;
         display: block;
         border-bottom: 1px solid #ccc;
     }
     .navigation .navigation-container .main-ul .main-li:last-child a
     {
          border-bottom: 0px;
     }
}