/**
* Template Name: Mentor
* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
* Updated: May 18 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/

/*Ukrycie okładki na stronie lekcji tutor kursu */
.tutor-lesson-feature-image{
    display: none!important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-tab{
    padding-top:0px!important;
}

.custom-similar {
    float:right;
    margin-top:10px;
}

/* Style dla Modala */
.modal {
    display: none; /* Ukryte domyślnie */
    position: fixed; /* Pozostaje na swoim miejscu nawet przy scrollowaniu */
    z-index: 1000; /* Ustawienie na górze */
    left: 0;
    top: 0;
    width: 100%; /* Pełna szerokość */
    height: 100%; /* Pełna wysokość */
    overflow: auto; /* Włącz scroll, jeśli treść jest za duża */
    background-color: rgba(0,0,0,0.4); /* Półprzezroczyste tło */
    -webkit-animation-name: fadeIn; /* FADE IN Animation */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% z góry i wyśrodkowane */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Mogłoby być szersze/węższe */
    max-width: 500px; /* Maksymalna szerokość */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: slideIn; /* Slide in from the top */
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    position: relative; /* Dla przycisku zamykania */
}

.container-chyrekpoints {
    padding: 0 20% 0 5px!important;
}


/* Animacje (opcjonalne) */
@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@-webkit-keyframes slideIn {
    from {top: -300px; opacity: 0}
    to {top: 15%; opacity: 1}
}

@keyframes slideIn {
    from {top: -300px; opacity: 0}
    to {top: 15%; opacity: 1}
}





/*rozszerzenie pola select np. dla listy zadań, dziennika*/
@media screen and (min-width: 767px){
    .tutor-form-select{
        width:100%!important;
    }
}


/* Klasa dla obrazków na kisty-zadan */
.container-listy-zadan {
    max-width: 850px!important;
}

.container-listy-zadan .listy-zadan-item{
    padding-bottom:10px!important;
}

.container-listy-zadan hr{
    margin-top:16px;
    margin-bottom:11px;
    border: none; /* Usuwa domyślną ramkę */
    border-top: 2px dashed; /* Grubość 5px, styl przerywany, kolor szary */
    height: 5px; /* Ustawia wysokość, by była widoczna jako linia 5px */
    opacity: 0.8; /* Lekka przezroczystość, jeśli chcesz */
}

/*Szerokość całej strony */
.container {
    max-width: 1520px!important; /* nie było nic */
}

/* ja dodałem */
.container-nav {
    padding-left:2%;
    padding-right:2%;
}


/* ja dodałem, rozjeżdżały się ikonki w menu kursów po lewej */
.tutor-d-flex {
    flex-wrap: nowrap!important; /* Zapobiegaj zawijaniu */
}



@media screen and (min-width: 992px) { /* ja dodałem */
    /* ja dodałem */
    .container-nav {
        padding-left:8%;
        padding-right:8%;
    }
}

.tutor-create-new-course, .tutor-ratings-stars{ /* Usuwa przycisk Nowy kurs w kokpicie Usuwa gwiazdki przy kursie */
    display: none!important;
}

.disabled {/* ja dodałem */
   opacity: 0.6;
}
 

.tutor-container {
    max-width: 1520px!important; /* nie było nic */
}


/* Style dla tabelki w Kokpit-korepetycje */
.homework-container{
    margin-top:25px;
    border-top: 1px solid #ccc; /* Dodaje linię na górze */
    padding-top: 10px; /* Dodaj trochę odstępu, żeby linia nie przylegała do zawartości */
}



/* Stylizacja tabeli dla responsywności */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* Rozkłada kolumny równomiernie */

}

.responsive-table th,
.responsive-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top; /* Dodane dla lepszego wyrównania treści w komórkach */
    word-wrap: break-word; /* Pozwala na zawijanie długich słów */
    overflow-wrap: break-word; /* Wersja dla nowszych przeglądarek */
}

.responsive-table th {
    background-color: #f2f2f2;
}

@media screen and (min-width: 992px) { 
    /* Definicja szerokości kolumn dla dużych ekranów (gdy table-layout: fixed) */
    /* Dostosuj te wartości, aby uzyskać preferowany układ, suma powinna dać 100% */
    .responsive-table th:nth-child(1), /* Lp. */
    .responsive-table td:nth-child(1) {
        width: 14%;
    }
    .responsive-table th:nth-child(2), /* Data */
    .responsive-table td:nth-child(2) {
        width: 49%;
    }
    .responsive-table th:nth-child(3), /* Temat */
    .responsive-table td:nth-child(3) {
        width: 29%; /* Zwiększona szerokość dla Tematu, bo Opis poszedł do Szczegółów */
    }
    .responsive-table th:nth-child(4), /* Szczegóły lekcji (Opis + Cena + Czas trwania) */
    .responsive-table td:nth-child(4) {
        width: 8%; /* Duża szerokość dla Szczegółów, bo zawiera dużo danych */
    }
}

