/* Reset some default styles */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	  color: #fff;
}

/* General Styles */
body {
    font-family: Arial, sans-serif;
    color: #fff;
    background-color: #2e3a47; /* Dark navy background */
}

header {
    background-color: #000;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
h3 {
    text-align: justify;
}

.navbar h1 {
    float: left;
    margin: 0;
}

.navbar nav {
    float: right;
}

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

.navbar ul li {
    display: inline;
    margin-left: 20px;
}

.navbar ul li a {
    color: #fff;
    text-decoration: none;
}
.navbar ul li:last-child {
    margin-right: 30px; /* Większy margines dla ostatniego elementu */
}
/* Hero Section */
.hero {
    text-align: center;
    padding: 0;
    position: relative;
}

.hero-image {
    width: 100%;
	height: auto;
}

.cta-button {
    display: inline-block;
    background-color: #d32f2f;
    color: #fff;
    padding: 20px 40px; /* Zmienione padding dla równomiernego odstępu */
    text-decoration: none;
    border-radius: 10px;
    position: fixed; /* Zmiana na fixed, aby przycisk był zawsze w tym samym miejscu */
    bottom: 20px; /* Pozycja od dołu ekranu */
    right: 20px; /* Pozycja od prawej strony ekranu */
    font-size: 24px;
}
/* Section Styles */
.section-banner {
    background-color: #1a2b3d;
    padding: 0px;
    text-align: center;
		color: #fff;
}
.section-content {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}
.odstep {
  margin-top: 20px; /* Dodaje 20px odstępu między pierwszą a drugą linią */
  display: block; /* Zapewnia, że margines działa poprawnie */
}
.section-why-bu {
	padding: 20px;
	color: #fff;
	margin-top: 20px;

}
.section-text {
	width: 60%;
	margin-right: 20px; /* Creates space between text and image */
	margin-top: 20px;
	text-align: center;
	text-align: justify;
}
.section-logo {
    width: 40%;
    text-align: right; /* Aligns the image to the right */
}
.logo-image {
    width: 100%; /* Ensures the image fills the 40% width of its container */
    max-width: 300px; /* Limits the maximum width of the image */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Optional - adds rounded corners to the image */
}
.section-coaches {
	padding: 20px;
	color: #fff;
	margin-top: 20px;
}
.section-text-coaches {
	width: 60%;
	margin-right: 20px; /* Creates space between text and image */
	margin-top: 20px;
	text-align: center;
	text-align: justify;
}
.section-logo-coaches {
    width: 40%;
    text-align: right; /* Aligns the image to the right */
}
.logo-image-coaches {
    width: 100%; /* Ensures the image fills the 40% width of its container */
    max-width: 300px; /* Limits the maximum width of the image */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5px; /* Optional - adds rounded corners to the image */
}
/* Training Options */
.table-container {
    overflow-x: auto; /* Umożliwia poziome przewijanie tylko tabeli */
    width: 100%; /* Zapewnia, że kontener nie rozszerzy strony */
}
.training-options {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.training-column {
    background-color: #fff;
    color: #000;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    flex: 1;
    margin: 0 1px;
    cursor: pointer;
    width: 20%; /* Każdy przycisk zajmuje 20% szerokości */
    height: auto; /* Automatyczna wysokość */
}

.training-column a {
    text-decoration: none;
    color: #000; /* Kolor tekstu treningu */
    font-size: 16px; /* Rozmiar tekstu */
    display: block;
    text-align: center;
    padding-bottom: 10px; /* Dodanie odstępu dla ceny */
}

.training-column .price {
    color: #e60000; /* Czerwony kolor dla ceny */
    font-size: 22px; /* Większy rozmiar czcionki dla ceny */
    font-weight: bold; /* Wyróżnienie ceny */
}

.training-details {
    padding: 20px;
}

.training-details h3 {
    margin-top: 0;
  	text-align: justify;
}

/* FAQ Section */
.faq-container {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.faq-column {
    flex: 1;
    padding: 10px;
}

.faq-item {
    background-color: #1a2b3d;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}
/* Style dla tabeli */
table.service-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    color: #000;
}

table.service-table th,
table.service-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

table.service-table th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

table.service-table td {
    font-size: 14px;
}

td:contains("✔") {
    color: #66ff66;
    font-weight: bold;
}

td:contains("❌") {
    color: red;
    font-weight: bold;
}

.group-title {
    text-align: left;
    background-color: #f2f2f2;
    font-weight: bold;
    padding-left: 10px;
}

/* Contact Section */
.contact-info, .contact-form {
    padding: 20px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
}

.contact-form input, .contact-form textarea {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    border: none;
}

.contact-form button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #d32f2f;
    color: #fff;
    cursor: pointer;
}

.recaptcha-container {
    margin-top: 10px;
}
/* Fix for floating navbar */
body {
    padding-top: 60px; /* Adjust according to header height */
/* Dla urządzeń mobilnych */
@media (max-width: 768px) {
.navbar ul {
        display: none; /* Ukrywa menu do momentu kliknięcia */
        flex-direction: column; /* Ustawia elementy jeden pod drugim */
        align-items: center; /* Centruje elementy */
        position: absolute;
        top: 60px; /* Pozycja poniżej headera */
        left: 0; /* Przykleja menu do lewej krawędzi */
        width: 100%; /* Sprawia, że menu zajmuje całą szerokość ekranu */
        background-color: #333; /* Ciemne tło dla kontrastu */
        text-align: center; /* Centruje tekst */
        padding: 20px 0; /* Dodaje przestrzeń wewnątrz menu */
    }
    .hero-image {
        width: 100%; /* Pełna szerokość na małych ekranach */
        height: 30vh; /* Zmniejszona wysokość, aby baner nie zajmował zbyt dużo miejsca */
        object-fit: cover; /* Upewnia się, że obraz wypełnia całą przestrzeń */
    }
    .navbar ul li {
        width: 100%; /* Każdy element zajmuje całą szerokość */
        padding: 15px 0; /* Dodaje odstępy pionowe */
    }

    .navbar ul li a {
        font-size: 18px; /* Zwiększa rozmiar czcionki */
        color: #fff; /* Biały tekst dla kontrastu */
        text-decoration: none;
        display: block; /* Sprawia, że link zajmuje całą szerokość elementu */
        padding: 10px; /* Dodaje odstępy wokół tekstu */
        width: 100%;
    }

    .menu-toggle {
        position: fixed; /* Przykleja hamburgera do prawego górnego rogu */
        top: 10px;
        right: 10px;
        z-index: 1000;
        background-color: transparent;
        border: none;
        color: #fff;
        font-size: 30px;
        cursor: pointer;
    }

    .navbar ul.show {
        display: flex; /* Pokaż menu, gdy klasa 'show' jest dodana */
    }
}