/* Style globalne */
/* Ustawia podstawowe style dla dokumentu, takie jak czcionka, marginesy i odstępy */
body {
    font-family: 'Fira Sans', sans-serif; /* Ustawia rodzinę czcionek dla całej strony */
    margin: 0, 20px, 0, 20px; /* Usuwa domyślne marginesy wokół elementu body */
    padding: 0; /* Usuwa domyślne wypełnienie wokół elementu body */
    color: black; /* Ustawia kolor tekstu na czarny */
    background-color: #ffffff; /* Ustawia kolor tła na biały */
    line-height: 1.4; /* Ustawia spójny odstęp między wierszami tekstu */
}

/* Ogólny układ responsywny */
/* Stylizuje kontener do ogólnego układu strony */
.container {
    max-width: 1200px; /* Ogranicza maksymalną szerokość kontenera */
    margin: 0 auto; /* Centruje kontener poziomo */
}

/* Typografia */
/* Stosuje spójne style dla wszystkich poziomów nagłówków */
h1, h2, h3, h4, h5, h6 {
    margin: 0; /* Usuwa domyślne marginesy wokół nagłówków */
    line-height: 1.4; /* Zapewnia spójny odstęp między wierszami w nagłówkach */
}
.no-style-link {
    color: inherit; /* Kolor linku dziedziczony z rodzica */
    text-decoration: none; /* Usuwa podkreślenie */
}

.no-style-link:hover {
    text-decoration: underline; /* Opcjonalne: podkreślenie przy najechaniu */
}

/* Stylizacja akapitów */
/* Usuwa domyślne marginesy dla akapitów, aby zachować jednolite odstępy */
p {
    margin: 0;
}
/* Podstawowa responsywność */

/* Dla ekranów o szerokości maksymalnej 1200px */
@media (max-width: 1200px) {
    body {
        font-size: 16px; /* Zmienia rozmiar czcionki na 16px dla mniejszych ekranów */
    }

    .container {
        max-width: 960px; /* Ustawia maksymalną szerokość kontenera na 960px */
    }
}

/* Dla ekranów o szerokości maksymalnej 768px */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Zmienia rozmiar czcionki na 14px */
    }

    .container {
        max-width: 720px; /* Ustawia maksymalną szerokość kontenera na 720px */
    }
}

/* Dla ekranów o szerokości maksymalnej 480px */
@media (max-width: 480px) {
    body {
        font-size: 12px; /* Zmienia rozmiar czcionki na 12px */
    }

    .container {
        max-width: 100%; /* Ustawia maksymalną szerokość kontenera na 100% (pełna szerokość ekranu) */
    }
}

/* Stylizacja header */
header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: white;
    margin: 0 20px 0 20px;
    padding: 0;
    height: auto;
    overflow: hidden;
}

/* Lewa sekcja nagłówka */
.header-left {
    width: 50%;
    padding: 40px 60px;
    border-radius: 20px 0 0 0;
    background-color: #7688a1;
    box-sizing: border-box;
    margin: 0;
}

.header-left h1 {
    font-size: 1.5rem;
    margin: 0;
    color: white;
    line-height: 1.2;
}

/* Prawa sekcja nagłówka */
.header-right {
    display: flex;
    width: 50%;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
}

/* Prawa sekcja: ciemna */
.right-dark {
    flex: 3;
    background-color: #7688a1;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.icon-link-dark {
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
}

.icon-link-dark img {
    width: auto;
    height: 60px; /* Wysokość ikon */
    margin-bottom: 10px;
}

.icon-link-dark span {
    font-size: 1rem;
    color: white;
    text-shadow: 0 0 5px white;
}

