* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #0d1b2a; /* Tmavě modrá barva */
    color: #ffffff; /* Bílý text pro lepší kontrast */
}

.header {
    height: 60px;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-right: 300px 
    
}

.logo img {
    height: 100px;      
    margin-left: 300px;  /* logo */
    width: auto;
}

.navbar a {
    font-size: 30px;
    color: #ededed;
    text-decoration: none;
    font-weight: 500;
    margin-left: 20px;
    margin-right: 10px;
    transition: 0.3s;
    
    
}

.navbar a:hover,
.navbar a.active {
    color: white;
    font-size: 22px;
}

.home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.home-content {
    text-align: center;
    margin-top: -50px;
}

.home-content h1 {
    font-size: 100px;
    font-weight: 700;
    margin-top: 80px;
    margin-left: 20px;
}


.home-content h3 {
    font-size: 30px;
    font-weight: 700;
    color: lightblue;
}
.home-content h2 {
    font-size: 50px;
    color: white;
    margin-bottom: 90px; /* Malá mezera pro vyvážený vzhled */
    margin-top: 120px
}

.image-gallery {
    display: flex; /* Zajistí, že obrázky budou vedle sebe */
    justify-content: center; /* Zarovnání obrázků do středu */
    gap: 20px; /* Mezery mezi obrázky */
    margin-top: -200px; /* Odstup od názvu "Hledáme nadějné vývojáře" */
}

.gallery-img {
    width: 450px; /* Šířka obrázků */
    height: auto; /* Zachování poměru stran */
    border-radius: 10px; /* Zaoblené rohy pro estetický vzhled */
}

.home-content p {
    font-size: 16px;
}
.below-gallery-text {
    text-align: center; /* Zarovnání textu na střed */
    margin-top: 60px; /* Posunutí textu dolů */
}

.below-gallery-text h4 {
    font-size: 60px; /* Zvětšená velikost písma */
    color: white;
}
.below-gallery-text {
    text-align: center; /* Zarovnání textu do středu */
    margin-top: 70px; /* Posunutí textu dolů */
}

.below-gallery-text h5 {
    font-size: 30px; /* Zvětšení velikosti textu */
    color: white; /* Bílá barva pro kontrast */
}


.second-image-gallery {
    display: flex;
    justify-content: center;
    gap: 90px;
    margin-top: 30px;
}

.gallery-item {
    text-align: center; /* Zarovná text do středu */
}

.second-image-gallery .gallery-img {
    width: 200px;
    height: auto;
    border-radius: 10px;
}

.second-image-gallery h5 {
    font-size: 25x; /* Velikost textu */
    color: lightblue; /* Barva textu */
    margin-bottom: 10px; /* Odsazení mezi textem a obrázkem */
}

.third-image-gallery {
    display: flex;
    justify-content: center;
    gap: 40px; /* Stejná mezera mezi obrázky jako v předchozí sekci */
    margin-top: 40px; /* Zvýšení mezery mezi sekcemi */
}

.third-image-gallery .gallery-item {
    text-align: center;
}

.third-image-gallery .gallery-img {
    width: 450px;
    height: auto;
    border-radius: 10px;
    margin-top: 10px;
}

.third-image-gallery h5 {
    margin-top: 90px;
    font-size: 30px;
    color: lightblue;
    margin-bottom: 15px; /* Stejný styl jako v předchozí sekci */
    
}
.text-above-gallery {
    text-align: center; /* Text je zarovnán na střed */
    margin: 0 auto; /* Zajistí vodorovné umístění na střed */
    font-size: 30px; /* Velikost písma */
    color: white; /* Barva textu */
    margin-left: 40px;
    
}
.below-gallery-text h3 {
    font-size: 50px; /* Zvětšená velikost písma */
    color: white;
    margin-left: -80px;
    margin-right: -1100px;
    
} 

.left-image {
    margin-top: 100px; /* Posune obrázek nahoru */
    vertical-align: top; /* Zajistí, že obrázek bude zarovnán nahoru */
}
.footer {
    text-align: center; /* Zarovnání na střed */
    background-color: #0d1b2a; /* Tmavé pozadí pro kontrast */
    color: white; /* Bílý text */
    padding: 20px; /* Vycpávka pro prostor */
    margin-top: 60px
    
}

.footer form {
    max-width: 400px; /* Omezení šířky formuláře */
    margin: 0 auto; /* Zarovnání na střed */
    display: flex;
    flex-direction: column; /* Uspořádání prvků svisle */
    gap: 15px; /* Mezera mezi prvky */
}

