/* Stylizacja sekcji hero */
.hero-section {
    position: relative;
    width: 100%;
    padding: 40px 10%;
    background:#f0f8ff;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3rem;
    font-weight: bold;
    color: #003865;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #333;
    margin: 10px 0;
}

/* Lista "Core Innovations" */
.hero-details h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #003865;
    margin-bottom: 20px;
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.hero-list li {
    width: 45%; /* Dwie kolumny */
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
    padding-left: 25px;
    position: relative;
}

/* Ikony "✔" przed tekstem */
.hero-list li::before {
    content: "✔";
    color: #0078d4;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}
/* Stylizacja przycisku "Learn More / Show Less" */
.hero-button {
    font-size: 1rem;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: #0078d4; /* Kolor przycisku */
    color: #ffffff;
    border: none;
    border-radius: 25px; /* Zaokrąglone rogi */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtelny cień */
    transition: all 0.3s ease; /* Płynne przejścia */
}

/* Efekt hover dla przycisku */
.hero-button:hover {
    background: linear-gradient(to right, #005c9c, #003865); /* Gradient */
    transform: translateY(-2px) scale(1.05); /* Delikatne przesunięcie i powiększenie */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Zwiększenie cienia */
}

/* Responsywność przycisku na małych ekranach */
@media (max-width: 768px) {
    .hero-button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* RESPONSYWNOŚĆ */

/* MacBook 1024x816 */
@media (max-width: 1024px) and (min-height: 800px) {
    .hero-section {
        padding: 20px 5%;
    }

    .hero-content {
        max-width: 800px;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2; /* Zmniejszone odstępy między liniami */
        margin-bottom: 15px;
    }

    .hero-text {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .hero-list {
        flex-direction: column; /* Lista w jednej kolumnie */
        gap: 15px;
    }

    .hero-list li {
        width: 100%;
    }
}

/* Na większych ekranach (np. 1440px+) */
@media (min-width: 1440px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-text {
        font-size: 1.6rem;
    }

    .hero-list li {
        width: 30%; /* Trzy kolumny na szerokich ekranach */
    }
}

/* Na ekranach 768px i mniejszych */
@media (max-width: 768px) {
    .hero-section {
        padding: 20px 5%;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-text {
        font-size: 1.2rem;
    }

    .hero-list {
        flex-direction: column;
    }

    .hero-list li {
        width: 100%;
    }
}

/* Oddzielanie sekcji */
.use-cases-section, .specialization-section, .info-section {
    padding: 50px 0;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.use-cases-section { background: #f0f8ff; }
.specialization-section { background: #f0f8ff; }

/* Stylizacja tytułów */
.use-cases-title, .specialization-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #004080;
}
/* Stylizacja dla Applications of Our Medical Equipment */
.applications-section {
    padding: 50px 0;
    text-align: center;
    background: #f0f8ff;;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}

.applications-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #004080;
}

.applications-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    flex-wrap: wrap;
}

.application-item {
    width: 30%;
    padding: 20px;
    background: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.application-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.application-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

.application-item h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #0078d4;
}

.application-item p {
    font-size: 1.2rem;
    color: #333;
}

/* Responsywność dla Applications of Our Medical Equipment */
@media (max-width: 1024px) {
    .applications-grid {
        justify-content: space-between;
    }
    .application-item {
        width: 45%; /* Dwa elementy w rzędzie */
    }
}

@media (max-width: 768px) {
    .applications-grid {
        flex-direction: column;
        align-items: center;
    }
    .application-item {
        width: 90%; /* Jeden element na cały rząd */
        margin-bottom: 20px;
    }
}

/* Sekcje z siatką */
.use-cases-grid, .specialization-grid, .info-section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

/* Elementy siatki */
.use-case-item, .specialization-item, .info-block {
    width: 45%;
    padding: 20px;
    background: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.use-case-item:hover, .specialization-item:hover, .info-block:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.use-case-item img, .specialization-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

.use-case-item h3, .specialization-item h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #0078d4;
}

.use-case-item p, .specialization-item p {
    font-size: 1.2rem;
    color: #333;
}
@media (max-width: 768px) {
    .use-cases-grid {
        flex-direction: column; /* Ustawienie elementów w jednej kolumnie */
        align-items: center;
    }

    .use-case-item {
        width: 90%; /* Dostosowanie szerokości elementów do szerokości ekranu */
        margin-bottom: 20px; /* Dodanie odstępu między elementami */
    }
}

/* Stylizacja sekcji informacyjnej */
.info-section {
    display: flex;
    flex-wrap: wrap; /* Pozwala na zawijanie elementów */
    justify-content: space-between; /* Równe odstępy między elementami */
    align-items: stretch; /* Elementy o tej samej wysokości */
    gap: 20px;
    padding: 50px 20px;
    background-color: #f0f8ff;
    box-sizing: border-box;
}

/* Kafelki w sekcji info */
.info-block {
    flex: 1 1 calc(25% - 20px); /* Cztery kafelki w rzędzie */
    max-width: calc(25% - 20px);
    min-width: 250px; /* Minimalna szerokość kafelka */
    padding: 30px;
    background-color: rgba(0, 123, 255, 0.1); /* Jasnoniebieski kolor */
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #003366;
    box-sizing: border-box;
}

/* Przyciski w kafelkach */
.info-button {
    padding: 12px 24px;
    font-size: 1rem;
    background: linear-gradient(to right, #004e92, #000428);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    margin-top: 20px; /* Poprawienie pozycji przycisku */
}

.info-button:hover {
    background: linear-gradient(to right, #005c9c, #002060);
    transform: scale(1.1);
}

/* Responsywność dla iPadów Pro (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .info-section {
        flex-wrap: wrap;
        justify-content: center;
    }

    .info-block {
        flex: 1 1 calc(45% - 20px); /* Dwa elementy w rzędzie */
        max-width: calc(45% - 20px);
    }
}

/* Responsywność dla MacBooków (1024px - 1440px) */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
    .info-section {
        justify-content: space-between;
    }

    .info-block {
        flex: 1 1 calc(25% - 20px); /* Cztery elementy w rzędzie */
        max-width: calc(25% - 20px);
    }
}

/* Responsywność dla smartfonów (poniżej 768px) */
@media screen and (max-width: 768px) {
    .info-section {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .info-block {
        flex: 1 1 100%; /* Pełna szerokość */
        max-width: 100%;
    }
}

/* Stylizacja przycisku w info-block */
.info-button {
    padding: 12px 24px;
    font-size: 1rem;
    background: linear-gradient(to right, #004e92, #000428);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.info-button:hover {
    background: linear-gradient(to right, #005c9c, #002060);
    transform: scale(1.1);
}

.info-link {
    color: #ffffff;
    text-decoration: none;
}

/* Linki pod "Specification" */
.dropdown-content {
    margin-top: 15px;
    text-align: center;
}

.dropdown-content a {
    color: #003366;
    font-size: 1rem;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.dropdown-content a:hover {
    color: #002060;
}
.specialization-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Układ w jednym rzędzie na większych ekranach */
@media (min-width: 1024px) {
    .specialization-grid {
        flex-direction: row;
    }
    .specialization-item {
        width: 30%; /* Trzy elementy w jednym rzędzie */
        max-width: none;
    }
}

/* Responsywność dla sekcji hero */

/* Dla ekranów o szerokości poniżej 1024px (tablety i mniejsze laptopy) */
@media (max-width: 1024px) {
    .hero-section {
        height: 50vh; /* Zmniejszenie wysokości hero */
    }
    
    .hero-title {
        font-size: 2.5rem; /* Zmniejszenie rozmiaru tytułu */
    }

    .hero-text {
        font-size: 1.3rem; /* Zmniejszenie rozmiaru tekstu */
        margin-top: 15px;
    }

    .hero-button {
        font-size: 0.9rem;
        padding: 8px 16px; /* Mniejsze odstępy wokół przycisku */
        margin-top: 8px;
    }
}

/* Dla ekranów o szerokości poniżej 768px (smartfony) */
@media (max-width: 768px) {
    .hero-section {
        height: auto; /* Automatyczna wysokość dla sekcji hero */
        padding: 20px; /* Dodanie wewnętrznego odstępu */
        text-align: center; /* Wyśrodkowanie tekstu */
    }
    
    .hero-content {
        position: static; /* Usunięcie pozycji absolutnej */
        transform: none; /* Wyłączenie przesunięcia */
        top: auto;
        left: auto;
    }

    .hero-title {
        font-size: 2rem; /* Jeszcze mniejszy rozmiar tytułu */
    }

    .hero-text {
        font-size: 1.1rem; /* Jeszcze mniejszy rozmiar tekstu */
        margin-top: 10px;
    }

    .hero-button {
        font-size: 0.8rem;
        padding: 6px 12px; /* Mniejsze odstępy wokół przycisku */
        margin-top: 6px;
    }
}
/* Ustawienia kolumny dla sekcji specialization na mniejszych ekranach */
@media (max-width: 768px) {
    .specialization-grid {
        display: flex;
        flex-direction: column; /* Ustawienie kolumny */
        align-items: center;
    }

    .specialization-item {
        width: 100%; /* Dopasowanie szerokości do pełnej szerokości ekranu */
        margin-bottom: 20px; /* Dodatkowy odstęp między elementami */
    }

    .specialization-title {
        font-size: 2rem; /* Zmniejszenie rozmiaru nagłówka dla lepszej czytelności */
        text-align: center; /* Wyśrodkowanie tytułu */
    }
}

/* Dla bardzo małych ekranów o szerokości poniżej 480px (małe smartfony) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem; /* Minimalna wielkość tytułu */
    }

    .hero-text {
        font-size: 1rem; /* Minimalna wielkość tekstu */
    }

    .hero-button {
        font-size: 0.7rem;
        padding: 5px 10px; /* Jeszcze mniejsze odstępy wokół przycisku */
    }
    /* Ustawienia dla sekcji hero na urządzeniach mobilnych */
/* Ustawienia dla urządzeń mobilnych */
@media (max-width: 768px) {
    /* Ustawienie marginesów po obu stronach */
    .hero-section,
    .use-cases-section,
    .specialization-section,
    .info-section {
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* Centrowanie tekstu, jeśli jest taka potrzeba */
    .hero-content,
    .use-cases-title,
    .specialization-title,
    .info-title {
        text-align: center;
    }
}
/* Poprawka dla sekcji Our Specializations na urządzeniach mobilnych */
@media (max-width: 768px) {
    .specialization-section {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    
    .specialization-grid, .specialization-item {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }
}

}
/* General responsive adjustments for hero-section and related sections */
.hero-section, .use-cases-section, .specialization-section, .info-section {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* For iPad Pro (1024x1366) */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-text {
        font-size: 1.3rem;
    }

    .hero-button {
        font-size: 0.9rem;
        padding: 8px 16px;
    }

    .use-case-item, .specialization-item, .info-block {
        width: 100%;
        margin: 10px 0;
    }
}

/* For Surface Pro 7 (912x1368) */
@media (max-width: 912px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-text {
        font-size: 1.2rem;
    }

    .hero-button {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .use-case-item, .specialization-item, .info-block {
        width: 90%;
        margin: 10px 0;
    }
}

/* For Galaxy S8+ (360x740) and similar small mobile devices */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-text {
        font-size: 1rem;
        margin-top: 10px;
    }

    .hero-button {
        font-size: 0.7rem;
        padding: 5px 10px;
    }

    .use-case-item, .specialization-item, .info-block {
        width: 100%;
        margin: 10px 0;
    }
}
/* General styling for .info-section on smaller screens */
@media (max-width: 480px) {
    .info-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px; /* Adds padding for better spacing */
        gap: 20px; /* Ensures adequate space between items */
    }

    .info-block {
        width: 100%; /* Full width for narrow screens */
        padding: 15px;
        margin-bottom: 20px;
        font-size: 1rem; /* Adjusts text size for readability */
    }

    .info-block h3 {
        font-size: 1.2rem;
    }

    .info-button {
        padding: 8px 15px; /* Smaller padding for buttons */
        font-size: 0.9rem;
    }
}

/* For .hero-section adjustments on Galaxy S8 */
@media (max-width: 360px) {
    .hero-section {
        padding: 15px;
        height: auto;
        text-align: center;
    }

    .hero-content {
        position: static;
        transform: none;
        padding-top: 20px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-text {
        font-size: 1rem;
        margin-top: 10px;
    }

    .hero-button {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* For Surface Duo (540x720) */
@media (max-width: 540px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }

    .hero-button {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .use-case-item, .specialization-item, .info-block {
        width: 90%;
        margin: 10px 0;
    }
}

/* For Galaxy Z Fold 5 (344x882) */
@media (max-width: 344px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-button {
        font-size: 0.7rem;
        padding: 5px 10px;
    }

    .use-case-item, .specialization-item, .info-block {
        width: 100%;
        margin: 10px 0;
    }
}
/* Responsywność dla MacBooków (1024px - 1440px) */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
    .main-header,
    .hero-section {
        width: 100%;
        overflow-x: hidden;
    }

    .applications-grid,
    .specialization-grid {
        gap: 20px;
    }

    .application-item,
    .specialization-item {
        width: 30%; /* Trzy kafle w jednym rzędzie */
    }
}

/* Responsywność dla iPadów (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-header,
    .hero-section {
        width: 100%;
        overflow-x: hidden;
    }

    .applications-grid,
    .specialization-grid {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .application-item,
    .specialization-item {
        width: 45%; /* Dwa kafle w rzędzie */
    }
}

/* Responsywność dla mniejszych ekranów (smartfony - poniżej 768px) */
@media screen and (max-width: 768px) {
    .main-header,
    .hero-section {
        width: 100%;
        overflow-x: hidden;
        padding: 20px;
    }

    .applications-grid,
    .specialization-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .application-item,
    .specialization-item {
        width: 90%; /* Jeden kafel na pełną szerokość */
    }
}
/* Responsywność dla iPad Air (szerokość: 820px) */
@media screen and (max-width: 820px) {
    .info-section,
    .specialization-grid,
    .applications-grid {
        display: flex;
        flex-wrap: nowrap; /* Uniemożliwia zawijanie bloków */
        justify-content: space-between; /* Równe odstępy między blokami */
        overflow-x: auto; /* Dodaje przewijanie poziome w przypadku braku miejsca */
        padding: 10px;
        gap: 15px;
    }

    .info-block,
    .specialization-item,
    .application-item {
        flex: 0 0 calc(33.33% - 10px); /* Trzy bloki w rzędzie */
        max-width: calc(33.33% - 10px); /* Utrzymanie stałej szerokości */
        min-width: 300px; /* Minimalna szerokość bloku */
        box-sizing: border-box;
    }
}

/* Responsywność dla urządzeń poniżej 768px */
@media screen and (max-width: 768px) {
    .info-section,
    .specialization-grid,
    .applications-grid {
        display: flex;
        flex-wrap: nowrap; /* Uniemożliwia zawijanie bloków */
        justify-content: space-between;
        overflow-x: auto; /* Dodaje przewijanie poziome w przypadku braku miejsca */
        gap: 10px;
        padding: 10px;
    }

    .info-block,
    .specialization-item,
    .application-item {
        flex: 0 0 calc(50% - 10px); /* Dwa bloki w rzędzie */
        max-width: calc(50% - 10px);
        min-width: 280px; /* Minimalna szerokość bloku */
    }
}
/* Dla iPad Air (szerokość: 820px) */
@media screen and (min-width: 820px) and (max-width: 1024px) {
    .specialization-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Wyśrodkowanie elementów */
        gap: 20px;
    }

    .specialization-item {
        flex: 0 0 calc(33.33% - 20px); /* Trzy elementy w jednym rzędzie */
        max-width: calc(33.33% - 20px);
        box-sizing: border-box;
    }
}
/* Dla iPad Air (szerokość: 820px) */
@media screen and (min-width: 820px) and (max-width: 1024px) {
    .applications-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Wyśrodkowanie kart */
        gap: 20px; /* Odstępy między kartami */
    }

    .application-item {
        flex: 0 0 calc(33.33% - 20px); /* Trzy elementy w rzędzie */
        max-width: calc(33.33% - 20px); /* Utrzymanie proporcji */
        box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
    }
}
/* Responsywność dla MacBooków (1024px - 1440px) */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
    .specialization-grid,
    .applications-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-between; /* Równe odstępy między elementami */
    }

    .specialization-item,
    .application-item {
        width: calc(33.33% - 20px); /* Trzy elementy w rzędzie */
        max-width: calc(33.33% - 20px);
    }

    .specialization-title,
    .applications-title {
        font-size: 2.2rem; /* Dostosowanie rozmiaru tytułów */
        text-align: center; /* Wyśrodkowanie tytułów */
    }

    .specialization-item h3,
    .application-item h3 {
        font-size: 1.8rem; /* Dopasowanie nagłówków */
    }

    .specialization-item p,
    .application-item p {
        font-size: 1.2rem; /* Dopasowanie rozmiaru tekstu */
    }
}
/* Stylizacja dla ekranów powyżej 1024px */
@media screen and (min-width: 1024px) {
    .specialization-grid,
    .applications-grid {
        display: flex; /* Ustawienie elementów w jednym rzędzie */
        flex-wrap: nowrap; /* Uniemożliwia zawijanie elementów */
        justify-content: space-between; /* Równomierne rozmieszczenie elementów */
        gap: 20px; /* Odstęp między elementami */
    }

    .specialization-item,
    .application-item {
        flex: 0 0 calc(33.33% - 20px); /* Każdy element zajmuje 1/3 szerokości */
        max-width: calc(33.33% - 20px); /* Maksymalna szerokość */
        box-sizing: border-box; /* Uwzględnij padding/margines w szerokości */
    }
}