/* Responsywność dla tabeli */
@media screen and (max-width: 992px) {
    .responsive-table thead {
        display: none; /* Ukryj nagłówki na małych ekranach */
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block; /* Ustaw wszystkie elementy tabeli jako bloki */
        width: 100%; /* Każdy element zajmuje pełną szerokość */
    }

    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box; /* Ważne, żeby padding nie rozpychał szerokości */
    }

    .responsive-table td {
        text-align: right; /* Wyrównaj tekst do prawej dla wartości */
        /* Zmienione padding-left i position: relative; */
        padding-left: 45%; /* Zwiększony padding, aby etykieta miała więcej miejsca */
        position: relative;
        box-sizing: border-box;
    }

    .responsive-table td::before {
        content: attr(data-label); /* Wyświetl etykietę z atrybutu data-label */
        position: absolute;
        left: 10px; /* Margines od lewej krawędzi komórki */
        width: calc(45% - 20px); /* Szerokość etykiety - odjęcie marginesu i paddingu */
        font-weight: bold;
        text-align: left; /* Wyrównaj etykietę do lewej */
        white-space: normal; /* Zezwól na zawijanie się etykiety, jeśli jest długa */
        word-wrap: break-word; /* Wymuszaj łamanie długich słów */
        top: 8px; /* Domyślny padding td */
        /* Upewnij się, że etykieta nie nakłada się na treść */
    }

    /* Specyficzne style dla scalonych kolumn i list, aby były czytelne i miały prawidłowe paddingi */
    .responsive-table td.actions-cell,
    .responsive-table td[data-label="Szczegóły lekcji"],
    .responsive-table td[data-label="Lekcje kursu"],
    .responsive-table td[data-label="Zadanie domowe"] {
        text-align: right; /* Wyrównanie do prawej dla zawartości tych komórek JA zmieniłem */
        padding-left: 10px; /* Resetuj padding dla treści, jeśli etykieta nie jest już w linii */
        padding-right: 10px; /* Dodaj padding po prawej */
    }

    .responsive-table td.actions-cell::before,
    .responsive-table td[data-label="Szczegóły lekcji"]::before,
    .responsive-table td[data-label="Lekcje kursu"]::before,
    .responsive-table td[data-label="Zadanie domowe"]::before {
        content: attr(data-label) ":"; /* Dodaj dwukropek po etykiecie */
        display: block; /* Etykieta jako blok, by treść zaczynała się od nowej linii */
        position: static; /* Etykieta nie jest już absolutnie pozycjonowana */
        width: 100%; /* Zajmuje pełną szerokość */
        text-align: left; /* Etykieta do lewej */
        margin-bottom: 5px; /* Odstęp pod etykietą */
        padding-left: 0; /* Usuń padding, bo jest display:block */
        padding-right: 0;
    }

    .responsive-table td.actions-cell a {
        display: block; /* Przyciski jeden pod drugim */
        margin-bottom: 5px; /* Odstęp między przyciskami */
        width: auto; /* Domyślna szerokość przycisku */
    }
    .responsive-table td.actions-cell a:last-child {
        margin-bottom: 0;
    }
}




/* Stylizacja tabeli dla responsywności - tabelka dla faktury */
.responsive-table-invoice {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* Rozkłada kolumny równomiernie */

}

.responsive-table-invoice th,
.responsive-table-invoice td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top; /* Dodane dla lepszego wyrównania treści w komórkach */
    word-wrap: break-word; /* Pozwala na zawijanie długich słów */
    overflow-wrap: break-word; /* Wersja dla nowszych przeglądarek */
}

.responsive-table-invoice th {
    background-color: #f2f2f2;
}

@media screen and (min-width: 992px) { 
    .responsive-table-invoice th:nth-child(1), /* ID faktury */
    .responsive-table-invoice td:nth-child(1) {
        width: 20%;
    }
    .responsive-table-invoice th:nth-child(2), /* Data */
    .responsive-table-invoice td:nth-child(2) {
        width: 20%;
    }
    .responsive-table-invoice th:nth-child(3), /* Kwota brutto */
    .responsive-table-invoice td:nth-child(3) {
        width: 20%; 
    }
    .responsive-table-invoice th:nth-child(4), /* Status */
    .responsive-table-invoice td:nth-child(4) {
        width: 20%;
    }
    .responsive-table-invoice th:nth-child(5), /* PDF */
    .responsive-table-invoice td:nth-child(5) {
        width: 20%;
    }
}

/* Responsywność dla tabeli */
@media screen and (max-width: 992px) {
    .responsive-table-invoice thead {
        display: none; /* Ukryj nagłówki na małych ekranach */
    }

    .responsive-table-invoice,
    .responsive-table-invoice tbody,
    .responsive-table-invoice tr,
    .responsive-table-invoice td {
        display: block; /* Ustaw wszystkie elementy tabeli jako bloki */
        width: 100%; /* Każdy element zajmuje pełną szerokość */
    }

    .responsive-table-invoice tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box; /* Ważne, żeby padding nie rozpychał szerokości */
    }

    .responsive-table-invoice td {
        text-align: right; /* Wyrównaj tekst do prawej dla wartości */
        /* Zmienione padding-left i position: relative; */
        padding-left: 45%; /* Zwiększony padding, aby etykieta miała więcej miejsca */
        position: relative;
        box-sizing: border-box;
    }

    .responsive-table-invoice td::before {
        content: attr(data-label); /* Wyświetl etykietę z atrybutu data-label */
        position: absolute;
        left: 10px; /* Margines od lewej krawędzi komórki */
        width: calc(45% - 20px); /* Szerokość etykiety - odjęcie marginesu i paddingu */
        font-weight: bold;
        text-align: left; /* Wyrównaj etykietę do lewej */
        white-space: normal; /* Zezwól na zawijanie się etykiety, jeśli jest długa */
        word-wrap: break-word; /* Wymuszaj łamanie długich słów */
        top: 8px; /* Domyślny padding td */
        /* Upewnij się, że etykieta nie nakłada się na treść */
    }

    /* Specyficzne style dla scalonych kolumn i list, aby były czytelne i miały prawidłowe paddingi */
    .responsive-table-invoice td.actions-cell,
    .responsive-table-invoice td[data-label="Szczegóły lekcji"],
    .responsive-table-invoice td[data-label="Lekcje kursu"],
    .responsive-table-invoice td[data-label="Zadanie domowe"] {
        text-align: right; /* Wyrównanie do prawej dla zawartości tych komórek JA zmieniłem */
        padding-left: 10px; /* Resetuj padding dla treści, jeśli etykieta nie jest już w linii */
        padding-right: 10px; /* Dodaj padding po prawej */
    }

    .responsive-table-invoice td.actions-cell::before,
    .responsive-table-invoice td[data-label="Szczegóły lekcji"]::before,
    .responsive-table-invoice td[data-label="Lekcje kursu"]::before,
    .responsive-table-invoice td[data-label="Zadanie domowe"]::before {
        content: attr(data-label) ":"; /* Dodaj dwukropek po etykiecie */
        display: block; /* Etykieta jako blok, by treść zaczynała się od nowej linii */
        position: static; /* Etykieta nie jest już absolutnie pozycjonowana */
        width: 100%; /* Zajmuje pełną szerokość */
        text-align: left; /* Etykieta do lewej */
        margin-bottom: 5px; /* Odstęp pod etykietą */
        padding-left: 0; /* Usuń padding, bo jest display:block */
        padding-right: 0;
    }

    .responsive-table-invoice td.actions-cell a {
        display: block; /* Przyciski jeden pod drugim */
        margin-bottom: 5px; /* Odstęp między przyciskami */
        width: auto; /* Domyślna szerokość przycisku */
    }
    .responsive-table-invoice td.actions-cell a:last-child {
        margin-bottom: 0;
    }
}