/* Prawa sekcja: jasna */
.right-light {
    flex: 7;
    background-color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.icon-link {
    text-align: center;
    text-decoration: none;
    color: #7688a1;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}

.icon-link img {
    width: auto;
    height: 60px; /* Wysokość ikon */
    margin-bottom: 10px;
    box-shadow: 0;
}

.icon-link span {
    font-size: 1rem;
    color: #7688a1;
    text-shadow: 0 0 5px white;
}

/* Efekt hover */
.icon-link:hover img, .icon-link-dark:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.icon-link:hover span, .icon-link-dark:hover span {
    color: #556a88;
}

/* Responsywność */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Ustawienie sekcji w układzie pionowym */
        margin: 0 10px; /* Zmniejszenie marginesów */
    }

    .header-left, .header-right {
        width: 100%; /* Pełna szerokość sekcji */
        padding: 20px; /* Zmniejszenie paddingu */
    }

    .header-left {
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .header-left h1 {
        font-size: 1.2rem; /* Zmniejszenie rozmiaru tekstu */
    }

    .right-dark, .right-light {
        width: 100%; /* Pełna szerokość dla sekcji */
        justify-content: center; /* Wyśrodkowanie elementów */
        margin-bottom: 10px; /* Odstępy między sekcjami */
    }

    .icon-link-dark img, .icon-link img {
        height: 40px; /* Zmniejszenie wysokości ikon */
    }

    .icon-link span, .icon-link-dark span {
        font-size: 0.9rem; /* Zmniejszenie rozmiaru tekstu */
    }
}

@media (max-width: 480px) {
    .header-left, .header-right {
        padding: 10px; /* Jeszcze mniejszy padding */
    }

    .header-left h1 {
        font-size: 1rem; /* Dalsze zmniejszenie rozmiaru tekstu */
    }

    .icon-link-dark img, .icon-link img {
        height: 30px; /* Jeszcze mniejsze ikony */
    }

    .icon-link span, .icon-link-dark span {
        font-size: 0.8rem; /* Jeszcze mniejszy tekst */
    }
}

/* Alternatywny header z białym tłem */
.header-alternate {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: white; /* Białe tło */
    margin: 0 20px;
    padding: 0;
    height: auto;
    overflow: hidden;
}

/* Lewa sekcja nagłówka */
.header-alternate-left {
    width: 50%;
    padding: 40px 60px;
    border-radius: 20px 0 0 0;
    background-color: white; /* Białe tło */
    box-sizing: border-box;
    margin: 0;
}

.header-alternate-left h1 {
    font-size: 1.5rem;
    margin: 0;
    color: #7688a1; /* Kolor czcionki */
    line-height: 1.2;
}

/* Prawa sekcja nagłówka */
.header-alternate-right {
    display: flex;
    width: 50%;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
}

/* Prawa sekcja: ciemna */
.right-alternate-dark {
    flex: 3;
    background-color: white; /* Białe tło */
    color: #7688a1; /* Kolor czcionki */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.icon-alternate-link-dark {
    text-align: center;
    text-decoration: none;
    color: #7688a1; /* Kolor czcionki */
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
}

.icon-alternate-link-dark img {
    width: auto;
    height: 60px; /* Wysokość ikon */
    margin-bottom: 10px;
}

.icon-alternate-link-dark span {
    font-size: 1rem;
    color: #7688a1; /* Kolor czcionki */
}

/* Prawa sekcja: jasna */
.right-alternate-light {
    flex: 7;
    background-color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.icon-alternate-link {
    text-align: center;
    text-decoration: none;
    color: #7688a1; /* Kolor czcionki */
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}

.icon-alternate-link img {
    width: auto;
    height: 60px; /* Wysokość ikon */
    margin-bottom: 10px;
}

.icon-alternate-link span {
    font-size: 1rem;
    color: #7688a1; /* Kolor czcionki */
}

/* Efekt hover */
.icon-alternate-link:hover img, .icon-alternate-link-dark:hover img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.icon-alternate-link:hover span, .icon-alternate-link-dark:hover span {
    color: #556a88; /* Lekko ciemniejszy kolor na hover */
}

/* Responsywność */
@media (max-width: 768px) {
    .header-alternate {
        flex-direction: column;
        margin: 0 10px;
    }

    .header-alternate-left, .header-alternate-right {
        width: 100%;
        padding: 20px;
    }

    .header-alternate-left {
        text-align: center;
    }

    .header-alternate-left h1 {
        font-size: 1.2rem;
    }

    .right-alternate-dark, .right-alternate-light {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    .icon-alternate-link-dark img, .icon-alternate-link img {
        height: 40px; /* Zmniejszenie wysokości ikon */
    }

    .icon-alternate-link span, .icon-alternate-link-dark span {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .header-alternate-left, .header-alternate-right {
        padding: 10px;
    }

    .header-alternate-left h1 {
        font-size: 1rem;
    }

    .icon-alternate-link-dark img, .icon-alternate-link img {
        height: 30px; /* Jeszcze mniejsze ikony */
    }

    .icon-alternate-link span, .icon-alternate-link-dark span {
        font-size: 0.8rem;
    }
}


/* Ogólny styl strony */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Tło strony ustawione na białe */
}

/* Styl menu */
.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Tło menu białe */
    padding: 10px;
    border-bottom: 4px solid #7688a1;
}

/* Element menu */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Styl ikony z kształtem ramki "S" */
.menu-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 40px;
    background-color: white;
    border: 2px solid #7688a1;
    border-radius: 15px 0 15px 0; /* Kształt "S" z zaokrągleniami */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

/* Napisy wewnątrz przycisku */
.menu-item .icon span {
    font-size: 14px;
    font-weight: bold;
    color: #7688a1;
    text-align: center;
    transition: color 0.3s ease;
}

/* Efekty najechania myszką */
.menu-item:hover .icon {
    background-color: #556a88;
    border-color: #556a88;
}

.menu-item:hover .icon span {
    color: white;
}

/* Aktywna zakładka */
.menu-item.active .icon {
    background-color: #7688a1;
    border-color: #7688a1;
}

.menu-item.active .icon span {
    color: white;
}





/* Hero Section */
.hero {
    position: relative;
    justify-content: space-between;
    border-radius: 0px;
    margin: 0 20px 20px 20px; /* Dopasowanie marginesów */
    padding: 0; /* Usunięcie wewnętrznych odstępów */
    display: flex;
    overflow: hidden;
}

.hero-left {
    width: 50%;
    padding: 40px 60px;
    background-color: #7688a1; /* Tło sekcji lewej */
    color: white;
    border-radius: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-left .line {
    width: 20%; /* Długość linii: 1/5 szerokości */
    height: 4px; /* Wysokość linii */
    background-color: white; /* Kolor linii */
    margin: 10px 0; /* Odstępy wokół linii */
    border-radius: 2px; /* Zaokrąglenie narożników */
}

/* Kwadrat */
.hero-left .square {
    width: 250px; /* Szerokość kwadratu */
    height: 100px; /* Wysokość kwadratu */
    background-color: #e3f4f3; /* Kolor tła */
    border: 2px solid white; /* Wąska biała ramka */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Cień */
    margin-top: 10px; /* Odstęp od innych elementów */
    border-radius: 10px; /* Zaokrąglenie narożników */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Ustawienie kontekstu dla elementów wewnętrznych */
}

/* Ikona */
.hero-left .square .icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: left;
    align-items: left;
    overflow: hidden; /* Zapewnia, że ikona nie wyjdzie poza granice kwadratu */
}

.hero-left .square .icon-img {
    width: 100%; /* Ustawia szerokość ikony na 100% szerokości kontenera */
    height: auto; /* Proporcjonalne skalowanie ikony */
}

/* Tekst */
.hero-left .square .text {
    font-size: 1rem; /* Wielkość czcionki */
    color: #333; /* Kolor tekstu */
    margin-top: 10px; /* Odstęp od ikony */
    text-align: center;
}

.hero-right {
    position: relative;
    display: flex;
    flex-direction: row; /* Układ w poziomie */
    width: 50%;
}

.hero-right .dark-section {
    flex: 3;
    background-color: #7688a1;
    display: flex;
    justify-content: flex-end; /* Obraz wyrównany do prawej */
    align-items: center;
    position: relative;
    overflow: hidden; /* Ukrycie wykraczających elementów */
}

.hero-right .light-section {
    flex: 7;
    background-color: white;
    display: flex;
    justify-content: flex-start; /* Obraz wyrównany do lewej */
    align-items: center;
    position: relative;
    overflow: hidden; /* Ukrycie wykraczających elementów */
}

/* Styl dla ciemnej wersji light-section */
.hero-right .light-section.light-dark {
    background-color: #7688a1; /* Ciemne tło */
    color: #ffffff; /* Jasny tekst na ciemnym tle */
    border-radius: 0 0 20px 0;

}

.hero-right img {
    position: absolute; /* Obraz uniezależniony od normalnego przepływu */
    height: calc(100% - 10%); /* Wysokość obrazu to 90% sekcji */
    max-height: 100%; /* Nie wykracza poza kontener */
    width: auto; /* Proporcjonalna szerokość */
    max-width: 100%; /* Nie wykracza poza kontener */
    left: 
5%; /* Przesunięcie w lewo, aby zaczynał w dark-section */
    transform: translateX(0); /* Bez dodatkowego przesunięcia */
    z-index: 1; /* Wyższy poziom warstw niż tło */
    pointer-events: none; /* Brak interakcji */
}

/* Responsywność */
/* Adjustments for Tablet */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-left, .hero-right {
        width: 100%;
        padding: 20px;
    }

    .hero-left h1 {
        font-size: 1.6rem;
    }

    .hero-left p {
        font-size: 1rem;
    }

    .hero-right img {
        left: -10%; /* Dopasowanie przesunięcia */
        width: 80%; /* Skalowanie obrazu */
        height: auto;
        transform: translateX(0);
    }
}

/* Adjustments for Mobile */
@media (max-width: 480px) {
    .hero {
        margin: 10px;
    }

    .hero-left {
        padding: 15px;
    }

    .hero-left h1 {
        font-size: 1.4rem;
    }

    .hero-left p {
        font-size: 0.9rem;
    }

    .hero-right img {
        left: -5%; /* Mniejsze przesunięcie dla bardzo małych ekranów */
        width: 70%;
        height: auto;
        transform: translateX(0);
    }
}

/* Ogólne stylizacje dla sekcji informacyjnych */
.info-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px; /* Marginesy jak w hero */
    padding: 40px 20px; /* Wewnętrzne odstępy */
    box-sizing: border-box;
    overflow: hidden;
}

