body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body{
    background-color: white;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    font-style: normal;
}
.menu_gl{ 
    display: flex;
    flex-direction: row;
    height: clamp(50px, 7vw, 100px);
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: aqua; 
    z-index: 1000; 
    font-weight: 500;
}
.rightSection{
    background-color: rgb(46, 46, 46);
}
.logo{
height: clamp(50px, 7vw, 100px);
}
.midleSection{
    font-size: clamp(5px, 2vw, 20px);
    background-color: rgb(46, 46, 46);
    flex: 1;
    height: clamp(50px, 7vw, 100px);
    display: flex;
    align-items: center;  
    
}
.el_menu{
    background-color: rgb(46, 46, 46);
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    
}
.el_menu a:link{
    color: rgb(193, 167, 92);
    text-decoration: none;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: background-color 0.5s ease;
}
.el_menu a:visited {
    color: rgb(193, 167, 92); 
}
.el_menu a:hover{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgb(193, 167, 92);
    color: rgb(46, 46, 46);
}
.eng{
    background-color: rgb(46, 46, 46);
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center; 
    
}
.eng img {
    height: 3vw;
    border-radius: 100px;
    object-fit: cover;
    transition: border 0.2s ease;
}
.eng a img:hover{
    border: 4px solid rgb(193, 167, 92);
}
.grid-container {
    color:black;
    display: grid;
    margin: 0;
    margin-top: clamp(70px, 10vw, 150px);
    grid-template-columns: 1fr 1fr; 
    width: 100%;
    height: auto; 
    padding: 0;
}

.main-content {
    overflow-y: auto; 
    border: none;
    margin-top: clamp(5px, 2vw, 100px);
    margin-bottom: clamp(5px, 2vw, 100px);
}
.photo {
    width: 1fr; 
    margin: 0;   /* Usuń marginesy */
    padding: 0;
    margin-bottom: 20px; 
    overflow-y: auto; 
    overflow: hidden; 
}
.photo-l {
    width: 100%; 
    margin: 0;   /* Usuń marginesy */
    padding: 0;
    margin-bottom: 20px; 
    overflow-y: auto; 
    overflow: hidden; 
     
}
.photo, .photo-l {
    width: 100%; 
    display: flex;  
    align-items: center;
    justify-content: center; /* Wyrównuje obraz na środku kontenera */
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
}
.hexagon {
    aspect-ratio: 1;
    width: 1fr; 
    max-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* Doda tło, które wypełni przestrzeń wokół zdjęcia */
    border-radius: 10px;
}

.hexagon img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Zapewnia zachowanie proporcji zdjęcia bez przycinania */
}

.onas{
    text-align: left;
    width: 95%;
    background-color: rgb(46, 46, 46);
    color: rgb(193, 167, 92);
    padding-top: clamp(20px, 2vw, 100px);
    padding-bottom: 10px;
    padding-left: 5%;
    border-bottom: 2px solid rgb(193, 167, 92); 
    font-weight: 700;
    font-size: 3vw;
    position: absolute;  /* Lub fixed, jeśli ma być zawsze na ekranie */
    z-index: 100;
}
.onas1{
    padding-left: 5%;
    width: 95%;
    background-color: rgb(46, 46, 46);;
    color: rgb(193, 167, 92);
    padding-top: clamp(20px, 2vw, 100px);
    padding-bottom: 10px;
    margin-top: clamp(380px, 75vw, 850px);
    border-bottom: 2px solid rgb(193, 167, 92); 
    font-weight: 700;
    font-size: 3vw;
    text-align: left;
    position: absolute;  /* Lub fixed, jeśli ma być zawsze na ekranie */
    z-index: 100;
}
.photo, .photo-l{
    margin-top: clamp(0px, 12vw, 200px);
}

.opis{
    margin-top: clamp(100px, 10vw, 200px);
    padding-top: clamp(10px, 2vw, 100px);
    padding-left: clamp(10px, 2vw, 50px);
    padding-right: clamp(10px, 2vw, 50px);
    margin-bottom: clamp(60px, 2vw, 100px);
    font-size: clamp(5px, 2vw, 20px);
}
.footer {
    display: flex;
    margin-top: 20px;
    justify-content: space-between; 
    align-items: center; 
    background-color: #333;
    color: white;
    font-size: clamp(2px, 2vw, 13px);
    padding: 5px;
}
.footer a:link, .footer a:visited{
    color: white;
}
.footer nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer nav ul li {
    margin-right: 15px;
}

.footer nav ul li a {
    color: white;
    text-decoration: none;
}

.footer nav ul li a:hover {
    text-decoration: underline;
}
.hexagon1 {
    background-color: rgb(193, 167, 92);
    padding: clamp(10px, 2vw, 30px);
    margin-bottom: 10px;
    clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 50%, 75% 0%);
    font-weight: 500;
    font-size: clamp(2px, 2vw, 40px);  /* Dynamiczne skalowanie rozmiaru czcionki */
    display: flex; /* Umożliwia elastyczne dopasowanie kontenera */
}

/* Usuwamy podkreślenie z linków wewnątrz div.hexagon1 */
.hexagon1 a {
    text-decoration: none; /* Usuwa podkreślenie linku */
    display: inline-block; /* Utrzymuje link w linii */
    color: rgb(46, 46, 46);
}

/* Stylowanie dla samych ikon */
.hexagon1 i {
    font-size: inherit; /* Dziedziczy font-size z .hexagon1 */
    color: rgb(46, 46, 46); /* Kolor ikon */
    display: inline-block; /* Zapewnia wyświetlanie ikony w linii */
}

/* Efekt hover dla ikony */
.hexagon1 a:hover i {
    color: rgb(46, 46, 46); /* Zmieniamy kolor ikony przy najechaniu */
}

#hex1 {
    background-color: #1877F2; /* Kolor tła dla Facebooka */
}

/* Stylowanie samej listy */
.opis ul {
    list-style-type: none; /* Usuwamy domyślne punkty listy */
    padding: 0;
    margin: 0;
}

/* Stylowanie elementów listy (kafelków) */
.opis ul li {
    color: black; /* Kolor tekstu */
    font-size: clamp(2px, 2vw, 18px); /* Rozmiar tekstu */
    padding: clamp(2px, 2vw, 5px); /* Większe odstępy wewnętrzne */
    border-bottom: 3px solid rgb(46, 46, 46); /* Linia oddzielająca */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Animacja przy zmianie */
}
/* Stylowanie dla samych ikon */
.hexagon1 i.icon-facebook  {
    font-size: inherit; /* Dziedziczy font-size z .hexagon1 */
    color: white; /* Kolor ikon */
    display: inline-block; /* Zapewnia wyświetlanie ikony w linii */
}

/* Efekt hover dla ikony */
.hexagon1 a:hover i.icon-facebook {
    color: white; /* Zmieniamy kolor ikony przy najechaniu */
}