/* Stylizacja tabeli dla responsywności - tabelka dla faktury ADMIN */
.responsive-table-invoice-admin {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* Rozkłada kolumny równomiernie */

}

.responsive-table-invoice-admin th,
.responsive-table-invoice-admin td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top; /* Dodane dla lepszego wyrównania treści w komórkach */
    word-wrap: break-word; /* Pozwala na zawijanie długich słów */
    overflow-wrap: break-word; /* Wersja dla nowszych przeglądarek */
}

.responsive-table-invoice-admin th {
    background-color: #f2f2f2;
}

@media screen and (min-width: 992px) { 
    .responsive-table-invoice-admin th:nth-child(1), /* Nazwa pliku */
    .responsive-table-invoice-admin td:nth-child(1) {
        width: 20%;
    }
    .responsive-table-invoice-admin th:nth-child(2), /* Statusy */
    .responsive-table-invoice-admin td:nth-child(2) {
        width: 9%; 
    }
    .responsive-table-invoice-admin th:nth-child(3), /* Status mapowania email */
    .responsive-table-invoice-admin td:nth-child(3) {
        width: 25%;
    }
    .responsive-table-invoice-admin th:nth-child(4), /* Wartość faktury */
    .responsive-table-invoice-admin td:nth-child(4) {
        width: 10%;
    }
    .responsive-table-invoice-admin th:nth-child(5), /* Wartość ostatnich zajęć */
    .responsive-table-invoice-admin td:nth-child(5) {
        width: 15%;
    }
    .responsive-table-invoice-admin th:nth-child(6), /* Akcja */
    .responsive-table-invoice-admin td:nth-child(6) {
        width: 22%;
    }
}

/* Responsywność dla tabeli */
@media screen and (max-width: 992px) {
    .responsive-table-invoice-admin thead {
        display: none; /* Ukryj nagłówki na małych ekranach */
    }

    .responsive-table-invoice-admin,
    .responsive-table-invoice-admin tbody,
    .responsive-table-invoice-admin tr,
    .responsive-table-invoice-admin td {
        display: block; /* Ustaw wszystkie elementy tabeli jako bloki */
        width: 100%; /* Każdy element zajmuje pełną szerokość */
    }

    .responsive-table-invoice-admin tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box; /* Ważne, żeby padding nie rozpychał szerokości */
    }

    .responsive-table-invoice-admin td {
        text-align: right; /* Wyrównaj tekst do prawej dla wartości */
        /* Zmienione padding-left i position: relative; */
        padding-left: 45%; /* Zwiększony padding, aby etykieta miała więcej miejsca */
        position: relative;
        box-sizing: border-box;
    }

    .responsive-table-invoice-admin td::before {
        content: attr(data-label); /* Wyświetl etykietę z atrybutu data-label */
        position: absolute;
        left: 10px; /* Margines od lewej krawędzi komórki */
        width: calc(45% - 20px); /* Szerokość etykiety - odjęcie marginesu i paddingu */
        font-weight: bold;
        text-align: left; /* Wyrównaj etykietę do lewej */
        white-space: normal; /* Zezwól na zawijanie się etykiety, jeśli jest długa */
        word-wrap: break-word; /* Wymuszaj łamanie długich słów */
        top: 8px; /* Domyślny padding td */
        /* Upewnij się, że etykieta nie nakłada się na treść */
    }

    /* Specyficzne style dla scalonych kolumn i list, aby były czytelne i miały prawidłowe paddingi */
    .responsive-table-invoice-admin td.actions-cell,
    .responsive-table-invoice-admin td[data-label="Szczegóły lekcji"],
    .responsive-table-invoice-admin td[data-label="Lekcje kursu"],
    .responsive-table-invoice-admin td[data-label="Zadanie domowe"] {
        text-align: right; /* Wyrównanie do prawej dla zawartości tych komórek JA zmieniłem */
        padding-left: 10px; /* Resetuj padding dla treści, jeśli etykieta nie jest już w linii */
        padding-right: 10px; /* Dodaj padding po prawej */
    }

    .responsive-table-invoice-admin td.actions-cell::before,
    .responsive-table-invoice-admin td[data-label="Szczegóły lekcji"]::before,
    .responsive-table-invoice-admin td[data-label="Lekcje kursu"]::before,
    .responsive-table-invoice-admin td[data-label="Zadanie domowe"]::before {
        content: attr(data-label) ":"; /* Dodaj dwukropek po etykiecie */
        display: block; /* Etykieta jako blok, by treść zaczynała się od nowej linii */
        position: static; /* Etykieta nie jest już absolutnie pozycjonowana */
        width: 100%; /* Zajmuje pełną szerokość */
        text-align: left; /* Etykieta do lewej */
        margin-bottom: 5px; /* Odstęp pod etykietą */
        padding-left: 0; /* Usuń padding, bo jest display:block */
        padding-right: 0;
    }

    .responsive-table-invoice-admin td.actions-cell a {
        display: block; /* Przyciski jeden pod drugim */
        margin-bottom: 5px; /* Odstęp między przyciskami */
        width: auto; /* Domyślna szerokość przycisku */
    }
    .responsive-table-invoice-admin td.actions-cell a:last-child {
        margin-bottom: 0;
    }
}




/* Stylizacja tabeli dla responsywności - tabelka dla faktury ADMIN Wszystkie wystawione faktury */
.responsive-table-invoice-admin-all {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* Rozkłada kolumny równomiernie */

}

.responsive-table-invoice-admin-all th,
.responsive-table-invoice-admin-all td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top; /* Dodane dla lepszego wyrównania treści w komórkach */
    word-wrap: break-word; /* Pozwala na zawijanie długich słów */
    overflow-wrap: break-word; /* Wersja dla nowszych przeglądarek */
}

.responsive-table-invoice-admin-all th {
    background-color: #f2f2f2;
}