.footer form input,
.footer form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.footer form button {
    padding: 10px;
    background-color: lightblue;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.footer h3 {
    text-align: center; /* Zarovnání textu na střed */
    font-size: 15px; /* Zvýšení velikosti textu */
    margin-right:5px;
    font-size: 60px;
    margin-bottom: 20px; /* Mezera pod nadpisem */
}

.image-gallery p {
    width: 80%
}

@media (max-width: 768px) {
    * {
        font-size: 14px; /* Snížíme velikost písma na menších obrazovkách */
    }

    .header {
        flex-direction: column;
        align-items: center; /* Zajistíme, že prvky jsou na středu */
        padding: 10px; /* Přidáme více prostoru */
    }

    .logo img {
        height: 40px; /* Snížíme velikost loga */
        margin-left: 0; /* Resetujeme margin */
    }

    .navbar {
        flex-direction: column; /* Vertikální uspořádání na menších obrazovkách */
        gap: 10px; /* Přidáme mezery mezi odkazy */
    }

    .navbar a {
        font-size: 16px; /* Snížíme velikost textu */
        margin: 0; /* Resetujeme margin */
    }
}
@media (max-width: 768px) {
    .image-gallery {
        flex-direction: column; /* Obrázky budou pod sebou */
        gap: 10px; /* Menší mezera mezi obrázky */
        margin-top: 20px; /* Upravíme mezery nad galerií */
    }

    .gallery-img {
        width: 100%; /* Obrázky budou přes celou šířku */
        height: auto; /* Zachováme poměr stran */
        border-radius: 5px; /* Menší zaoblení rohů */
    }
    
    .below-gallery-text {
        margin-top: 30px; /* Přidáme více prostoru nad textem */
    }
}
@media (max-width: 768px) {
    .home {
        flex-direction: column; /* Vertikální uspořádání */
        height: auto; /* Upravíme výšku sekce */
        padding: 20px; /* Přidáme prostor okolo */
    }

    .home-content h1 {
        font-size: 50px; /* Snížíme velikost hlavního nadpisu */
    }

    .home-content h2 {
        font-size: 30px; /* Snížíme velikost podnadpisu */
    }

    .home-content h3 {
        font-size: 20px; /* Snížíme velikost menších nadpisů */
    }
    
    .home-content p {
        font-size: 14px; /* Snížíme velikost textu v odstavcích */
    }
}@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Uspořádání ve sloupci */
        align-items: center; /* Zarovnání na střed */
    }

    .footer form {
        max-width: 100%; /* Formulář se přizpůsobí šířce */
    }

    .footer h3 {
        font-size: 20px; /* Snížíme velikost nadpisu */
    }

    .footer form input,
    .footer form textarea,
    .footer form button {
        font-size: 14px; /* Snížíme velikost textu ve formuláři */
    }
}
/* Základní responzivita obrázků */
.gallery-img, .logo img {
    max-width: 100%; /* Obrázek nebude širší než jeho kontejner */
    height: auto; /* Udržuje správný poměr stran */
}

/* Responzivní úpravy pro menší obrazovky */
@media (max-width: 768px) {
    .image-gallery {
        flex-direction: column; /* Obrázky pod sebou */
        gap: 10px; /* Menší mezera mezi obrázky */
    }

    .gallery-img {
        width: 100%; /* Obrázky budou přes celou šířku */
        height: auto; /* Zachováme poměr stran */
    }

    .second-image-gallery {
        flex-direction: column; /* Obrázky pod sebou */
        gap: 10px; /* Menší mezera mezi obrázky */
    }

    .third-image-gallery {
        flex-direction: column; /* Obrázky pod sebou */
        gap: 10px; /* Menší mezera mezi obrázky */
    }

    .gallery-item {
        text-align: center; /* Ujistíme se, že text je zarovnán na střed */
    }
}
@media (max-width: 768px) {
    .home-content {
        text-align: center; /* Zarovnání textu na střed */
    }

    .home-content h1 {
        font-size: 50px; /* Snížení velikosti hlavního nadpisu */
    }

    .home-content h2 {
        font-size: 30px; /* Snížení velikosti podnadpisu */
    }

    .home-content h3 {
        font-size: 20px; /* Menší velikost dalšího textu */
    }

    .home-content p {
        font-size: 14px; /* Snížení velikosti odstavců */
    }
}
/* Základní styl pro navigační panel */
.navbar {
    display: flex; /* Zobrazí položky vedle sebe */
    justify-content: space-around; /* Rozmístí položky rovnoměrně */
    list-style: none;
}

/* Styl pro tlačítko pro mobilní zařízení */
.navbar-toggle {
    display: none; /* Skryto na větších obrazovkách */
    background: none;
    border: none;
    font-size: 24px; /* Větší písmo pro snadné kliknutí */
}

/* Media query pro menší obrazovky */
@media (max-width: 600px) {
    .navbar {
        display: none; /* Na malých obrazovkách skryto */
        flex-direction: column; /* Svislé zobrazení */
    }

    .navbar a {
        text-align: center; /* Zarovnání textu */
        padding: 10px; /* Prostor kolem textu */
    }

    .navbar-toggle {
        display: inline; /* Tlačítko je viditelné */
    }
}