/* Media queries for Tablets and Smartphones */
@media only screen and (max-width: 1024px) {
    /* Sekcja 1 */
    .section-1 {
        background-image: url('images-mobile-jpg-webp/background-1.webp');
    }

    /* Sekcja 2 */
    .section-2 {
        background-image: url('images-mobile-jpg-webp/background-2.webp');
    }

    /* Sekcja 3 */
    .section-3 {
        background-image: url('images-mobile-jpg-webp/background-3.webp');
    }

    /* Sekcja 4 */
    .section-4 {
        background-image: url('images-mobile-jpg-webp/background-4.webp');
    }

    .popup-content{
        min-width: 60vw;
        max-width: 60vw;
        font-size: 4vw;
    }

}

@media only screen and (max-width: 768px) {
    /* Sekcja 1 */
    .section-1 {
        background-image: url('images-mobile-jpg-webp/background-1.webp');
    }

    /* Sekcja 2 */
    .section-2 {
        background-image: url('images-mobile-jpg-webp/background-2.webp');
    }

    /* Sekcja 3 */
    .section-3 {
        background-image: url('images-mobile-jpg-webp/background-3.webp');
    }

    /* Sekcja 4 */
    .section-4 {
        background-image: url('images-mobile-jpg-webp/background-4.webp');
    }

    .popup-content{
        min-width: 65vw;
        max-width: 65vw;
        font-size: 4.5vw;
    }

}

@media only screen and (max-width: 480px) {
    /* Sekcja 1 */
    .hello {
        font-size: 14vw;
    }

    .glad {
        font-size: 6.8vw;
    }

    .section-1 {
        background-image: url('images-mobile-jpg-webp/background-1.webp');
    }

    .section-1 .content {
        flex-direction: column; /* Stosuje układ pionowy */
        align-items: center; /* Wyśrodkowanie elementów */
        justify-content: center;
        min-width: 95vw;
    }

    .section-1 .image-container {
        max-width: 60vw;
        margin: 0 auto; /* Wyśrodkowanie obrazu */
        margin-bottom: 30px; /* Odstęp między obrazem a tekstem */
    }

    .section-1 .text-container {
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    .footer .symbol img {
        width: 14vw;
    }

    /* Sekcja 2 */
    .section-2 {
        background-image: url('images-mobile-jpg-webp/background-2.webp');
    }

    .section-2 .content {
        min-width: 95vw;
    }

    .section-2 .text-container {
        font-size: 6.5vw;
    }

    .section-2 .image-container {
        max-width: 55vw;
    }

    .section-2 .text-container::after{
        -webkit-text-stroke: 6px #FFFFFF;
    }

    /* Sekcja 3 */
    .section-3 {
        background-image: url('images-mobile-jpg-webp/background-3.webp');
    }

    .section-3 .content {
        min-width: 95vw;
    }

    .section-3 .social-text {
        font-size: 8vw; /* Dostosowanie wielkości fontu */
        line-height: 1.3; /* Poprawa czytelności przez zwiększenie odstępów między liniami */
        text-align: center; /* Wyśrodkowanie tekstu */
        word-wrap: break-word; /* Zapewnienie zawijania tekstu */
        padding: 0 10px; /* Dodanie paddingu z boków dla uniknięcia zbyt bliskiego tekstu do krawędzi */
    }

    .section-3 .social-icons {
        justify-content: center; /* Wyśrodkowanie ikon */
        gap: 10vw;
    }

    .section-3 .social-icons img {
        width: 10vw; /* Dostosowanie rozmiaru ikon */
        margin: 0 5px 10px 5px; /* Dodanie marginesów dookoła ikon */
    }

    /* Sekcja 4 */
    .section-4 {
        background-image: url('images-mobile-jpg-webp/background-4.webp');
    }

        .section-4 .content {
            min-width: 95vw;
        }

        .section-4 .subscription-text {
            font-size: 7.6vw; /* Zmniejsz rozmiar tekstu */
            text-align: center; /* Wyśrodkowanie tekstu */
            word-wrap: break-word; /* Zapewnienie zawijania tekstu */
            padding: 0 0px; /* Dodanie paddingu z boków dla uniknięcia zbyt bliskiego tekstu do krawędzi */
            margin-bottom: 40px;
            margin-top: 0px;
        }
    
        .section-4 .subscription-form {
            width: 90vw; /* Zmniejsz szerokość formularza */
            padding:20px;
        }
    
        .section-4 .subscription-form button {
            padding: 0px;
            font-size: 10vw;
            width: 84vw;
        }
    
        .section-4 .logo {
            margin-bottom: 0px;
        }

        .section-4 .logo img {
            max-width: 55vw;
        }
    
        .subscription-form input[type="email"] {
            font-size: 5vw;
            padding: 7.5px;
            width: 80vw;
            margin-right: 0px;
        }
    
        .checkbox-container {
            margin-top: 5px;
            margin-left: 2.5vw;
        }
    
        .checkbox-container label {
            font-size: 3vw;
        }

        .section-privacy {
            background-image: url('images-mobile-jpg-webp/background-privacy.webp');
        }

        .hidden-section {
            width: 90vw;
            height: 70vh;
        }

        .hidden-section h1 {
            font-size: 5vw;
        }

        .hidden-section h2 {
            font-size: 4vw;
        }

        .hidden-section p {
            font-size: 3vw;
        }

        .popup-content{
            min-width: 70vw;
            max-width: 70vw;
            font-size: 4.5vw;
        }

        .popup-content::after{
            -webkit-text-stroke: 6px #FFFFFF;  
        }
}