@media screen and (min-width: 992px) { 
    .responsive-table-invoice-admin-all th:nth-child(1), /* ID faktury */
    .responsive-table-invoice-admin-all td:nth-child(1) {
        width: 16%;
    }
    .responsive-table-invoice-admin-all th:nth-child(2), /* Nabywca */
    .responsive-table-invoice-admin-all td:nth-child(2) {
        width: 12%;
    }
    .responsive-table-invoice-admin-all th:nth-child(3), /* Uczeń */
    .responsive-table-invoice-admin-all td:nth-child(3) {
        width: 12%;
    }
    .responsive-table-invoice-admin-all th:nth-child(4), /* Data */
    .responsive-table-invoice-admin-all td:nth-child(4) {
        width: 12%;
    }
    .responsive-table-invoice-admin-all th:nth-child(5), /* Kwota brutto */
    .responsive-table-invoice-admin-all td:nth-child(5) {
        width: 12%;
    }
    .responsive-table-invoice-admin-all th:nth-child(6), /* Status */
    .responsive-table-invoice-admin-all td:nth-child(6) {
        width: 12%;
    }
    .responsive-table-invoice-admin-all th:nth-child(7), /* Link */
    .responsive-table-invoice-admin-all td:nth-child(7) {
        width: 6%;
    }
    .responsive-table-invoice-admin-all th:nth-child(8), /* Akcje */
    .responsive-table-invoice-admin-all td:nth-child(8) {
        width: 18%;
    }
}

/* Responsywność dla tabeli */
@media screen and (max-width: 992px) {
    .responsive-table-invoice-admin-all thead {
        display: none; /* Ukryj nagłówki na małych ekranach */
    }

    .responsive-table-invoice-admin-all,
    .responsive-table-invoice-admin-all tbody,
    .responsive-table-invoice-admin-all tr,
    .responsive-table-invoice-admin-all td {
        display: block; /* Ustaw wszystkie elementy tabeli jako bloki */
        width: 100%; /* Każdy element zajmuje pełną szerokość */
    }

    .responsive-table-invoice-admin-all tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box; /* Ważne, żeby padding nie rozpychał szerokości */
    }

    .responsive-table-invoice-admin-all td {
        text-align: right; /* Wyrównaj tekst do prawej dla wartości */
        /* Zmienione padding-left i position: relative; */
        padding-left: 45%; /* Zwiększony padding, aby etykieta miała więcej miejsca */
        position: relative;
        box-sizing: border-box;
    }

    .responsive-table-invoice-admin-all td::before {
        content: attr(data-label); /* Wyświetl etykietę z atrybutu data-label */
        position: absolute;
        left: 10px; /* Margines od lewej krawędzi komórki */
        width: calc(45% - 20px); /* Szerokość etykiety - odjęcie marginesu i paddingu */
        font-weight: bold;
        text-align: left; /* Wyrównaj etykietę do lewej */
        white-space: normal; /* Zezwól na zawijanie się etykiety, jeśli jest długa */
        word-wrap: break-word; /* Wymuszaj łamanie długich słów */
        top: 8px; /* Domyślny padding td */
        /* Upewnij się, że etykieta nie nakłada się na treść */
    }

    /* Specyficzne style dla scalonych kolumn i list, aby były czytelne i miały prawidłowe paddingi */
    .responsive-table-invoice-admin-all td.actions-cell,
    .responsive-table-invoice-admin-all td[data-label="Szczegóły lekcji"],
    .responsive-table-invoice-admin-all td[data-label="Lekcje kursu"],
    .responsive-table-invoice-admin-all td[data-label="Zadanie domowe"] {
        text-align: right; /* Wyrównanie do prawej dla zawartości tych komórek JA zmieniłem */
        padding-left: 10px; /* Resetuj padding dla treści, jeśli etykieta nie jest już w linii */
        padding-right: 10px; /* Dodaj padding po prawej */
    }

    .responsive-table-invoice-admin-all td.actions-cell::before,
    .responsive-table-invoice-admin-all td[data-label="Szczegóły lekcji"]::before,
    .responsive-table-invoice-admin-all td[data-label="Lekcje kursu"]::before,
    .responsive-table-invoice-admin-all td[data-label="Zadanie domowe"]::before {
        content: attr(data-label) ":"; /* Dodaj dwukropek po etykiecie */
        display: block; /* Etykieta jako blok, by treść zaczynała się od nowej linii */
        position: static; /* Etykieta nie jest już absolutnie pozycjonowana */
        width: 100%; /* Zajmuje pełną szerokość */
        text-align: left; /* Etykieta do lewej */
        margin-bottom: 5px; /* Odstęp pod etykietą */
        padding-left: 0; /* Usuń padding, bo jest display:block */
        padding-right: 0;
    }

    .responsive-table-invoice-admin-all td.actions-cell a {
        display: block; /* Przyciski jeden pod drugim */
        margin-bottom: 5px; /* Odstęp między przyciskami */
        width: auto; /* Domyślna szerokość przycisku */
    }
    .responsive-table-invoice-admin-all td.actions-cell a:last-child {
        margin-bottom: 0;
    }
}


.custom-rozw-toggle .toggle-text {
    line-height: 1.2;
    font-weight: 500;
	font-size: 1.25rem;
    margin: 0;
    font-family: var(--heading-font);
}

.lesson-preview .custom-rozw-toggle .toggle-text {
    font-size: 1rem;      
    font-weight: 400;
    line-height: 1.4;
    font-family: var(--heading-font);
    color: black;
}


/* Style dla statusu ukończenia */
.lesson-completed {
    color: green;
    font-weight: bold;
}

.lesson-not-completed {
    color: red;
    font-weight: bold;
}

