html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    margin: 0;
    padding-bottom: 60px; /* Wysokość stopki */
    background: linear-gradient(135deg, rgb(27, 228, 207) 43%, rgb(235, 16, 218) 64%);
    color: #FFFFFF; /* Zmieniony na biały kolor tekstu */
    font-family: 'Georgia';
    
}

.custom-email-footer {
    text-align: center; /* Wyśrodkowanie tekstu */
    font-size: 14px; /* Rozmiar czcionki */
    color: #FFFFFF; /* Zmieniony na biały kolor tekstu */
}

    .custom-email-footer a {
        color: #FFFFFF; /* Zmieniony na biały kolor linków */
        text-decoration: underline; /* Podkreślenie linków */
    }

        .custom-email-footer a:hover {
            color: #eb0ec3; /* Kolor linków po najechaniu kursorem */
        }

/* Styl dla stopki */
.footer {
    position: absolute; /* Ustawienie stopki na stałe */
    bottom: 0; /* Umieszczenie stopki na dole */
    width: 100%;
    background-color: rgba(0, 0, 0, 0); /* Przezroczyste tło */
    color: #00ff00; /* Zielony kolor tekstu */
    padding: 10px 0; /* Wewnętrzny odstęp stopki */
    text-align: center; /* Wyśrodkowanie tekstu */
    z-index: 999; /* Ustawienie wysokiej warstwy */
}

/* Styl dla przycisków */
.navbar-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Zawijanie elementów na następną linię, gdy nie mieszczą się na ekranie */
}

    .navbar-nav .nav-item {
        margin-right: 10px; /* Dodatkowy margines między przyciskami */
        margin-bottom: 10px; /* Dodatkowy margines na dole przycisków */
    }

    .navbar-nav .nav-link {
        font-weight: bold; /* Pogrubiona czcionka */
        padding: 20px 35px; /* Wewnętrzny odstęp dla dłuższych prostokątów */
        border: 2px solid #FF69B4; /* Zmieniona na różową ramkę */
        border-radius: 5px; /* Zaokrąglenie rogów */
        min-width: 215px; /* Minimalna szerokość z uwzględnieniem szerszej ramki i większego marginesu */
        height: 60px; /* Wysokość kafli */
        display: flex; /* Włączanie układu flexbox */
        justify-content: center; /* Wyśrodkowanie tekstu w pionie */
        align-items: center; /* Wyśrodkowanie tekstu w poziomie */
        color: #FF69B4; /* Zmieniony na różowy kolor tekstu */
        transition: color 0.3s, background-color 0.3s, border-color 0.3s; /* Dodanie efektu przejścia */
    }

        .navbar-nav .nav-link:hover {
            color: #0CEDDE; /* Zmieniony kolor tekstu po najechaniu */
            background-color: #FF69B4; /* Zmieniony kolor tła po najechaniu */
            border-color: #0CEDDE; /* Zmieniony kolor ramki po najechaniu */
        }

/*obrazek Stomatologia Estetyczna*/
.button-icon {
    width: 40px; /* Szerokość obrazka */
    height: 40px; /* Wysokość obrazka */
    margin-right: 10px; /* Dodatkowy margines po prawej stronie tekstu przycisku */
}

/* Styl dla obrazków w nagłówku z różowym obramowaniem */
header .container .row .col img {
    width: 50px; /* Domyślny rozmiar obrazka na szerokich ekranach */
    height: 50px; /* Domyślny rozmiar obrazka na szerokich ekranach */
    border: 2px solid #FF69B4; /* Zmieniona na różowe obramowanie */
    border-radius: 10px; /* Opcjonalnie: dodaje zaokrąglone rogi */
    margin: 0; /* Usuwa domyślne marginesy */
    padding: 0; /* Usuwa domyślne wcięcia */
}

/* Styl dla obrazków w nagłówku na mniejszych ekranach */
@media (max-width: 768px) {
    header .container .row .col img {
        width: 40px; /* Zmniejsz rozmiar obrazka na mniejszych ekranach */
        height: 40px; /* Zmniejsz rozmiar obrazka na mniejszych ekranach */
    }
}

