/* Globalne użycie czcionki */
body {
    font-family: "neue-haas-grotesk-display", Helvetica, sans-serif;
    font-weight: 400; /* Domyślna waga */
    font-style: normal;
    overflow-x: hidden; /* Zapobiega poziomemu paskowi przewijania */
}

/* Przykładowe klasy dla różnych wag */
.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

.navbar {
    background-color: #ffffff;
}
.navbar-nav {
    gap: 1rem; /* Dodatkowy odstęp między elementami dla lepszego "rozstrzelenia" */
    flex-wrap: wrap; /* Zapobiega overflow w menu */
    justify-content: space-between; /* Wyśrodkowanie elementów menu */
    max-width: 1140px; /* Maksymalna szerokość zgodna z Bootstrap container */
    margin: 0 auto; /* Wyśrodkowanie w kontenerze */
}
.navbar-brand {
    margin-right: 0; /* Usuń domyślny margines logo */
}
.text-dark-gray {
    color: #757a7e !important; /* Zaktualizowany kolor na #757a7e */
    font-size: 1rem; /* Domyślna czcionka nawigacji */
}
.nav-button {
    padding: 0.25rem 1rem; /* Oryginalny padding */
    height: 40px; /* Oryginalna wysokość */
    font-size: 1rem; /* Czcionka jak w opcji 'Kontakt' */
    font-weight: 500; /* Waga czcionki jak w opcji 'Kontakt' */
    line-height: 1; /* Wyśrodkowanie tekstu */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-dark {
    background-color: #00bfff !important; /* Czarne tło dla buttonów */
    border-color: #00bfff !important;
    border-radius: 20px; /* Symetryczny radius */
}
.btn-dark:hover {
    background-color: #33ccff !important; /* Lekko jaśniejszy na hover */
}
.btn-yl {
    background-color: #ffd700 !important; /* Czarne tło dla buttonów */
    border-color: #ffd700 !important;
    border-radius: 20px; /* Symetryczny radius */
}
.btn-yl:hover {
    background-color: #ffec00 !important; /* Lekko jaśniejszy na hover */
}
.btn-yellow.custom-height.rounded-partial {
    padding: 1rem 1rem; /* Zwiększona wysokość przez większy padding w pionie */
    height: 60px; /* Stała wysokość */
    width: auto; /* Zachowuje pierwotną szerokość */
    border-radius: 20px; /* Symetryczny radius na każdym rogu */
    font-size: 1.7rem; /* Większa czcionka */
    line-height: 1; /* Wyśrodkowanie tekstu w pionie */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-blue.custom-height.rounded-partial {
    padding: 1rem 1rem; /* Zwiększona wysokość przez większy padding w pionie */
    height: 60px; /* Stała wysokość */
    width: auto; /* Zachowuje pierwotną szerokość */
    border-radius: 20px; /* Symetryczny radius na każdym rogu */
    font-size: 1.7rem; /* Większa czcionka */
    line-height: 1; /* Wyśrodkowanie tekstu w pionie */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-yellow {
    background-color: #ffd700;
    color: #000;
    border: none;
}
.btn-yellow:hover {
    background-color: #ffcc00;
}
.btn-blue {
    background-color: #00bfff;
    color: white;
    border: none;
}
.btn-blue:hover {
    background-color: #009acd;
}
.hero {
    position: relative; /* Dla absolute buttona */
}
.hero-container {
    background-image: url('../images/hero.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    padding: 240px 0; /* Zmniejszony padding z 280px na 240px */
    position: relative; /* Dla absolute wrappera */
}
.hero-title {
    font-size: 4rem; /* Większa czcionka */
    line-height: 1.2;
}
.hero-title .line1 {
    font-weight: 600; /* Odrobinę większy font-weight niż wcześniej (500 -> 600), mniejszy niż BON (900) */
}
.hero-title .line2 .bold-bon {
    font-weight: 900; /* Bez zmian dla BON */
}
.hero-subtitle {
    font-size: 1.7rem; /* Zwiększenie o 2px z 1.5rem (1.5rem ≈ 24px, 1.7rem ≈ 27px) */
    margin-top: 2rem; /* Trochę niżej */
    display: inline-block;
    background-color: #000; /* Czarne tło */
    color: #fff; /* Białe litery */
    padding: 0.5rem 1rem; /* Padding dla tła */
    border-radius: 50px; /* Zaokrąglone jak buttony */
}
.hero-subtitle .bold-start {
    font-weight: 600; /* Trochę pogrubione dla "Start Programu" */
}
.button-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2rem; /* Dostosowane dla wysokości wrappera */
    border: 2px solid #ffd700; /* Żółta ramka */
    padding: 5px; /* Przezroczysta przestrzeń między ramką a buttonem */
    background: transparent;
    border-radius: 20px; /* Symetryczny radius na każdym rogu */
    display: inline-block; /* Dla dopasowania do buttona */
}
.button-wrapper-blue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2rem; /* Identycznie jak żółty – wystaje połową na carousel */
    border: 2px solid #00bfff; /* Niebieska ramka */
    padding: 5px; /* Przezroczysta przestrzeń między ramką a buttonem */
    background: transparent;
    border-radius: 20px; /* Symetryczny radius na każdym rogu */
    display: inline-block; /* Dla dopasowania do buttona */
}
.card {
    border: none;
}
.card img {
    height: 200px; /* Stały rozmiar dla wszystkich zdjęć w kartach */
    width: 100%; /* Pełna szerokość karty */
    object-fit: cover; /* Zachowuje proporcje bez zniekształceń */
}
.carousel-inner .carousel-item {
    transition: transform 0.5s ease; /* Gładkie przewijanie */
}
.carousel-item img {
    height: 300px; /* Stały rozmiar wysokości */
    object-fit: cover; /* Zachowuje proporcje */
}
.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Szerokość dla strzałek poza zdjęciami */
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: black; /* Dla widoczności strzałek */
}
.footer {
    background-color: #ffffff; /* Tymczasowo biała stopka */
    color: black; /* Napisy czarne */
    padding: 20px 0;
}
.footer .footer-wave {
    width: 100%; /* Fala na całą szerokość, ale treść w containerze */
    margin-bottom: 0; /* Usunięcie nakładania */
}
.footer .wave-image {
    width: 100%;
    height: auto;
    display: block;
}
.footer .footer-content {
    position: relative;
    z-index: 2;
    padding-top: 20px; /* Odstęp od falki */
}
.footer-logo {
    margin-right: 20px; /* Przysunięcie logo bliżej innych kolumn */
}
.footer-logo-col {
    position: relative; /* Pozwala na absolute positioning logo względem kolumny */
}
.footer-logo-round {
    position: absolute; /* Absolutne pozycjonowanie, aby nachodziło na falę */
    right: 0; /* Po prawej stronie */
    top: -290px; /* Przesunięcie w górę, aby nachodziło na falę – dostosuj wartość (np. -100px) w zależności od wysokości falki */
    z-index: 3; /* Wyżej niż content (z-index: 2) i falka */
    transform: translateY(50%); /* Lekkie wyśrodkowanie pionowe, aby częściowo nachodziło */
}
.logo-round-image {
    width: 200px; /* Rozmiar logo – dostosuj do potrzeb (np. 120px) */
    height: 200px; /* Kwadratowy dla okrągłego efektu */
    object-fit: contain; /* Zachowuje proporcje logo */
    display: block;
}
/* Dostosowanie dla mniejszych ekranów (responsywność, jak w Elementorze) */
@media (max-width: 767px) {
    .footer-logo-round {
        position: static; /* Na mobile nie nachodzi, tylko pod spodem */
        margin: 20px auto; /* Wyśrodkowane */
        text-align: center;
    }
    
    .logo-round-image {
        width: 80px; /* Mniejszy na mobile */
        height: 80px;
    }
}
.footer a {
    color: black;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.dropdown-menu {
    background-color: #000; /* Czarne tło */
    border-radius: 0; /* Bez zaokrągleń */
    border: none; /* Bez obramowania */
}
.dropdown-item {
    color: #fff; /* Białe napisy */
    font-weight: 500; /* Zgodne z nawigacją */
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #333; /* Lekko szary hover */
    color: #fff; /* Białe napisy na hover */
}
.cards-section {
    background-image: url('../images/prawa.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.carousel-section {
    background-image: url('../images/lewa.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.animate-section {
    opacity: 0;
    transform: translateX(0);
    transition: opacity 1s ease, transform 1s ease; /* Wolniejsza animacja */
}
.animate-section[data-direction="left"] {
    transform: translateX(-100px);
}
.animate-section[data-direction="right"] {
    transform: translateX(100px);
}
.animate-section.visible {
    opacity: 1;
    transform: translateX(0);
}
.modern-form .modern-label {
    font-size: 1.2rem; /* Większa czcionka dla labeli */
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}
.modern-form .modern-input {
    height: 50px; /* Wyższe pola input */
    font-size: 1rem;
    padding: 10px 15px; /* Więcej paddingu dla nowoczesnego wyglądu */
}
.modern-form .is-invalid {
    border-color: #dc3545; /* Czerwony border dla błędów */
    background-color: #fef2f2; /* Przytłumione czerwone tło */
}
.modern-form .is-invalid:focus {
    border-color: #dc3545; /* Czerwony border przy fokusie */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Niebieska poświata jak w Bootstrapie */
}
.modern-form .is-valid {
    border-color: #198754; /* Zielony border dla poprawnych pól */
    background-color: #e8f3ef; /* Przytłumione zielone tło */
}
.modern-form .is-valid:focus {
    border-color: #198754; /* Zielony border przy fokusie */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25); /* Niebieska poświata jak w Bootstrapie */
}

.alert {
    font-size: 1.5rem;
    text-align: center;
}
.alert ul {
    list-style-position: inside;
}
#map {
    height: 400px;
    width: 100%;
    margin-bottom: 1rem;
}
.instruction-section {
    background-color: #f8f9fa; /* Delikatne szare tło */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}
.instruction-section a {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}
.instruction-section a:hover {
    text-decoration: underline;
}
.instruction-section i {
    margin-right: 8px;
    font-size: 1.5rem;
}