/* Style dla przycisków */
.mark-lesson-completed-btn {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

/*nieużywane*/
.edit-lesson-button,
.delete-lesson-button, .add-lesson-button {
    background-color: #008CBA; /* Blue */
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    border-radius: 4px;
}

/*nieużywane*/
.delete-lesson-button {
    background-color: #f44336; /* Red */
}

/*nieużywane*/
.add-lesson-button {
    background-color: #3f3f3f; /* Grey */
}

/* Stylizacja formularza edycji */
.edit-form-container {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}
.edit-form-container label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
.edit-form-container input[type="text"],
.edit-form-container input[type="number"],
.edit-form-container textarea,
.edit-form-container select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Ważne dla paddingu i szerokości */
}
.edit-form-container input[type="submit"] {
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.edit-form-container input[type="submit"]:hover {
    background-color: #005177;
}

/* Stylizacja list w tabeli */
.lesson-course-list,
.homework-list {
    margin: 0;
    padding: 0;
    list-style: none; /* Usuń domyślne bullety */
}

.lesson-course-list,
.homework-list, .mark-lesson-completed-btn a{
    font-size: 16px; 

}

.lesson-course-list li,
.homework-list li {
    margin-bottom: 15px; /* Większy odstęp między elementami */
    padding: 10px 15px; /* Zwiększony padding dla lepszego wyglądu */
    background-color: #F2F2F2; /* Domyślne tło (dla nieukończonych, jeśli chcesz) */
    border-radius: 5px; /* Opcjonalnie: zaokrąglone rogi */
}

/* Styl dla ukończonych lekcji */
.lesson-course-list li.lesson-completed,
.homework-list li.lesson-completed {
    background-color: #e6f5e9; /* Jasnozielone tło */
    /*border: 1px solid #28a745;  Zielona ramka */
    border-radius: 8px;
}

/* Styl dla nieukończonych lekcji (jeśli chcesz inne niż domyślne #F2F2F2) */
.lesson-course-list li.lesson-not-completed,
.homework-list li.lesson-not-completed {
    background-color: #f5e6eb; /* Jasnoczerwone tło */
    /* border: 1px solid #dc3545; Czerwona ramka */
    border-radius: 8px;
}


/* Styl dla przycisku wewnątrz listy, żeby był wyrównany */
.lesson-course-list li .mark-lesson-form,
.homework-list li .mark-lesson-form {
    display: flex; /* Albo flex, w zależności od potrzeb układu */
    margin-left: 15px; /* Odstęp od tekstu */
}

.lesson-course-list li .mark-lesson-completed-btn,
.homework-list li .mark-lesson-completed-btn {
    /* Podstawowy styl przycisku */
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9em;
    transition: 0.3s;
    margin-top:9px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom:2px;
}


.lesson-course-list li .mark-lesson-completed-btn:hover,
.homework-list li .mark-lesson-completed-btn:hover {
  background: var(--accent-color);
}


.mark-lesson-form {
    display: inline-block; /* Zachowaj formę inline-block dla przycisku, ale przyciski w Akcjach będą blokowe */
    margin-left: 10px;
}

/* Dodatkowe wyrównanie dla Tutor LMS select i button */
.tutor-d-flex {
    display: flex;
    align-items: center;
    gap: 10px; /* Dodaje odstęp między elementami flex */
    flex-wrap: wrap; /* Pozwala elementom zawijać się na małych ekranach */
}

/* Upewnij się, że pole select zajmuje dostępną przestrzeń lub ma stałą szerokość */
#user_select {
    flex-grow: 1; /* Pozwala selectowi rozszerzać się */
    min-width: 200px; /* Minimalna szerokość, żeby nie był zbyt mały */
}

.tutor-btn-primary {
    margin-top: 0 !important;
}

.lesson-completed {
  color: green;
  font-weight: normal;
}

.lesson-not-completed {
  color: red;
  font-weight: normal;
}

 /* Koniec styli dla tabelki w Korepetycje */



hr {
  margin: 5px 0px;
  border: 0;
  border-top: var(--bs-border-width) solid;
}


/* Wymuszenie responsywności wideo */
.wp-video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Bezpośrednio na <video> 
.wp-video-shortcode,
.wp-video-shortcode video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

/* Usunięcie ewentualnych ograniczeń 
.wp-video-shortcode>div,
.wp-video-shortcode .mejs-container,
.wp-video-shortcode .mejs-layer,
.wp-video-shortcode .mejs-mediaelement {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Naprawa problemu z MediaElement.js (jeśli WordPress go używa) 
.mejs-container {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}



/*usuwa nawigację tutora na mobilu */
.tutor-dashboard #tutor-dashboard-footer-mobile {
  display: none !important;
}




/*usuwa nawigację tutora, która pojawia się w momencie odpalenia kursu 
.tutor-nav {
  display: none !important;
}

.tutor-nav>li {
  display: none !important;
}

.tutor-nav-link {
  display: none !important;
}*/


/* Stylowanie przycisków */
.tutor-btn-primary {
  background: #1A3045 !important;
  color: white !important;
  padding: 12px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
  border: none;
  transition: 0.3s ease-in-out;
}

/* Stylowanie linków */
#tutor-login-form a {
  color: #1A3045 !important;
  text-decoration: none;
  font-weight: bold;
}

#tutor-login-form a:hover {
  color: var(--accent-color) !important;
  text-decoration: underline;
}

/* Stylowanie przycisku logowania jako buttonchyrek */
#tutor-login-form button[type="submit"] {
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  position: relative;
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: 0.4s;
  margin-top: 10px;
  border: 2px solid var(--default-color);
  color: var(--default-color);
  background: transparent;
  text-align: center;
  cursor: pointer;
}

/* Efekt hover dla przycisku */
#tutor-login-form button[type="submit"]:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: #ffffff;
}

dl,
ol,
ul {
  margin-bottom: 0;
  padding-left: 20px; 
}

/* Fonts */

:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #37423b;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. 
  
  stary kolor, granat: #090A38*/
  --accent-color: #1A3045;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #272828;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #1A3045;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #272828;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #3f4599;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
.hidden {
  display: none;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}




/* Cookie okienko */
.cookie-popup {
  position: fixed;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  max-width: 80%;
  text-align: center;
  z-index: 9999;
}

.cookie-popup button {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 10px;
}

.cookie-popup button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 800px) {
  .cookie-popup {
    min-width: 80%;
  }
}






/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 5px 0 5px 0 !important;
  transition: all 0.5s;
  z-index: 997;
  min-height: 7vh;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
  /* 8 */
}