/* Styl dla przycisku zmiany motywu */
.toggle-theme-btn {
    position: fixed;
    bottom: 80px;
    right: 10px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 24px;
}

/* Styl dla trybu jasnego */
body.light-mode {
    background-color: white; /* Białe tło */
    color: black; /* Czarny tekst */
}

    body.light-mode .navbar,
    body.light-mode .footer,
    body.light-mode header {
        background-color: #f8f9fa; /* Jasnoszare tło */
        color: black; /* Czarny tekst */
    }

        body.light-mode .navbar-nav .nav-link,
        body.light-mode .footer a {
            color: black !important; /* Czarny tekst dla linków nawigacyjnych */
            border-color: black; /* Czarna ramka */
        }

            body.light-mode .navbar-nav .nav-link:hover,
            body.light-mode .footer a:hover {
                color: white !important; /* Biały tekst po najechaniu */
                background-color: black; /* Czarne tło po najechaniu */
            }

    body.light-mode .toggle-theme-btn {
        background-color: black; /* Czarne tło dla przycisku przełączania */
        color: white; /* Biały tekst dla przycisku przełączania */
    }

    body.light-mode .btn:focus,
    body.light-mode .btn:active:focus,
    body.light-mode .btn-link.nav-link:focus,
    body.light-mode .form-control:focus,
    body.light-mode .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem black, 0 0 0 0.25rem #258cfb; /* Czarny cień po zaznaczeniu */
    }

    body.light-mode mark {
        background-color: white; /* Białe tło dla znacznika */
        color: black; /* Czarny tekst dla znacznika */
    }

    body.light-mode .btn,
    body.light-mode .nav-link {
        background-color: white; /* Białe tło */
        color: black; /* Czarny tekst */
    }

        body.light-mode .btn:hover,
        body.light-mode .nav-link:hover {
            background-color: black; /* Czarne tło po najechaniu */
            color: white; /* Biały tekst po najechaniu */
        }

    body.light-mode .container,
    body.light-mode .row,
    body.light-mode .col,
    body.light-mode h4,
    body.light-mode p,
    body.light-mode a {
        background-color: white; /* Białe tło */
        color: black; /* Czarny tekst */
    }

    body.light-mode img {
        border-color: black; /* Czarna ramka dla obrazków */
    }

    body.light-mode .btn-ok,
    body.light-mode .btn-ok:focus,
    body.light-mode .btn-ok:active:focus,
    body.light-mode .btn-ok:hover {
        background-color: black; /* Czarne tło */
        color: white; /* Biały tekst */
    }

        body.light-mode .btn-ok:hover {
            color: white !important; /* Zapewnienie białego tekstu po najechaniu */
            background-color: black !important; /* Zapewnienie czarnego tła po najechaniu */
        }

        body.light-mode .btn-ok:focus,
        body.light-mode .btn-ok:active:focus {
            color: white !important; /* Zapewnienie białego tekstu po zaznaczeniu */
            background-color: black !important; /* Zapewnienie czarnego tła po zaznaczeniu */
            box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem black; /* Biały cień po zaznaczeniu */
        }

    body.light-mode .change-to-black {
        color: black !important; /* Wymuszenie czarnego tekstu */
    }

    body.light-mode .blinking-text.center.black-background {
        background-color: black !important; /* Czarne tło */
        color: white !important; /* Biały tekst */
    }

    body.light-mode .highlighted-text {
        color: black; /* Czarny tekst dla nagłówka */
    }



    body.light-mode header h4,
    body.light-mode header p mark {
        color: black !important; /* Czarny tekst dla nagłówka i znacznika */
    }

    body.light-mode h4.font-weight-bold {
        color: black !important; /* Czarny tekst dla nagłówków h4 */
    }

        body.light-mode h4.font-weight-bold mark {
            color: black !important; /* Czarny tekst dla znacznika mark w nagłówkach h4 */
        }




