/*Ogólne style*/
.header_section {
    position: fixed; /* Przykleja sekcję nagłówka do góry strony */
    top: 0; /* Ustawia nagłówek na samej górze */
    left: 0; /* Wyrównanie do lewej krawędzi */
    right: 0; /* Wyrównanie do prawej krawędzi */
    z-index: 1000; /* Zapewnia, że nagłówek będzie na wierzchu innych elementów */
    width: 100%; /* Nagłówek zajmuje całą szerokość ekranu */
}

    .header_section .container-fluid {
        padding-right: 25px; /* Dodaje odstęp po prawej stronie */
        padding-left: 25px; /* Dodaje odstęp po lewej stronie */
    }

    .header_section .header_main {
        padding: 15px 0; /* Dodaje odstępy w pionie w sekcji głównej nagłówka */
        background-color: #000000; /* Ustawia czarne tło */
    }

.navbar-brand {
    margin: 0; /* Usuwa margines */
    padding: 0; /* Usuwa padding */
}

    .navbar-brand .img-box {
        max-width: 120px; /* Maksymalna szerokość logo */
    }

        .navbar-brand .img-box img {
            width: 100%; /* Obrazek rozciąga się na całą szerokość kontenera */
            height: auto; /* Utrzymuje proporcje obrazka */
        }

.custom_nav-container {
    width: 100%; /* Kontener nawigacji zajmuje całą szerokość */
    display: flex; /* Używa elastycznego układu */
    align-items: center; /* Wyrównuje elementy do środka w pionie */
}

/* Dla ekranów szerokości 1920px i większych */
@media (min-width: 1920px) {

    .slider_section .img-box {
        padding-bottom: 20px; /* Dodaje odstęp u dołu obrazka */
    }

    .promotion_section .row {
        display: flex; /* Używa flexboxa */
        flex-wrap: nowrap; /* Elementy nie będą zawijały się do nowej linii */
        padding-left: 60px; /* Dodaje lewy padding */
    }

        .promotion_section .row > div {
            flex: 1 1 33.33%; /* Ustawia każdy element na 1/3 szerokości */
        }

    .img-box {
        margin: 0; /* Usuwa margines */
        padding: 0; /* Usuwa padding */
    }

    .container {
        max-width: 1400px; /* Ogranicza szerokość kontenera do 1400px */
    }

}

/* Dla ekranów 1440px - 1919px */
@media (max-width: 1919px) and (min-width: 1440px) {

    .feature_section .feature_container .box {
        padding: 30px 20px; /* Dodaje padding wewnętrzny */
    }

        .feature_section .feature_container .box .img-box {
            width: 75px; /* Zmniejsza szerokość obrazka */
        }

    .promotion_section .row {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 60px;
    }

        .promotion_section .row > div {
            flex: 1 1 33.33%; /* Każdy element zajmuje 1/3 szerokości */
        }
}

/* Dla ekranów 1024px - 1439px */
@media (max-width: 1439px) and (min-width: 992px) {

    .feature_section {
        padding: 60px 0; /* Dodaje przestrzeń wokół sekcji */
    }

        .feature_section .feature_container .box {
            padding: 30px 15px; /* Dodaje padding wewnętrzny */
        }

    .promotion_section .row {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 60px;
    }

        .promotion_section .row > div {
            flex: 1 1 50%; /* Każdy element zajmuje 50% szerokości */
        }
}

/* Dla ekranów 768px - 991px */
@media (max-width: 991px) and (min-width: 768px) {

    .feature_section .feature_container {
        grid-template-columns: repeat(2, 1fr); /* Ustawia układ w 2 kolumnach */
    }

        .feature_section .feature_container .box {
            padding: 20px; /* Dodaje padding do elementów w sekcji funkcji */
        }

    .promotion_section .row {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 60px;
    }

        .promotion_section .row > div {
            flex: 1 1 50%; /* Elementy zajmują po 50% szerokości */
        }

            .promotion_section .row > div:nth-child(3) {
                display: none; /* Ukrywa trzeci element */
            }

    .reservation_section .container .right {
        max-height: 426px; /* Ogranicza wysokość prawego kontenera */
    }
    
}

/* Dla ekranów 375px - 767px */
@media (max-width: 767px) {

    .layout_padding {
        padding-top: 60px; /* Zwiększa padding u góry */
        padding-bottom: 60px; /* Zwiększa padding u dołu */
    }

    .slider_section .detail-box {
        padding-bottom: 30px; /* Dodaje przestrzeń poniżej szczegółów */
    }

    .slider_section .img-box {
        padding-bottom: 30px; /* Dodaje przestrzeń poniżej obrazka */
    }

    .feature_section .feature_container {
        grid-template-columns: 1fr; /* Ustawia pojedynczą kolumnę */
        grid-template-rows: repeat(10, auto); /* Tworzy 10 wierszy */
    }

        .feature_section .feature_container .box {
            padding: 20px 10px; /* Dodaje padding do elementów */
        }

    .promotion_section .row {
        display: flex;
        flex-wrap: wrap;
        padding-left: 60px;
    }

        .promotion_section .row > div {
            flex: 1 1 100%; /* Każdy element zajmuje 100% szerokości */
        }

            .promotion_section .row > div:nth-child(2),
            .promotion_section .row > div:nth-child(3) {
                display: none; /* Ukrywa drugą i trzecią kolumnę */
            }

    .about_section .box_salon {
        flex-direction: column; /* Ustawia elementy w kolumnie */
    }

        .about_section .box_salon .img-box {
            margin: 12px 0 0 0; /* Dodaje margines górny do obrazka */
        }

    .reservation_section .container .content {
        display: flex;
        flex-direction: column; /* Ustawia elementy w kolumnie */
        max-width: 100%; /* Ogranicza szerokość kontenera */
        max-height: 100%; /* Ogranicza wysokość kontenera */
    }

    .reservation_section .container .right {
        padding-top: 5px; /* Dodaje padding górny */
    }

    .reservation_section .container .left,
    .reservation_section .container .right {
        max-width: 100%; /* Ustawia maksymalną szerokość na 100% */
    }
}

/* Dla ekranów o szerokości 375px i mniejszych */
@media (max-width: 375px) {

    .layout_padding {
        padding-top: 45px; /* Zmniejsza padding u góry */
        padding-bottom: 45px; /* Zmniejsza padding u dołu */
    }

    .feature_section .feature_container {
        grid-template-columns: 1fr; /* Ustawia pojedynczą kolumnę */
        grid-template-rows: repeat(10, auto); /* Tworzy 10 wierszy */
    }

        .feature_section .feature_container .box {
            padding: 15px 10px; /* Dodaje padding do elementów */
        }

    .promotion_section .row {
        display: flex;
        flex-wrap: wrap;
    }

        .promotion_section .row > div {
            flex: 1 1 100%; /* Każdy element zajmuje 100% szerokości */
        }

            .promotion_section .row > div:nth-child(2),
            .promotion_section .row > div:nth-child(3) {
                display: none; /* Ukrywa drugą i trzecią kolumnę */
            }

    .about_section .box_salon {
        flex-direction: column; /* Ustawia elementy w kolumnie */
    }

        .about_section .box_salon .img-box {
            margin: 12px 0 0 0; /* Dodaje margines górny do obrazka */
        }

    .reservation_section .container .right {
        padding-top: 5px; /* Dodaje padding górny */
    }

    .reservation_section .container .left,
    .reservation_section .container .right {
        max-width: 100%; /* Ustawia maksymalną szerokość na 100% */
    }
}