.header .logo h1 {
  font-weight: 500;
  /* 700 */
  font-size: 28px;
  /* 30 */
  margin: 0px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0px 0 0 20px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Punkty Delciaki : */
.header .btn-chyrekpoints,
.header .btn-chyrekpoints:focus {
  color: var(--contrast-color);
  background: #BFA053;
  padding: 3px 8px;
  font-size: 14px;
  margin: 4px 0px 0 19px;
  border-radius: 5px;
  transition: 0.3s;
  white-space: nowrap;
}

.header .btn-chyrekpoints:hover,
.header .btn-chyrekpoints:focus:hover {
  color: #000000;
  background: color-mix(in srgb, #C9AD6C, transparent 15%);
}

/*Moje - do tekstu Webinar w menu */
.header .txt-getstarted,
.header .txt-getstarted:focus {
  order: 2;
  padding: 8px 10px;
  margin: 0 0 0 10px;
  border-radius: 50px;
  transition: 0.3s;
}

/* #nowemenu */
.extra-menu {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  list-style: none;
  padding-bottom: 8px;
  display: flex;
  justify-content: flex;
  /* Wyrównanie linków do prawej */
  gap: 15px;
  /* Odstęp między linkami */
  flex-wrap: nowrap !important;
  /* Zapobiega zawijaniu na małych ekranach */
  overflow-x: auto;
  /* Jeśli za wąsko, umożliwia przewijanie poziome */
  -webkit-overflow-scrolling: touch;
  /* Płynne przewijanie na mobile */
  scrollbar-width: none;
  /* Ukrycie paska przewijania w Firefoksie */
  white-space: nowrap;
  /* Zapobiega zawijaniu tekstu */
  max-width: 100vw;
  /* Zapobiega wychodzeniu poza ekran */
}

/* #nowemenu */
.extra-menu::-webkit-scrollbar {
  display: none;
  /* Ukrycie paska przewijania w Chrome/Safari */
}

/* #nowemenu */
/* Upewnienie się, że elementy menu nie są zawijane */
.extra-menu ul li {
  display: inline-block !important;
  /* Upewnia się, że elementy są w jednej linii */
  white-space: nowrap;
  /* Blokuje zawijanie */
}

/* #nowemenu */
/* Jeśli menu nadal się ucina, pozwól na przewijanie */
@media (max-width: 768px) {
  .extra-menu {
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch;
    /* Płynne przewijanie na mobilkach */
  }
}

/* #nowemenu */
/* Upewniamy się, że .top-bar znajduje się nad .navmenu */
.top-bar {
  position: relative;
  /* Zmieniamy z fixed na relative, żeby nie nachodziło */
  display: flex;
  padding-left: 7px;
  flex-direction: column;
  /* Elementy w pionie */
  width: 100%;
  justify-content: flex-end;
  /* Wyrównanie do prawej */
  margin-bottom: 5px;
}

/* Navmenu - Desktop Zmienić z 1200 */
@media (max-width: 940px) {
  .header .logo {
    order: 1;
  }


  .header .logo h1 {
    font-size: 20px;
    /* nie było */
  }

  .header .btn-getstarted {
    order: 3;
    margin: 0px 5px 0 9px !important;
    padding: 6px 15px !important;
    white-space: nowrap;
  }

  .header .btn-chyrekpoints {
    order: 2;
    margin: 0px 2px 0 2px !important;
    white-space: nowrap; 
  }

  .header .btn-chyrekpoints .btn-chyrekpoints-hide {
    display: none;
  }

  .header .navmenu {
    order: 4;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

.navmenu {
  padding: 0;
  padding-top: 8px !important;
  /* #nowemenu */
}



/*Nawigacja na dole strony */
.footer-nav {
  background-color: #F6F6F6;
  padding: 0px 0;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.footer-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer-nav ul li {
  display: inline-block;
  margin: 0 5px;
}

.footer-nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  /* Dodanie animacji przy najechaniu */
}

.footer-nav ul li a i {
  font-size: 16px;
  /* Ustawia rozmiar ikon */
  transition: color 0.3s ease;
  /* Animacja koloru ikony */
}

.footer-nav ul li a .link-text {
  display: inline;
  margin-left: 8px;
  /* Odstęp między ikoną a tekstem */
}

/* Efekt hover */
.footer-nav ul li a:hover {
  color: #F6F6F6;
  background-color: #555;
  /* Zmiana tła na jaśniejsze */
  border-radius: 5px;
}

/* Dostosowanie dla małych ekranów */
@media (max-width: 700px) {
  .footer-nav ul {
    display: flex;
    justify-content: space-around;
    padding: 0px 0;
  }

  .footer-nav ul li {
    display: block;
    margin: 0 0;
  }

  .footer-nav ul li a .link-text {
    display: none;
    font-family: var(--nav-font);
    font-style: normal;
    /* Ukrywa tekst na małych ekranach */
  }

  .footer-nav ul li a i {
    font-family: var(--nav-font);
    font-style: normal;
    font-size: 20px;
    /* Zwiększa rozmiar ikon na małych ekranach */
  }
}

/* Pełnoekranowe rozwijane menu */
.footer-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  /* Półprzezroczyste tło wokół */
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1001;
}

/* Wewnętrzne menu - białe tło, zaokrąglone rogi */
.footer-fullscreen .menu-container {
  background: rgb(0, 0, 0);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 90%;
  width: 600px;
}

/* Lista w menu */
.footer-fullscreen ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-fullscreen ul li {
  margin: 15px 0;
}

.footer-fullscreen ul li a {
  color: #333;
  /* Ciemniejszy kolor dla lepszej czytelności */
  font-size: 20px;
  text-decoration: none;
  transition: 0.3s;
  display: block;
  padding: 10px;
  border-radius: 8px;
}

.footer-fullscreen ul li a i {
  margin-right: 10px;
}

.footer-fullscreen ul li a:hover {
  background: var(--accent-color);
  color: white !important;
}

/* Przycisk zamknięcia */
.footer-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  cursor: pointer;
  color: #000000;
}

/* Aktywacja pełnoekranowego menu */
.footer-menu-active {
  display: flex !important;
}











/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop Zmienić z 1200 */
@media (min-width: 940px) {
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .mobile-nav-toggle {
    display: none;
  }
}

/* Navmenu - Mobile  Można zmienić z 1199 */
@media (max-width: 940px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0 0 0 0;
    background-color: var(--nav-dropdown-background-color);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    display: none;
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    display: none;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
   display: none;
  }

  /* Zmodyfikowana reguła: podmenu zawsze widoczne */
  .navmenu .dropdown ul {
    position: static;
    display: block; /* Zmienione z 'none' na 'block' */
    z-index: 99;
    margin: 0px 17px;
    padding: 0px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  /* Usunięta lub nadpisana reguła, która kontroluje rozwijanie */
  /* .navmenu .dropdown > .dropdown-active {
    display: block;
  } */

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  margin-bottom: 0;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px 2px 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Buttond
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 45px;
  height: 45px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: hidden;
  /*zmieniłem z visible na hidden po dodaniu wtyczki tawk.to*/
  opacity: 1;
  bottom: 35px;
}



/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --default-color: var(--contrast-color);
  --background-color: var(--accent-color);
  --heading-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--accent-color) 90%, black 5%);
  padding: 20px 0;
}

