@media screen and (max-width: 480px) { /* Phone-breakpoint */
    .top-header{
        width: 90%;
    }
    .contactInfo{
        padding: 10px 25px;
        display: flex;
    }
    .contactInfo p{
        display: none;
    }
    #hidden{
        display: none;
    }
    .invisible{
        display: none;
    }
    .signIn{
        padding: 7px 20px;
    }
    .signIn img{
        margin-right: 0px;
    }
    .bottom-header{
        width: 340px;
        padding:20px 0%;
    }
    .logo{
        display: flex;
        justify-content: center;
    }
    .logo img{
        height: 53px;
    }
    .categories{
        width: 345px;
    }
    .banners{
        display: none;
    }
    .categories{
        display: flex;
        flex-direction: column;
    }
    .category{
        max-width: none;
    }
    .product-2{
        display: none;
    }
    .products h2{
        font-size: 35px;
    }
    .nav{
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    .nav-object{
        width: 340px;
        justify-content: left;
    }
    .nav a{
        font-size: 20px;
    }
    .footer-section {
        padding: 0px;
    }
    .nabidka ul, .nabidka h3 {
        display: none;
    }
    .bar ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin: 0;
        gap: 5px;
    }
    .bar-li {
        flex: 0 0 45%;
        box-sizing: border-box;
        height: auto;
        border: 1px solid #DADEEA;
        display: flex;
        justify-content: center;
    }
    .bar-a-invis {
        flex-direction: column;
        padding: 10px;
        font-size: 13px;
        gap: 5px;
    }
    .bar img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
}

@media screen and (max-width: 570px) { /* Phone/Tablet breakpoint */
    .top-header{
        width: 90%;
    }
    .contactInfo{
        padding: 10px 25px;
        display: flex;
    }
    .contactInfo p{
        display: none;
    }
    #hidden{
        display: none;
    }
    .invisible{
        display: none;
    }
    .signIn{
        padding: 7px 20px;
    }
    .signIn img{
        margin-right: 0px;
    }
}

@media screen and (max-width: 768px) { /* Tablet breakpoint */
    .invisible{
        display: none;
    }
    .signIn{
        padding: 7px 20px;
    }
    .signIn p{
        display: none;
    }
    .signIn img{
        margin-right: 0px;
    }
    .bottom-header{
        width: 340px;
        padding:20px 0%;
    }
    .logo{
        display: flex;
        justify-content: center;
    }
    .logo img{
        width: 80vw;
    }
    .categories{
        width: 345px;
    }
    .banners{
        display: none;
    }
    .categories{
        display: flex;
        flex-direction: column;
    }
    .category{
        max-width: none;
    }
    .product-2{
        display: 1;
    }
    .products h2{
        font-size: 35px;
    }
    .nav{
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: start;
    }
    .nav-object{
        width: 340px;
        justify-content: left;
    }
    .nav a{
        font-size: 20px;
    }
    .footer-container {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .footer-container h3 {
        text-align: center;
        font-size: large;
    }
    .footer-onas{
        flex: 1;
        padding: 20px;
        padding-left: 0px;
    }
    .footer-onas img{
        margin-top: 5%;
        margin-left: 20%;
    }
    .footer-section {
        padding: 0px;
    }
    .footer-section ul li {
        margin: 5px 0;
    }
    .nabidka{
        display: flex;
        gap: 40px;
        margin-bottom: 20px;
    }
    .list{
        display: flex;
        flex-direction: column;
        justify-content: left;
        text-align: left;
        margin-left: 5px !important;
    }
    .list h3{
        margin-top: 30px;
        margin-bottom: 5px;
        margin-left: 0px;
    }
    .Kontakt-container{
        padding: 15px;
        min-width: 25%;
    }
    .Kontakt-container h3{
        margin-left: 0%;
        margin-bottom: 15px;
    }
    .row-section img{
        margin-left: 5%;
        margin-right: 10px;
    }
    .social-media img{
        margin-left: 5%;
        margin-bottom: 20px;
    }
    .bottom-header img{
        max-width: 360%;
    }
    #copyright{
        margin-left: 5%;
    }
    .footer-onas p, .footer-onas h3{
        display: none;
    }
    #copyright{
        margin-top: 10px;
        margin-left: 0px;
    }
    #reviews-photo img{
        display: none;
    }
    .reviews-container{
        gap: 0px;
    }
    .footer-container{ 
        display: flex !important;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 0vw !important;; 
    }
    
}
@media screen and (max-width: 1010px){
    .nav-header {
        width: 100%;
        max-width: 80%;
    }
    .bar ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto); 
        gap: 3px;
        padding: 0;
        margin: 0;
    }
    .bar-li {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    .bar-a-invis {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: inherit;
        padding: 10px;
        height: 100%;
    }
    .bar li {
        border: 1px solid #DADEEA;
        height: 100px;
    }
    .bar-a-invis img {
        width: 24px;
        height: 24px;
        margin-top: 5px;
    }
    .Kontakt-invis,
    .bar-a-invis {
    display: none;
    }
    #reviews-photo img{
        display: 1;
        max-height: 80%;
    }
    .reviews-container{
        gap: 0px;
    }
}
@media screen and (max-width: 1155px){
  .footer-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "hours contact"
      "onas produkty";
    gap: 20px;
    padding-left: 8vw;
  }
  .opening-hours {
    margin: 0 auto;
  }
  .footer-onas {
    grid-area: onas;
  }
  .Kontakt-container{
    min-width: 290px;
  }
  .footer-section {
    max-width: 300px;
    grid-area: produkty;
  }
  .opening-hours-container {
    grid-area: hours;
  }
  .Kontakt-container {
    grid-area: contact;
  }
    .nabidka {
    gap: 0;
  }  
  .list {
    align-items: flex-start;
    margin-left: 46px;
  }
   .list h3 {
    margin-left: 40px;
  }
}