/* Istniejący kod CSS z twojego zapytania */
@media screen and (max-width: 1200px) {
    .device { left: 20%; top: -36px; }
    footer li { margin-right: 10%; }
    .feature-content { width: 55%; }
}

@media screen and (max-width: 991px) {
    .feature-1, .feature-2 { margin-bottom: 50px; }
    .device { display: none; }
    .screenshots ul li { width: 50%; }
    .screenshots-intro { padding: 110px 0 100px 0; }
    .feature-content { width: 80%; }
    .features-slider { height: 100%; }
}

@media screen and (max-width: 680px) {
    .feature-content { width: 60%; }
}

@media screen and (max-width: 640px) {
    .use-btn { display: none; }
    footer li { display: block; text-align: left; padding: 20px 0; border-bottom: dashed 1px #c7cacc; margin-right: 0 !important; float: none; }
    nav { margin-top: 40px; }
    .overlay ul { margin-left: 0px; }
    .overlay ul li a { padding: 20px 0; min-width: 120px; font-size: 12px; }
}

@media screen and (max-width: 465px) {
    .hero h1 { font-size: 40px; margin: 100px 0 45px 0; }
    .screenshots ul li { width: 100%; min-height: 100%; float: none; }
    section.video i { font-size: 30px; }
    section.video h1 { font-size: 15px; font-weight: 400; }
    section.video { padding: 40px; }
    .feature-content { width: 100%; text-align: center; margin-top: 20px; }
    .feature-icon { display: block; margin: 0 auto; }
    blockquote p { width: 60%; }
    .features-slider { padding: 11% 50px 10% 50px; }
}

/* Dodanie Media Queries dla obrazu tła w klasie .hero */
@media (min-width: 1200px) {
    .hero {
        background-size: contain;
        background-position: right center;
    }
}

/* Style dla ekranów średnich */
@media (max-width: 1199px) and (min-width: 768px) {
    .hero {
        background-size: cover;
        background-position: center center;
    }
}

/* Style dla małych ekranów */
@media (max-width: 767px) {
    .hero {
        background-size: cover;
        background-position: top center;
    }
    .hero h1 {
        font-size: 24px; /* Mniejsza czcionka dla h1 */
    }
}

/* Style dla bardzo małych ekranów */
@media (max-width: 480px) {
    .hero {
        background-size: cover;
        background-position: top center;
    }
    .hero h1 {
        font-size: 20px; /* Jeszcze mniejsza czcionka dla h1 */
    }
}


@media (max-width: 767px) {
    .hero-title-main {
        font-size: 40pt; /* Mniejszy rozmiar czcionki dla urządzeń mobilnych */
        margin-top: 490px; /* Dodatkowy margines u góry dla urządzeń mobilnych */
		
    }
}

@media (max-width: 480px) {
    .hero-title-main{
        font-size: 40pt; /* Jeszcze mniejszy rozmiar czcionki dla bardzo małych ekranów */
        margin-top: 390px; /* Większy margines u góry dla bardzo małych ekranów */
    }
}

@media only screen and (max-width: 1200px) {
    .hero-title-quote {
        font-size: clamp(10px, 3.5vw, 16px);
    }
}

@media only screen and (max-width: 992px) {
    .hero-title-quote {
        font-size: clamp(9px, 3.5vw, 15px);
        padding: 15px; /* Mniejszy padding */
    }
}

@media only screen and (max-width: 768px) {
    .hero-title-quote {
        font-size: clamp(8px, 2.5vw, 15px);
        padding: 10px; /* Jeszcze mniejszy padding */
    }
}

@media only screen and (max-width: 576px) {
    .hero-title-quote {
        font-size: clamp(9px, 2.5vw, 13px);
        padding: 5px; /* Minimalny padding */
    }

    .quote-container {
        padding: 5px; /* Zmniejsz padding kontenera na bardzo małych ekranach */
    }
}