.page-title nav a {
  color: var(--default-color);
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 30px 0;
  scroll-margin-top: 900px;
  overflow: clip;
}

@media (max-width: 940px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-top: 30px;
  padding-bottom:20px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--accent-color);
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--nav-font);
  text-transform: uppercase;
  line-height:1.1;
  padding-top: 10px;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/



.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 93vh;
  position: relative;
  padding: 55px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
}

/*--dodałem dla małego nagłówka: */
.herosmall {
  min-height: 30vh;
  margin-top:25px;
  margin-bottom:25px;
}

.buttonchyrek {
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  position: relative;
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-color);
}

.buttonchyrek .btn-get-started {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: 0.4s;
  margin-top: 10px;
  border: 2px solid var(--default-color);
  color: var(--default-color);
}

.buttonchyrek .btn-get-started:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: #ffffff;
}

/* #nowemenu */
.buttonchyreknav {
  --background-color: #000000;
  --heading-color: #ffffff;
  position: relative;
  padding: 0 0;
  display: inline-block;
  margin-left: auto;
  text-align: right;
  color: var(--default-color);
}

.buttonchyreknav-icon-margin {
  transform: translateY(2px) !important;
  /* Przesuwa ikonę w dół bez zmiany marginesów */
}

/* #nowemenu */
.buttonchyreknav .btn-get-started {
  font-size: 10px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 3px 12px 3px 12px;
  border-radius: 50px;
  transition: 0.4s;
  margin-top: 7px;
  /* margines od góry */
  border: 1px solid var(--default-color);
  color: var(--default-color);
  justify-content: flex-end;
}

/* #nowemenu */
.buttonchyreknav .btn-get-started:hover {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: #ffffff;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 45%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 10px 0 0 0;
  font-size: 24px;
}

.hero .btn-get-started {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 50px;
  transition: 0.4s;
  margin-top: 30px;
  border: 2px solid var(--default-color);
  color: var(--default-color);
}

.hero .btn-get-started:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 24px 12px 24px;
  border-radius: 50px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

/*--------------------------------------------------------------
# Counts Section
--------------------------------------------------------------*/
.counts {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 25px 0;
}

.counts .stats-item {
  padding: 0px;
  width: 100%;
}

.counts .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.counts .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
}

.why-us .why-box h3 {
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.why-us .why-box p {
  margin-bottom: 30px;
}

.why-us .why-box .more-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  padding: 8px 40px 10px 40px;
  color: var(--contrast-color);
  transition: all ease-in-out 0.4s;
  border-radius: 50px;
}

.why-us .why-box .more-btn i {
  font-size: 14px;
}

.why-us .why-box .more-btn:hover {
  color: var(--accent-color);
  background: var(--contrast-color);
}

.why-us .icon-box {
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .icon-box i {
  color: var(--accent-color);
  margin-bottom: 30px;
  font-size: 32px;
  margin-bottom: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}

.why-us .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 30px 0;
}

.why-us .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .icon-box:hover i {
  color: var(--contrast-color);
  background: var(--accent-color);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  padding: 10px 0;
}

.features .features-item {
  background-color: var(--box-background-color);
  display: flex;
  align-items: center;
  padding: 20px;
  transition: 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
}

.features .features-item i {
  font-size: 32px;
  padding-right: 10px;
  line-height: 0;
}

.features .features-item h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.features .features-item h3 a {
  line-height: 1.4;
  color: var(--heading-color);
  transition: 0.3s;
}

.features .features-item:hover {
  border-color: var(--accent-color);
}

.features .features-item:hover h3 a {
  color: var(--accent-color);
}


.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  background-color: var(--surface-color);
  color: var(--heading-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 0px 0px;
  transition: 0.3s;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
}

.features .nav-link i {
  padding-right: 0px;
  font-size: 48px;
}

