* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Pasek nawigacyjny */
.pdfLink {
    font-size: 47px; 
    
    justify-content: center;
}
.navbar {
    display: flex;
    justify-content: center;   
    padding: 10px 0;
    position: fixed;
    width: 100%;
    

    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar ul li {
    margin: 0;
}

.navbar ul li a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 2px 20px;
    display: block;
    font-size: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-shadow: 
        -1px -1px 0 #ffffff, /* cień w górnym lewym rogu */
         1px -1px 0 #ffffff, /* cień w górnym prawym rogu */
        -1px  1px 0 #ffffff, /* cień w dolnym lewym rogu */
         1px  1px 0 #ffffff; /* cień w dolnym prawym rogu */
}

.navbar ul li a:hover {
    color: #000000;
    text-shadow: none;
    background-color: #ff0202;
}

.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    margin-left: auto;
    padding: 10px;
}


@media (max-width: 1015px) {
    .navbar ul {
        display: none; /* Ukrycie menu domyślnie */
        flex-direction: column;
        align-items: center;
        background-color: white;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
    }
   

    .navbar.open ul {
        display: flex; /* Wyświetlenie menu po kliknięciu */
    }

    .hamburger {
        display: block; /* Pokazanie przycisku hamburger na małych ekranach */
    }

    .navbar ul li a {
        font-size: 16px;
        padding: 10px;
        text-align: center;
    }
}

/* Link z obrazem PDF */
.pdf-link {
    color: #0078d7;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* Układ sekcji */
.background-layer {
    height: 100vh; /* Wysokość tła */
    z-index: -1; /* Umieszcza tło za resztą treści */
    position: relative;
    margin-top: 100px;
   
}

/* Sekcja z pełnoekranowym tłem */
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.8;

    font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  
}


/* Kontener tekstu pod tłem */
.pod_tlem {
    padding: 20px;
    background-color: rgba(255, 255, 255, 1); /* Lekko przezroczyste tło */
    text-align: center;
    font-size: 34px;
    


}


.p27 {
    font-size: 27px;
    margin-inline: 30px;
    
}

.p33 {
    font-size: 33px;
    margin-top: 120px;
    margin-inline: 30px;
}

.p1 {
    font-size: 27px;
    margin-inline: 30px;
    margin-top: 50px;
}
.p12 {
    font-size: 27px;
    margin-inline: 30px;
    margin-top: 70px;
    margin-bottom: 30px;
}
.p37 {
    font-size: 37px;
    margin-inline: 30px;
    margin-top: 100px;
}
.p377 {
    font-size: 37px;
    margin-inline: 30px;
    margin-top: 100px;
}
.p37c {
    font-size: 37px;
    margin-inline: 30px;
    margin-top: 0px;
}

.tr {
    font-size: 45px;
    margin-inline: 30px;
    margin-top: 250px;
}
.tr1 {
    font-size: 45px;
    margin-inline: 30px;
    margin-top: 100px;
}
.bia1 {
    font-size: 45px;
    margin-inline: 30px;
    margin-top: 150px;
}
.bia {
    font-size: 45px;
    margin-inline: 30px;
    margin-top: 100px;
}

.z1 {
    margin-top: 50px;
    width: 35%; 
    height: auto;
}
.z2 {
    margin-top: 100px;
    width: 35%; 
    height: auto;
}
.f4 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.zdj5 {
    width: 23%; 
    height: auto;

}

.zdj {
    width: 55%; 
    height: auto;
    margin-top: 20px;
}
.zdj11 {
    width: 55%; 
    height: auto;
    margin-top: 150px;
}
.zdj1 {
    width: 75%; 
    height: auto;
    margin-top: 100px;
}
.zdj13 {
    width: 75%; 
    height: auto;
    margin-top: 100px;
}

.zdj2 {
    width: 35%; 
    height: auto;
    margin-top: 130px;
}
.zdj3 {
    width: 30%; 
    height: auto;
    margin-top: 150px;
    text-align: center;
    
}
.zdj33 {
    width: 30%; 
    height: auto;
    margin-top: 150px;
    text-align: center;
    
}
.zdj9 {
    width: 40%; 
    height: auto;
    margin-top: 150px;
    
    text-align: center;

}
.zdj4 {
    width: 67%; 
    height: auto;
    margin-top: 150px;
}
.bg {
    background-image: url('./zdjęcia/telewizor.png'); /* Ścieżka do obrazu */
  background-size: contain; /* Dopasowanie do ekranu */
  background-position: top; /* Wyśrodkowanie */
  background-repeat: no-repeat; /* Brak powtarzania */
  margin: 0;


}





