/* Obecný styl pro stránku */
body {
  margin: 0;
  font-family: "Roboto", sans-serif; /* Použití fontu Roboto */
  background-color: #f5f9fc;
  font-size: 18px; /* Velikost textu */
}

/* Modrý pruh nahoře */
.blue-bar {
  background-color: #00afec;
  width: 100%; /* Zajistíme, že pruh zabírá celou šířku obrazovky */
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; /* Ujistíme se, že není žádné odsazení */
  padding: 0; /* Zajistíme, že není žádné vnitřní odsazení */
}

/* Obsah v modrém pruhu */
.blue-bar-content {
  max-width: 100%; /* Zajistíme, že nebude širší než 100% */
  padding-left: 20px; /* Nastavení levého odsazení */
  padding-right: 20px; /* Nastavení pravého odsazení */
  color: #f5f5f5; /* Barva textu */
  font-family: "Roboto", sans-serif; /* Font Roboto */
  font-size: 24px; /* Velikost písma */
  font-weight: 700; /* Tloušťka písma */
  font-style: normal; /* Normální styl písma */
  font-stretch: condensed; /* Zúžené písmo */
  letter-spacing: normal; /* Normální mezery mezi písmeny */
  text-align: center; /* Zarovnání textu na střed */
  word-wrap: break-word; /* Zajištění, že text se správně zalomí */
  overflow-wrap: break-word; /* Zabrání přetečení textu */
}

/* Druhá sekce s textem a obrázkem */
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Na desktopu se obsah rozdělí na 2 části */
  align-items: flex-start; /* Ujistíme se, že obrázek a text budou zarovnány odshora */
  width: 75vw; /* Zajištění šířky 75% viewportu */
  margin: 0 auto; /* Zarovnání sekce na střed */
  padding: 20px 0; /* Mírné odsazení vertikálně */
}

.text,
.image {
  width: 45%; /* Obě části (obrázek a text) budou mít šířku 45% */
  padding: 10px;
}

.text {
  text-align: left; /* Zarovnání textu vlevo */
}

.image {
  display: flex;
  justify-content: center; /* Obrázek bude na střed */
}

.image img {
  max-width: 90%; /* Nastavíme maximální šířku obrázku */
  height: auto;
}

/* Responsivní styl pro mobilní zařízení */
@media (max-width: 768px) {
  .blue-bar {
    width: 100%; /* Zabere celou šířku obrazovky */
    margin-left: 0; /* Zajistíme, že nebude mít žádné odsazení */
    margin-right: 0; /* Zajistíme, že nebude mít žádné odsazení */
    padding: 0; /* Zajistíme, že není žádné vnitřní odsazení */
  }

  .blue-bar-content {
    padding-left: 20px; /* Zajištění správného odsazení */
    padding-right: 20px; /* Zajištění správného odsazení */
    font-size: 18px; /* Zmenšíme velikost písma na mobilních zařízeních */
    text-align: center; /* Text bude stále na střed */
  }

  .content {
    flex-direction: column; /* Na mobilu bude obsah vertikálně */
    align-items: center; /* Zarovnání do středu */
    width: 100%; /* Šířka 100% pro mobilní zobrazení */
    padding: 20px 0; /* Mírné odsazení pro mobilní zobrazení */
  }

  .text {
    width: 75vw; /* Text bude mít šířku 75% viewportu */
    text-align: left; /* Zarovnání textu vlevo */
    padding: 10px;
  }

  .image {
    width: 75vw; /* Obrázek bude mít šířku 75% viewportu */
    display: flex;
    justify-content: center;
  }

  .image img {
    max-width: 90%;
    height: auto;
  }

  /* Nadpisy v modrém pruhu */
  h1 {
    word-wrap: break-word; /* Zajištění, že text se správně zalomí */
    overflow-wrap: break-word; /* Zabrání přetečení textu */
    width: 100%; /* Zajištění, že nadpisy nebudou širší než viewport */
  }
}