/* Dla ekranów o szerokości do 1300px */
@media (max-width: 1300px) {
    /* Tutaj możesz dodać style dla ekranów o szerokości maksymalnie 1300px */
}

/* Dla ekranów o szerokości do 1120px */
@media (max-width: 1120px) {
    /* Tutaj możesz dodać style dla ekranów o szerokości maksymalnie 1120px */
}

@media (max-width: 992px) {
    .hero_area {
        height: auto; /* Ustawia wysokość sekcji hero na auto */
    }

    .header_section .main_nav {
        flex: 1; /* Dostosowuje elastyczność elementu nawigacyjnego */
    }

    #navbarSupportedContent {
        margin-top: 15px; /* Dodaje margines górny do rozwijanej nawigacji */
    }

    .header_section .header_bottom .contact_nav p {
        display: flex; /* Ustawia paragraf w elastycznym układzie */
        justify-content: left; /* Wyrównuje do lewej */
        align-items: center; /* Wyrównuje elementy w pionie */
        width: 100%; /* Ustawia szerokość na 100% */
        text-align: center; /* Wyrównuje tekst do środka */
        margin-right: 35px; /* Dodaje margines z prawej strony */
    }

    .slider_section {
        padding-top: 45px; /* Dodaje przestrzeń nad sekcją slidera */
    }

    .feature_section .feature_container .box {
        padding: 30px 15px; /* Dodaje padding wewnętrzny do elementów w sekcji funkcji */
    }

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

    .feature_section {
        transform: none; /* Resetuje transformację */
        padding: 90px 0; /* Dodaje przestrzeń wokół sekcji funkcji */
    }
}

@media (max-width: 767px) {
    .layout_padding {
        padding-top: 90px; /* Zwiększa padding u góry */
        padding-bottom: 90px; /* Zwiększa padding u dołu */
    }

    .layout_padding-top {
        padding-top: 90px; /* Zwiększa padding tylko u góry */
    }

    .layout_padding-bottom {
        padding-bottom: 90px; /* Zwiększa padding tylko u dołu */
    }

    .custom_nav-container .navbar-toggler span {
        display: flex; /* Ustawia przycisk menu nawigacji w flexboxie */
        justify-content: center; /* Wyrównuje elementy poziomo */
        align-items: center; /* Wyrównuje elementy pionowo */
        width: 100%; /* Ustawia szerokość na 100% */
        text-align: center; /* Wyrównuje tekst do środka */
    }

    .header_section .header_bottom .contact_nav p {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
        text-align: center;
        margin-right: 35px;
    }

    .professional_section .row {
        padding: 40px 30px 40px 30px; /* Dodaje padding do sekcji profesjonalistów */
    }

    .professional_section h2 {
        margin-left: 0px; /* Usuwa margines z lewej strony */
        font-size: 20px; /* Zmniejsza rozmiar czcionki */
        line-height: 1.4; /* Zwiększa wysokość linii */
    }

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

    .feature_section .feature_container {
        flex-direction: column; /* Zmienia kierunek układu na kolumnowy */
    }

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

            .feature_section .feature_container .box:not(:nth-last-child(1)) {
                margin-bottom: 15px; /* Dodaje margines u dołu wszystkich elementów, z wyjątkiem ostatniego */
            }

    .about_section .detail-box {
        margin-bottom: 45px; /* Dodaje margines u dołu sekcji o nas */
    }

    .service_section h2 {
        padding-top: 20px; /* Dodaje przestrzeń u góry nagłówka sekcji usług */
    }

    .professional_section .img-box {
        display: none; /* Ukrywa obrazki w sekcji profesjonalistów */
    }

    .contact_section h2 {
        padding-top: 20px; /* Dodaje przestrzeń u góry nagłówka sekcji kontaktowej */
    }

    .contact_section form {
        margin-bottom: 45px; /* Dodaje margines u dołu formularza w sekcji kontaktowej */
    }

    .info_section .info_items::before {
        width: 1px; /* Ustawia szerokość pseudoelementu */
        height: 90%; /* Ustawia wysokość pseudoelementu */
        top: 25px; /* Ustawia margines górny pseudoelementu */
    }

}

/* Dla ekranów o szerokości do 576px */
@media (max-width: 576px) {
    /* Możesz dodać style specyficzne dla ekranów o szerokości do 576px */
}

/* Dla ekranów o szerokości do 480px */
@media (max-width: 480px) {
    /* Możesz dodać style specyficzne dla ekranów o szerokości do 480px */
}

/* Dla ekranów o szerokości do 400px */
@media (max-width: 400px) {
    /* Możesz dodać style specyficzne dla ekranów o szerokości do 400px */
}

/* Dla ekranów o szerokości do 360px */
@media (max-width: 360px) {
    /* Możesz dodać style specyficzne dla ekranów o szerokości do 360px */
}

/* Dla ekranów o szerokości co najmniej 1200px */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px; /* Ustawia maksymalną szerokość kontenera na 1170px */
    }
}