/* Kolory tła */
.info-section.dark {
    background-color: #7688a1; /* Ciemny wariant */
    color: white;
}

.info-section.light {
    background-color: #e3f4f3; /* Jasny wariant */
    color: #333;
}

.info-section.white {
    background-color: #ffffff; /* Biały wariant */
    color: #333;
}

/* Lewa i prawa sekcja */
.info-left, .info-right {
    width: 50%; /* Połowa szerokości */
    padding: 20px;
    box-sizing: border-box;
    text-align: left; /* Wyrównanie tekstu do lewej */
}

.info-left h2, .info-right h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: inherit; /* Dziedziczenie koloru */
}

/* Lista wypunktowania */
.info-left ul, .info-right ul {
    list-style-type: none; /* Usunięcie domyślnych punktów */
    padding: 0;
    margin: 0;
}

.info-left li, .info-right li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 60px; /* Odstęp na punktor */
    font-size: 1.1rem;
    text-align: left; /* Wyrównanie tekstu w liście do lewej */
}

/* Punktory dla ciemnej sekcji */
.info-section.dark li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-image: url('Punktor_b.png'); /* Ikonka dla ciemnej sekcji */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* Punktory dla jasnej sekcji */
.info-section.light li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-image: url('Punktor_c.png'); /* Ikonka dla jasnej sekcji */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Punktory dla białej sekcji */
.info-section.white li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-image: url('Punktor_b.png'); /* Ikonka dla białej sekcji */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Stylizacja obrazu w sekcjach */
.info-right img, .info-left img {
    height: calc(100% - 10%); /* Wysokość obrazu to 90% sekcji */
    max-width: 70%; /* Dopasowanie do szerokości sekcji */
    height: auto; /* Zachowanie proporcji */
    margin-top: 5%; /* 5% odstępu u góry */
    margin-bottom: 5%; /* 5% odstępu u dołu */
    display: block; /* Zapewnia poprawne skalowanie w kontenerze */
    object-fit: contain; /* Dopasowanie obrazu */
    transition: transform 0.3s ease; /* Efekt hover */

}


