@media(max-width:875px) {
     nav .nav-links {
         gap: 10px;
     }
 }

 @media (max-width: 768px) {

     .marquee-container {
         display: block;
     }

     .menu-toggle {
         display: block;
         font-size: 1.8rem;
         cursor: pointer;
     }

     .menu-toggle:hover i {
         color: var(--main-color);
     }



     .nav-links {
         display: none !important;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: var(--secondary-color);
         flex-direction: column;
         gap: 1rem;
         padding: 1rem 2rem;
     }

     .nav-links.show {
         display: flex !important;
     }

 }

 @media(max-width:700px) {
     nav .logo a img {
         border-radius: 50%;
         height: 70px;
     }
 }