/* Ogólne style (domyślne dla większych ekranów) */
body {
    font-family: 'Nunito Sans', sans-serif;
}

/* Styl dla mobilnych urządzeń (do 768px) */
@media (max-width: 768px) {
    /* Zmniejszenie fontów dla małych ekranów */
    .footer-title {
        font-size: 24px;
    }

    .page-title {
        font-size: 28px;
    }

    .slider-title {
        font-size: 30px;
    }

    /* Dostosowanie kontenerów i marginesów */
    .container {
        padding: 15px;
    }

    /* Ustawienia dla slidera */
    .slider-captions {
        bottom: 100px;  /* Przesunięcie w dół dla slidera na mniejszych ekranach */
    }

    .slider-title {
        font-size: 28px;
        line-height: 35px;
    }

    /* Dostosowanie nawigacji OwlCarousel */
    .slider .owl-nav .owl-prev,
    .slider .owl-nav .owl-next {
        font-size: 16px;
        height: 30px;
        width: 30px;
        line-height: 30px; /* Aby strzałki były bardziej wycentrowane */
    }

    /* Zmniejszenie rozmiarów obrazków w sliderze */
    .slider .owl-carousel .owl-item img {
        max-width: 100%;  /* Dostosowanie szerokości do urządzeń mobilnych */
        height: auto; /* Utrzymanie proporcji obrazków */
    }

    /* Opcjonalne: zmniejszenie wysokości slidera dla mobilnych */
    .slider {
        height: 300px; /* Dostosowanie wysokości slidera na urządzeniach mobilnych */
    }
}

/* Dostosowanie dla bardzo małych ekranów (do 480px) */
@media (max-width: 480px) {
    /* Zmniejszenie fontów jeszcze bardziej */
    .footer-title {
        font-size: 20px;
    }

    .page-title {
        font-size: 22px;
    }

    /* Dostosowanie menu nawigacyjnego */
    .navbar {
        font-size: 14px;
    }

    .slider-title {
        font-size: 24px;
    }

    .slider-text {
        font-size: 16px;
    }

    .footer-widget ul li {
        font-size: 14px;
    }

    /* Ustawienia dla formularza kontaktowego */
    .footer-widget .form-control {
        width: 100%;
        margin-top: 10px;
    }

    /* Zmniejszenie marginesów */
    .container {
        padding: 10px;
    }

    /* Zmniejszenie odległości dla napisów w sliderze na bardzo małych ekranach */
    .slider-captions {
        bottom: 80px;  /* Mniejsze odstępy na małych ekranach */
    }

    /* Opcjonalne: zmniejszenie wysokości slidera na bardzo małych ekranach */
    .slider {
        height: 250px; /* Możesz dostosować w zależności od tego, jak chcesz, żeby slider wyglądał */
    }
}