/* Linia dekoracyjna w info-left */
.info-left .line {
    width: 20%; /* Długość linii: 1/5 szerokości */
    height: 4px; /* Wysokość linii */
    background-color: white; /* Kolor linii */
    margin: 10px 0; /* Odstępy wokół linii */
    border-radius: 2px; /* Zaokrąglenie narożników */
}

/* Linia dekoracyjna w info-right */
.info-right .line {
    width: 20%; /* Długość linii: 1/5 szerokości */
    height: 4px; /* Wysokość linii */
    background-color: white; /* Kolor linii */
    margin: 10px 0; /* Odstępy wokół linii */
    border-radius: 2px; /* Zaokrąglenie narożników */
}

/* Kolory dla różnych wariantów */
.info-left.dark .line, .info-right.dark .line {
    background-color: #7688a1; /* Kolor dla ciemnego wariantu */
}

.info-left.light .line, .info-right.light .line {
    background-color: #e3f4f3; /* Kolor dla jasnego wariantu */
}

.info-left.white .line, .info-right.white .line {
    background-color: #ffffff; /* Kolor dla białego wariantu */
}


/* Responsywność */
@media (max-width: 768px) {
    .info-section {
        flex-direction: column;
        text-align: center; /* Dla całej sekcji na mniejszych ekranach */
    }

    .info-left, .info-right {
        width: 100%;
        padding: 20px;
    }

    .info-left, .info-right {
        text-align: left; /* Utrzymanie wyrównania tekstu do lewej */
    }

    .info-right img {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .info-left .line, .info-right .line {
        width: 30%; /* Większa linia na mniejszych ekranach */
    }
}

@media (max-width: 480px) {
    .info-section {
        text-align: center; /* Dostosowanie dla bardzo małych ekranów */
    }

    .info-left, .info-right {
        padding: 10px; /* Jeszcze mniejsze odstępy */
    }

    .info-left img, .info-right img {
        max-width: 70%; /* Skalowanie obrazu dla bardzo małych ekranów */
    }

    .info-left .line, .info-right .line {
        width: 40%; /* Jeszcze większa linia na bardzo małych ekranach */
    }
}

/* Stylizacja dla sekcji wyników */
.results-section {
    background-color: #e3f4f3; /* Jasne tło dla sekcji */
    padding: 20px; /* Odstępy wokół sekcji */
    position: relative; /* Pozycja relatywna względem otaczającego tekstu */
    margin: 20px auto; /* Wyśrodkowanie na stronie */
    max-width: 1000px; /* Maksymalna szerokość sekcji */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Cień dla sekcji */
    text-align: center; /* Wyśrodkowanie zawartości */
}

/* Wewnętrzna ramka */
.results-section .inner-frame {
    background-color: white; /* Białe tło dla ramki */
    padding: 20px; /* Odstępy wewnętrzne */
    border-radius: 8px; /* Zaokrąglenie narożników */
    border: 1px solid #ccc; /* Jasna ramka */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    text-align: center; /* Wyśrodkowanie zawartości */
    position: relative; /* Pozycja relatywna */
}

/* Logo z podpisem */
.results-section .inner-frame .logo {
    width: 200px; /* Szerokość kontenera */
    height: auto; /* Automatyczna wysokość */
    margin: 0 auto; /* Wyśrodkowanie */
    text-align: center; /* Wyśrodkowanie zawartości */
    position: relative; /* Ustawienie pozycji dla pseudo-elementów */
}

/* Logo z podpisem */
.results-section .inner-frame .logo::before {
    content: ""; /* Pseudo-element jako obrazek */
    display: block; /* Element blokowy */
    width: 150px; /* Szerokość obiektu */
    height: 150px; /* Wysokość obiektu */
    margin: 0 auto; /* Wyśrodkowanie */
    background-image: url('Logo.png'); /* Ścieżka do obrazu */
    background-size: contain; /* Dopasowanie obrazu */
    background-repeat: no-repeat; /* Brak powtarzania */
    background-position: center; /* Wyśrodkowanie obrazu */
}

/* Podpis poniżej obiektu */
.results-section .inner-frame .logo::after {
    content: "INDYWIDUALNA SPECJALISTYCZNA PRAKTYKA LEKARSKA AGNIESZKA NIEMIEC"; /* Treść podpisu */
    display: block; /* Wyświetlanie jako blok */
    margin-top: 10px; /* Odstęp od obrazka */
    font-size: 14px; /* Rozmiar czcionki */
    color: #333; /* Kolor tekstu */
    text-align: center; /* Wyśrodkowanie tekstu */
    line-height: 1.4; /* Wysokość linii */
    font-weight: normal; /* Waga czcionki */
}


/* Responsywność dla ekranów 768px */
@media (max-width: 768px) {
    .results-section .inner-frame .logo::before {
        max-width: 120px; /* Mniejsze logo */
        height: 120px; /* Zmniejszona wysokość logo */
    .results-section .inner-frame .logo::after {
        font-size: 12px; /* Mniejszy podpis */
        margin-top: 8px; /* Zmniejszony odstęp */
    }

    .results-section .inner-frame {
        padding: 15px; /* Zmniejszenie odstępów wewnętrznych */
    }
}

/* Responsywność dla ekranów 480px */
@media (max-width: 480px) {
    .results-section .inner-frame .logo::before {
        max-width: 100px; /* Jeszcze mniejsze logo */
        height: 100px; /* Zmniejszona wysokość logo */
    .results-section .inner-frame .logo::after {
        font-size: 10px; /* Jeszcze mniejszy podpis */
        margin-top: 5px; /* Zmniejszony odstęp */
    }

    .results-section .inner-frame {
        padding: 10px; /* Minimalne odstępy wewnętrzne */
    }
}

/* Tabela BMI */
.results-section .bmi-table {
    width: 100%; /* Szerokość tabeli */
    border-collapse: collapse; /* Brak przerw między komórkami */
    margin: 20px auto; /* Wyśrodkowanie tabeli */
    font-size: 0.9rem; /* Rozmiar tekstu */
    text-align: center; /* Wyśrodkowanie tekstu w komórkach */
}

.results-section .bmi-table th,
.results-section .bmi-table td {
    border: 1px solid #ccc; /* Obramowanie komórek */
    padding: 5px; /* Odstęp wewnętrzny */
}

.results-section .bmi-table th {
    background-color: #f2f2f2; /* Jasne tło nagłówków */
    font-weight: bold; /* Pogrubienie tekstu w nagłówkach */
}

.results-section .bmi-table .white {
    background-color: white; /* Żółte tło */
}

.results-section .bmi-table .yellow {
    background-color: #e3f4f3; /* Żółte tło */
}

.results-section .bmi-table .red {
    background-color: #7688a1; /* Czerwone tło */
}

.results-section .bmi-table .pink {
    background-color: #566b81; /* Różowe tło */
}

.results-section .bmi-table .vlack {
    background-color: black; /* Różowe tło */
}

.results-section .inner-frame h2 {
    margin-bottom: 20px; /* Odstęp pod tytułem */
    font-size: 1.5rem; /* Większy rozmiar czcionki dla tytułu */
    color: #333; /* Kolor tytułu */
}

.results-section .inner-frame p {
    margin: 10px 0; /* Odstępy między liniami tekstu */
    font-size: 1rem; /* Rozmiar czcionki dla wyników */
    color: #333; /* Kolor tekstu */
}

/* Responsywność */
@media (max-width: 768px) {
    .results-section {
        padding: 15px; /* Zmniejszone odstępy wokół sekcji */
        max-width: 90%; /* Szerokość sekcji na mniejszych ekranach */
    }

    .results-section .inner-frame {
        padding: 15px; /* Zmniejszone odstępy w ramce */
    }

    .results-section .inner-frame .logo {
        max-width: 100px; /* Mniejsza szerokość logo */
        height: 100px; /* Mniejsza wysokość logo */
    }

    .results-section .inner-frame h2 {
        font-size: 1.2rem; /* Mniejszy rozmiar tytułu */
    }

    .results-section .inner-frame p {
        font-size: 0.9rem; /* Mniejszy rozmiar tekstu */
    }
}

@media (max-width: 480px) {
    .results-section {
        padding: 10px; /* Jeszcze mniejsze odstępy */
    }

    .results-section .inner-frame {
        padding: 10px; /* Dalsze zmniejszenie odstępów w ramce */
    }

    .results-section .inner-frame .logo {
        max-width: 80px; /* Jeszcze mniejsza szerokość logo */
        height: 80px; /* Jeszcze mniejsza wysokość logo */
    }

    .results-section .inner-frame h2 {
        font-size: 1rem; /* Jeszcze mniejszy rozmiar tytułu */
    }

    .results-section .inner-frame p {
        font-size: 0.8rem; /* Jeszcze mniejszy rozmiar tekstu */
    }
}
/* Footer */
footer {
    background: white;
    color: white;
    padding: 20px 10px;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-left, .footer-right {
    display: flex;
    align-items: center;
}

.footer-left a {
    color: white;
    margin-right: 10px;
    text-decoration: none;
    font-size: 1rem;
}

.footer-left a img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

.footer-right p {
    font-size: 0.9rem;
    margin: 0;
}