/* Stylizacja dla przycisków */
#zoom-in, #zoom-out, #reset {
    position: fixed; /* Elementy są umieszczone w stałym miejscu */
    left: 10px; /* Odległość od lewej krawędzi ekranu */
    width: 40px; /* Szerokość przycisku */
    height: 40px; /* Wysokość przycisku */
    background-color: transparent; /* Przezroczyste tło */
    border: 1px solid transparent; /* Transparentne obramowanie */
    border-radius: 5px; /* Zaokrąglenie narożników */
    cursor: pointer; /* Zmiana kursora przy najechaniu */
    z-index: 9999; /* Zawsze na wierzchu */
    display: flex; /* Ustawienie flexboxa */
    align-items: center; /* Wyśrodkowanie ikony pionowo */
    justify-content: center; /* Wyśrodkowanie ikony poziomo */
    font-size: 20px; /* Rozmiar ikony */
    color: #ff69b4; /* Kolor ikony */
}

/* Pozycjonowanie przycisków zoom oraz ich stylizacja  */
#zoom-in {
    top: calc(50% - 60px); /* Wyśrodkowanie pionowe z uwzględnieniem odstępu */
}

#zoom-out {
    top: calc(50% - 10px); /* Wyśrodkowanie pionowe poniżej pierwszego przycisku */
}

#reset {
    top: calc(50% + 40px); /* Wyśrodkowanie pionowe poniżej drugiego przycisku */
}

    /* Stylizacja przycisków przy najechaniu myszką */
    #zoom-in:hover, #zoom-out:hover, #reset:hover {
        background-color: rgba(0, 0, 0, 0.1); /* Lekko ciemniejsze tło przy najechaniu */
        border: 1px solid #ccc; /* Dodanie obramowania przy najechaniu */
    }

/* Stylizacja tooltipów */
.tooltip {
    position: absolute;
    left: 50px; /* Pozycja obok przycisku */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    display: none;
    white-space: nowrap;
    z-index: 9999; /* Zawsze na wierzchu */
}

/* --- Navigation Menu Styles --- */
.navbar-nav .nav-link {
    font-weight: 600;
    font-size: 14px;
    padding: 12px 25px;
    border: 2px solid #00ffea; /* Turquoise border */
    border-radius: 50px; /* Rounded buttons */
    min-width: 160px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #ff80bf; /* Lighter pink */
    transition: transform 0.3s ease, color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Playfair Display', serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.2); /* 3D effect */
}

    .navbar-nav .nav-link:hover {
        color: #fff;
        background: #00ffea; /* Intense turquoise on hover */
        border-color: #ff80bf; /* Lighter pink on hover */
        transform: scale(1.08);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.3); /* 3D effect on hover */
    }

.dropdown-menu .dropdown-item {
    color: #ff80bf;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s, background-color 0.3s;
    padding: 8px 15px;
    border-radius: 10px;
    margin: 5px 0;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    font-family: 'Playfair Display', serif;
    border: 2px solid transparent; /* Added border */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.2); /* 3D effect */
}

    .dropdown-menu .dropdown-item:hover {
        color: #fff;
        background: #ff80bf;
        border-color: #00ffea; /* Turquoise border on hover */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.3); /* 3D effect on hover */
    }
.navbar {
    display: flex;
    justify-content: center; /* Wyśrodkuj poziomo */
    align-items: center; /* Wyśrodkuj pionowo */
    
}
.navbar-toggler {
    color: #fff;
    background: #ff80bf;
    border: 2px solid #00ffea; /* Turquoise border */
    padding: 10px 20px;
    border-radius: 50px; /* Rounded buttons */
    transition: background-color 0.3s, color 0.3s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.2); /* 3D effect */
    margin-left: 110px; /* Przesunięcie w prawo */
}

    .navbar-toggler:hover {
        background: #00ffea;
        color: #fff;
        border-color: #ff80bf; /* Lighter pink on hover */
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.3), 3px 3px 6px rgba(0, 0, 0, 0.3); /* 3D effect on hover */
    }

