body{
    font-family: Montserrat, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #005fcc;
    overflow-x: hidden;
}
header{
    text-align: center;
    align-items: center;
    gap: 20px;
    display: flex;
    justify-content: center;
    background-color:#EAEAEA ;
}
nav{
    text-align: right  ;
    display: flex;
    align-items: center;
    justify-content: space-between; /* UL po lewej, IMG po prawej */
    padding: 0 20px
}
nav ul{
    align-items: center;
    display: flex;
    gap: 18px;
    padding: 0;
    list-style:  none;
    }
    nav img {
    height: 200px;
    width: auto;
    object-fit: contain;  
    margin-left: 50px
}
    a:hover{
        color: #005fcc;
    }
    a{
        text-decoration: none;
        color: #FF8C00;
    }
    main{
        flex: 1;
        background-color:#EAEAEA
    }
    footer{
    background-color: #EAEAEA;
    text-align: center;
    padding: 15px 0;
    
}
section.div-container{
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    overflow: hidden;
    
}
section.div-container a{
    color: black;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.scrol > div {
    width: 180px;
    padding: 20px;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: #FF8C00 2px 2px 10px;
    background-color: #EAEAEA;
}
.scrol{
     display: flex;
    gap: 30px;
     width: max-content;
     will-change: transform;
}
img.rozmiar{
    object-fit: contain;
    width: 64px;
    height: 64px;
    text-align: center;
}
div img{
    width: 64px;
    height: 64px;
    display: block;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
section.intro{
    margin: 20px;
    padding: 20px;
    border: solid black 2px;
    border-radius: 10px;
    box-shadow: #FF8C00 2px 2px 10px ;
    text-align: center;
    font-size: large;

}
li img{
    width: 400px;
    height: 500px;            /* stała wysokość zdjęcia */
    border-radius: 10px;
}
li span{
    display: block;
    height: 40px;             /* zawsze ta sama wysokość na podpis */
    line-height: 40px;
    margin: 0;
    font-weight: bold;
    color: #005fcc;
    font-size: 24px;
}
section.przewijanie{
    width: 100%;
    height: 50px;
}
/* Każdy kafelek pracy */
ul.Lista_prac li {
  display: flex;
  flex-direction: column;     /* obraz nad podpisem */
  align-items: center;
  justify-content: space-between;
  width: 300px;               /* stała szerokość kafelka */
  height: 480px;              /* stała wysokość kafelka (żeby każdy był równy) */
  border: 2px solid black;
  border-radius: 10px;
  box-shadow: #FF8C00 2px 2px 10px;
  background-color: #EAEAEA;
  padding: 10px;
}
ul.Lista_prac{
    margin-top: 50px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 300px); /* 2 kolumny */
    grid-template-rows: repeat(2, auto);     /* 2 wiersze */
    justify-content: center;   /* wyśrodkowanie */
    align-items: flex-start;   /* WAŻNE: wyrównanie kafelków do góry */
    column-gap: 200px; /* poziomy odstęp */
    row-gap: 40px;    /* mniejszy odstęp pionowy */
    padding: 0;
}
ul.Lista_prac li img {
  width: 300px;
  height: 400px;
  border-radius: 10px;
}

/* Podpis pod obrazem */
ul.Lista_prac li span {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #005fcc;
  font-size: 24px;
  line-height: 40px;
  margin-top: 10px;
}

.przewijanie{
    text-align: center;
    margin-top: 20px;
}

.przewijanie a {
    
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ddd;
  margin: 0 4px;
  border-radius: 5px;
  text-decoration: none;
  color: black;
}

.przewijanie a:hover {
  background-color: #ddd;
}

.przewijanie a.aktywna {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.social-buttons {
    position: fixed;      /* przyklejone do lewej strony */
    top: 50%;             /* wyśrodkowane pionowo */
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.social-buttons .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    border-radius: 0 10px 10px 0;
    transition: all 0.3s;
    background-color: #FF8C00;
}



.social-buttons .btn:hover {
    transform: translateX(10px); /* przesunięcie w prawo po hover */
}
.btn img{
    max-width: 100%;   /* dopasowanie obrazka do przycisku */
    max-height: 100%;
}
.btn:hover {
    background-color: #005fcc;
}
.kwadrat{
    width: 200px;
    height: 200px;
}

/* Responsywność stosowana tylko dla ekranów węższych niż 1400px */
@media (max-width: 1400px) {
    header{ justify-content: space-between; flex-wrap: wrap; padding: 10px 20px; }
    nav{ width: 100%; padding: 10px; }
    nav ul{ flex-wrap: wrap; gap: 10px; justify-content: center; }
    nav img{ height: 140px; margin-left: 0; margin: 10px 0; }
    .scrol{ width: 100%; overflow-x: auto; padding-bottom: 8px; }
    .scrol > div{ min-width: 160px; flex: 0 0 auto; }
    /* Kafelki: zachowaj wygląd na desktopie, ale na mniejszych ekranach przejdź do responsywnej siatki */
    ul.Lista_prac{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 30px 40px;
        justify-content: center;
        align-items: start;
        padding: 0 12px;
    }
    ul.Lista_prac li{
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto;
    }
    ul.Lista_prac li img{ width: 100%; height: auto; max-height: 420px; }
    li img{ width: 100%; height: auto; max-width: 420px; }
    .przewijanie{ padding: 0 8px; }
    .social-buttons{ top: auto; bottom: 12px; left: 12px; transform: none; flex-direction: row; }
    .social-buttons .btn{ width: 44px; height: 44px; border-radius: 8px; }
}

@media (max-width: 1024px) {
    nav img{ height: 120px; }
    .scrol > div{ width: 150px; }
}

@media (max-width: 768px) {
    nav img{ height: 100px; }
    .scrol{ gap: 16px; }
    ul.Lista_prac{ gap: 20px; }
    li img{ max-width: 360px; }
}

@media (max-width: 480px) {
    nav img{ height: 80px; }
    header{ padding: 8px; }
    ul.Lista_prac{ gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .kwadrat{ width: 120px; height: 120px; }
}