.navigation-bar{
    position: sticky;
    top:0;
    z-index: 5;
    display: flex;
    justify-content: center;
    height: 10dvh;
    width: 100%;
    justify-content: flex-start;
    background: rgb(51, 49, 51);
    gap:100px;
    box-shadow: #272627 0px 10px 5px;
    
   
}
.links{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
}
.navigation-link{
    color:white;
    font-size: 1.2rem;
    text-decoration: none;
    width: auto;
    margin: 0 auto;
    text-align: center;
    
    
    /* border: 1px solid black; */
    
}
.font{
    color:white;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    
}
.brand{
    font-size:1.2rem;
    padding: 0;
    margin-bottom: 5px;
}
.gray{
    color:rgb(212, 212, 212)
}
.menu{
    float: right;
    position:absolute; 
    right:30px;
    display: none;
    max-width: 64px;
    cursor: pointer;
    transition: 0.3s;
}
.menu:active{
    opacity: 0.53;
}
.r-navbar{
    display: block;
    max-height: 0px;
    
    display: flex;
    flex-direction: column;
    box-shadow: #272627 10px 10px 10px;
    position: fixed;
    top: 10.0dvh;
    overflow: hidden;
    z-index: 10;
    background-color: rgb(51, 49, 51);
    width: 100%;
    transition: 0.7s ;
}
.menu-link{
    color:white;
    margin: 10px auto;
    font-size: 1.4rem;
    text-decoration: none;
    width: auto;
    
    text-align: center;
    
    
     
}
.links, .r-navbar {
    max-width: 100%;  /* Zapewnia, że kontener nie przekracza szerokości ekranu */
    box-sizing: border-box;  /* Zapewnia, że padding i border są wliczane w szerokość i wysokość */
}
.logo{
    height:64px;
}




.footer{
    background-color: #2c2b2b;
    margin-top:90px ;
    
    
}
.footer-links{
    display:flex;
    justify-content: start;
    flex-direction: row;
    margin-left: 20px;
    gap:100px;
}
.social-media, .customer{
    display: flex;
    flex-direction: column;
    
}
.link{
    color:white;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    text-decoration: none;
    margin:5px;
    transition: 0.5s;
    font-size: 1rem;
}
.link:hover{
    color: #969696;
}
.copyright{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    word-wrap: break-word;
}
.cp{
    transition: 0.5s;
}
.cp:hover{ color:#969696};
.logo{
    width: 10px;
}


@media (max-width:1260px) {
    .basket{
        clear: both;
        margin-right: 10px;
    }
}
@media (max-width:885px) {

    
}
@media (max-width:800px){
    .navigation-link{
        
        font-size: 1.2rem !important;
        /* background-color: rebeccapurple; */

    }

}
@media (max-width:712px) {
    .links{
        position: relative;
        height: 10dvh;
    }
   .navigation-bar{
    gap:50px;
   }
   .navigation-link{
    display: none;
   }
   .input{
    display: block !important;
    width: 95% !important;
    margin: 10px auto !important;
   }
   .menu{
    display: block;
    position: absolute;
    left: 0%;
   }
   .basket{
    position: absolute;
    right: 0;
    top:50%;
    transform: translate(-50%, 0);
   }
   .logo{
    position: absolute;
    left: 50%;
    top:5%;
    transform: translate(-50%, 0); 
    margin: auto 0; 
    
   }
   
}
@media (max-width:660px) {
    .link{
        font-size: 0.9rem !important;
    }
    .footer-links{
        gap:10px;
    }
}
@media (max-width:592px) {

   .navigation-bar{
    gap:20px;
    
   }
   .navigation-link{
    font: 1.2rem arial;
   }
}
@media (max-width:500px){
.footer-links{
    flex-direction: column;
    gap: 10px;
}


}
@media (max-width:410px) {
    .navigation-link{
        font: 1.1rem arial;
       }
    .navigation-bar{
        gap:10px;
    }

}