.pp {
    margin-inline: 75px;
    
}
.navbar.scrolled {
    background-color: rgb(255, 255, 255); /* Tło po przewinięciu */
  }
  footer {
    background-color: #f4f4f4;
    font-size: 20px;
    color: #333;
    padding: 20px;
    text-align: center;
    border-top: 2px solid #ddd;
    margin-top: 100px;
  }

  footer a {
    color: blue;
    text-decoration: none;
  }

  footer a:hover {
    text-decoration: underline;
  }

  footer .social-icons a {
    margin: 0 10px;
  }


@media (max-width: 1400px) {
    .f4 {

        display: flex;
        flex-wrap: wrap; /* Pozwala na zawijanie wierszy */
        gap: 10px; /* Odstępy między zdjęciami */        
    }
    .zdj5 {
        width: 100%;
        width: calc(50% - 10px); /* Dwie kolumny w wierszu, z uwzględnieniem odstępu */
    }   
    .p27, .p24, .p37, .tr, .p377 {
        margin-inline: 5%;
        text-align: center;
        line-height: 1.8;
    }
    .zdj, .zdj1, .zdj3, .zdj4 {
        width: 100%;
        height: auto;
    }
    .zdj9 {
        width: 60%;
    }
    .zdj33 {
        width: 50%;
    }
    .zdj2, .z1 {
        width: 40%;
    }

}

@media (max-width: 768px) {
    .f4 {
        flex-direction: column;
        display: inline;        
    }
    .zdj5 {
        width: 100%;
    }    
  
    .zdj, .zdj1, .zdj3, .zdj4, .zdj11 {
        width: 100%;
        height: auto;
    }
    .zdj33 {
        width: 90%;
    }
    .zdj9 {
        width: 80%;
    }
    .zdj2, .z1, .z2 {
        width: 80%;
    }  
    body {
        background-size: contain; /* Obraz dopasowuje się, ale nie przycina */
      }
    
      
}
@media (max-width: 1000px) {
    .background-layer {
        
        margin-top: 0px;
    }
    .zdj2, .z1, .z2 {
        width: 60%;
    }
}






@media (max-width: 870px) {
    
    .pp {
        font-size: 27px;
        margin-inline: 0px;
    }
}

@media (max-width: 580px) {
    .pp {
        font-size: 21px;
        margin-inline: 7px;
    }
    .footer {
        font-size: 15px;
    }
    .zdj13{
        width: 100%;
    }
    .zdj2, .z1, .z2 {
        width: 80%;
    } 
    
}
    
@media (max-width: 485px) {
    
    .p37, .p377 {
        font-size: 31px;
        margin-inline: 10px;
    }
    .tr {
        font-size: 35px;
        margin-top: 100px;
    }
    .tr1 {
        font-size: 35px;        
    }
    .zdj1 {
        margin-top: 40px;
    }
    .zdj13 {
        margin-top: 70px;
        width: 100%;
        margin-top: 130px;

    }
    .p1 {
        font-size: 23px;
        margin-inline: 10px;   
    }
    .p12 {
        font-size: 23px;
        margin-inline: 10px;   
    }
    .p27 {
        font-size: 23px;
    }
    .bia1 {
        font-size: 35px;
        
        margin-top: 100px;
    }
    .bia {
        font-size: 35px;       

    }
    .z1 {
        width: 80%;
    }
    .z2 {
        width: 80%;
        margin-top: 30px;
    }
    .zdj2 {
        width: 80%;
    }
    .p37c {
        font-size: 33px;
        margin-inline: 10px;        
    }
}  
@media (max-aspect-ratio: 1256/704) {
    .bg {
        background-image: url('./zdjęcia/stacjonarny.png');
    }
    

}
@media (max-aspect-ratio: 1090/704) {
    .bg {
        background-image: url('./zdjęcia/kwadrat1.png');
    }
    

}
@media (max-aspect-ratio: 912/701) {
    .bg {
        background-image: url('./zdjęcia/kwadrat2.png');
    }
    

}
@media (max-aspect-ratio: 913/701) {
    .bg {
        background-image: url('./zdjęcia/kwadrat2.png');
    }
    

}
@media (max-aspect-ratio: 632/701) {
    .bg {
        background-image: url('./zdjęcia/smartfon1.png');
    }
    
    

}
@media (max-aspect-ratio: 483/701) {
    .bg {
        background-image: url('./zdjęcia/smartfon.png');
    }
    .p37 {
        font-size: 28px;
        margin-top: 120px;
    }
    .p377 {
        font-size: 28px;
        margin-top: 100px;
    }
    .pdfLink {
        font-size: 26px;
    }

}
@media (max-aspect-ratio: 393/701) {
    .bg {
        background-image: url('./zdjęcia/smartfon.png');
    }
    .p37 {
        font-size: 22px;
    }
    
}



@media (max-aspect-ratio: 1500/701) {
    .pp {
        margin-inline: 35px;
        

    }   
    

}
@media (max-aspect-ratio: 620/701) {
    .pp {
        margin-inline: 15px;
        

    }
    
    

}
.copy-link {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }
.copy-link:hover {
    color: rgb(110, 16, 71);
}