.features .nav-link h4 {
  padding-left: 10px;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.features .nav-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.features .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.features .nav-link.active h4 {
  color: var(--contrast-color);
}

@media (max-width: 992) {
  .features .nav-link i {
    padding: 0;
    line-height: 1;
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .features .nav-link {
    padding: 15px;
  }

  .features .nav-link i {
    font-size: 24px;
  }
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane h3 {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 26px;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-bottom: 10px;
}

.features .tab-pane ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Courses Section
--------------------------------------------------------------*/
.courses .course-item {
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses .course-content {
  padding: 15px;
}

.courses .course-content h3 {
  font-weight: 700;
  font-size: 20px;
}

.courses .course-content h3 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.courses .course-content h3 a:hover {
  color: var(--accent-color);
}

.courses .course-content .category {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0;
  border-radius: 5px;
}

.courses .course-content .price {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.courses .course-content .description {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.courses .trainer {
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses .trainer .trainer-profile img {
  max-width: 50px;
  border-radius: 50px;
}

.courses .trainer .trainer-profile .trainer-link {
  padding-left: 10px;
  font-weight: 600;
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.courses .trainer .trainer-profile .trainer-link:hover {
  color: var(--accent-color);
}

.courses .trainer .trainer-rank {
  font-size: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.courses .trainer .trainer-rank .user-icon {
  font-size: 22px;
}

/*--------------------------------------------------------------
# Trainers Index Section
--------------------------------------------------------------*/
.trainers-index .member {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  margin-bottom: 20px;
}

.trainers-index .member img {
  margin: -1px -1px 30px -1px;
}

.trainers-index .member .member-content {
  padding: 0 20px 30px 20px;
}

.trainers-index .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.trainers-index .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.trainers-index .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.trainers-index .member .social {
  margin-top: 15px;
}

.trainers-index .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
}

.trainers-index .member .social a:hover {
  color: var(--accent-color);
}

.trainers-index .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
.about-us .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about-us .content ul {
  list-style: none;
  padding: 0;
}

.about-us .content ul li {
  padding-bottom: 10px;
}

.about-us .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about-us .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
  padding-left: 50px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-sizing: content-box;
  padding: 30px 30px 30px 60px;
  margin: 30px 15px;
  min-height: 200px;
  position: relative;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 10px;
  border: 6px solid var(--background-color);
  position: absolute;
  left: -45px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 60%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }

  
    /*punkty Delciaki */
    .container-chyrekpoints {
        padding: 0!important;
        padding: 0 10px 0 10px!important;
    }
}

/*--------------------------------------------------------------
# Courses Course Details Section
--------------------------------------------------------------*/
.courses-course-details {
  padding-bottom: 20px;
}

.courses-course-details h3 {
  font-size: 24px;
  margin: 10px 0 10px 0;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.courses-course-details h3:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  bottom: 0;
  left: 0;
}

.courses-course-details h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 1px;
  background: var(--accent-color);
  bottom: 0;
  left: 0;
}

.courses-course-details .course-info {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 10px 15px;
  margin-bottom: 15px;
}

.courses-course-details .course-info h5 {
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  margin: 0;
  font-family: var(--nav-font);
}

.courses-course-details .course-info p {
  margin: 0;
  font-weight: 600;
}

.courses-course-details .course-info a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Tabs Section
--------------------------------------------------------------*/
.tabs {
  padding-top: 30;
}

.tabs .nav-tabs {
  border: 0;
}

.tabs .nav-link {
  border: 0;
  padding: 12px 15px 12px 0;
  transition: 0.3s;
  color: var(--default-color);
  border-radius: 0;
  border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-weight: 600;
  font-size: 15px;
}

.tabs .nav-link:hover {
  color: var(--accent-color);
}

.tabs .nav-link.active {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.tabs .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.tabs .details h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.tabs .details p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.tabs .details p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .tabs .nav-link {
    border: 0;
    padding: 15px;
  }

  .tabs .nav-link.active {
    color: var(--accent-color);
    background: var(--accent-color);
  }
}

.rounded-img {
  border-radius: 50%;
}

/*--------------------------------------------------------------
# Trainers Section
--------------------------------------------------------------*/
.trainers .member {
  position: relative;
}

.trainers .member .member-img {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1024px) {
  .trainers .member .member-img {
    margin: 0 60px;
  }
}

.trainers .member .member-img img {
  position: relative;
  z-index: 1;
}

.trainers .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.trainers .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.trainers .member .member-img .social a:hover {
  color: var(--accent-color);
}

.trainers .member .member-info {
  margin-top: 30px;
}

.trainers .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.trainers .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.trainers .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.trainers .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events .card {
  border: 0;
  padding: 0 30px;
  margin-bottom: 60px;
  position: relative;
}

.events .card-img {
  width: calc(100% + 60px);
  margin-left: -30px;
  overflow: hidden;
  z-index: 9;
  border-radius: 0;
}

.events .card-img img {
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}

.events .card-body {
  z-index: 10;
  background: var(--background-color);
  border-top: 4px solid var(--background-color);
  padding: 30px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  transition: 0.3s;
}

.events .card-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.events .card-title a {
  color: var(--default-color);
  transition: 0.3s;
}

.events .card-text {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.events .card:hover img {
  transform: scale(1.1);
}

.events .card:hover .card-body {
  border-color: var(--accent-color);
}

.events .card:hover .card-body .card-title a {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  box-shadow: 0px 0px 4px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.pricing .pricing-item h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}

.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}

.pricing .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .advanced {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# Moja klasa po formularzu
--------------------------------------------------------------*/


.contact .form-ok {
  height: 100%;
}

.contact .form-ok .ok-message {
  font-size: 14px;
  background: #059652;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  margin-bottom: 0px;
}

.contact .form-ok .ok-red-message {
  font-size: 14px;
  background: #CA4250;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  margin-bottom: 0px;
}

.contact .form-ok .ok-red-message a {
  color: #ffffff;
}

.contact .form-ok .red-message {
  font-size: 14px;
  background: #CA4250;
  color: #ffffff;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 28px;
  margin-bottom: 0px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.contact .form-ok .red-message a {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}

.contact .form-ok .gray-message {
  font-size: 14px;
  background: #8E8C8C;
  color: #ffffff;
  text-align: center;
  padding: 0px;
  margin-bottom: 0px;
  position: fixed;
  bottom: 0;
  width: 100%;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  padding-top: 8px;
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact h6 {
  margin: 40px 0 0 0;
  font-weight: bold;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #3C4F61;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form input[type=tel],
.contact .php-email-form select,
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form input[type=tel]:focus,
.contact .php-email-form select:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form input[type=tel]::placeholder,
.contact .php-email-form select::placeholder,
.contact .php-email-form textarea::placeholder {
  color: var(--default-color);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px 12px 30px;
  margin-top: 10px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}


/*--------------------------------------------------------------
# Galeria zdjęć CAROUSEL
--------------------------------------------------------------*/

.carousel .responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  justify-content: flex-start;
}

.carousel * {
  font-family: Nunito, sans-serif;
}

.carousel .responsive-container-block.bigContainer {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 0px;
  padding-left: 30px;
}

.carousel .responsive-container-block.Container {
  max-width: 1320px; 
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  position: relative;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

.carousel .cardImg {
  width: 100%;
}

.carousel .container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: block;
}

.carousel .swiper.mySwiper {
  width: 100%;
}

.carousel .swiper-slide {
  width: 100%;
}

.carousel .swiper-wrapper {
  width: 100%;
}

.carousel .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.carousel .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.carousel .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}


@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&amp;display=swap');

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 17px !important;
  /*dodałem, bo tutor podmieniał */

}

.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }
}