.menu-text {
    margin-left: 10px;
    font-weight: 600;
    color: #ff80bf;
    font-family: 'Playfair Display', serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 2px 2px 4px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.2); /* 3D effect */
}

.button-modern {
    position: fixed; /* Przyczepienie do ekranu */
    top: 20px; /* Odległość od góry ekranu */
    left: 50%; /* Centrowanie poziome */
    transform: translateX(-50%); /* Przesunięcie o połowę szerokości przycisku w lewo, aby go wyrównać */
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    border: none;
    border-radius: 20px; /* Większy zaokrąglony narożnik */
    padding: 5px 15px; /* Mniejsza wysokość i szerokość przycisku */
    font-size: 14px; /* Wielkość czcionki */
    font-weight: bold; /* Pogrubiona czcionka */
    cursor: pointer;
    transition: background 0.3s ease, text-decoration 0.2s ease; /* Usunięcie efektu transformacji */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Sprawia, że przycisk będzie nad innymi elementami */
    display: flex; /* Ustawienie elementów wewnątrz przycisku */
    align-items: center;
    justify-content: center;
    max-width: 300px; /* Maksymalna szerokość przycisku */
}

    .button-modern img {
        margin-right: 8px; /* Odstęp między ikoną a tekstem */
    }

    .button-modern:hover {
        background: linear-gradient(45deg, #ff1493, #ff69b4);
        text-decoration: underline; /* Tylko zmiana tła i podkreślenie */
    }

    .button-modern:focus {
        outline: none;
    }


/* Dodatkowe style dla przycisków i tooltipów */
.informacja-kontenery {
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisków poziomo */
    align-items: center; /* Wyśrodkowanie przycisków pionowo */
    margin: 10px;
    gap: 20px; /* Odstęp między przyciskami */
    flex-wrap: wrap; /* Pozwala na zawijanie się przycisków w przypadku małych ekranów */
}

.informacja-container {
    position: relative;
    display: flex;
    flex-direction: row; /* Zmiana na row, aby elementy były w rzędzie */
    align-items: center;
}

.informacja-przycisk {
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
    position: relative;
    margin-right: 5px; /* Zmniejszony margines między przyciskiem a tekstem */
}

.informacja-tekst {
    font-size: 16px;
}

    .informacja-tekst:hover {
        color: blue;
        text-decoration: underline;
    }

.tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -90px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
}

.informacja-container:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.obrazek {
    width: 100%;
    max-width: 1000px; /* Maksymalna szerokość */
    height: auto;
    display: none;
    margin: 10px 0;
    position: relative;
    z-index: 10;
    overflow: hidden; /* Ukrycie elementów wykraczających poza kontener */
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    max-height: 0; /* Początkowo ukrycie */
    opacity: 0; /* Początkowo ukrycie */
}

    .obrazek.show {
        display: block;
        max-height: 1000px; /* Wystarczająca wysokość do pełnego wyświetlenia obrazka */
        opacity: 1; /* Pełna widoczność */
    }




.highlightable {
    cursor: pointer;
    transition: color 0.3s, text-decoration 0.3s; /* Płynna zmiana stylu */
}

    .highlightable:hover {
        color: #0000EE; /* Opcjonalna zmiana koloru tekstu na niebieski */
        text-decoration: underline; /* Podkreślenie tekstu */
    }





/* CSS for RTG symbols in the corners */
.corner-rtg {
    position: fixed;
    width: 50px; /* Adjust the size as needed */
    height: 50px;
    opacity: 0.5; /* Optional: to make the symbol semi-transparent */
    z-index: 9999;
}

    .corner-rtg.top-left {
        top: 10px;
        left: 10px;
    }

    .corner-rtg.top-right {
        top: 10px;
        right: 10px;
    }

    .corner-rtg.bottom-left {
        bottom: 10px;
        left: 10px;
    }

    .corner-rtg.bottom-right {
        bottom: 10px;
        right: 10px;
    }