@font-face {
  font-family: 'sen';
  src: url('sen.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'sen', sans-serif;
  background-color: #f2f2f2; /* Barva pozadí stránky */
  position: relative; /* Nastavení relativní pozice pro body */
}

#box {
  width: 100%;
  height: auto;
}

#header {
  position: relative; /* Nastavení relativní pozice pro záhlaví */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  max-width: 200px;
  height: auto;
  transition: transform 0.3s ease;
}

.logo:hover img {
  transform: scale(1.1);
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  font-family: 'sen', sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 5px;
  transition: 0.3s ease;
}

nav ul li a:hover {
  background-color: #ddd;
}

.search {
  display: flex;
  align-items: center;
  position: relative; /* Přidání relativní pozice pro pozdější umístění ikony vyhledávání */
}

.search input[type="text"] {
  padding: 10px; /* Zvýšení polštářování pro lepší vzhled */
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 300px; /* Zvětšení šířky pole pro lepší použitelnost */
  margin-right: 10px; /* Odsazení mezi polem a tlačítkem */
}

.search button {
  padding: 10px 20px; /* Zvýšení polštářování pro lepší vzhled */
  border: none;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Plynulý přechod při najetí myší */
}

.search button:hover {
  background-color: #555; /* Změna barvy pozadí při najetí myší */
}

.user-options {
  position: absolute; /* Nastavení absolutní pozice pro odkazy "Košík" a "Můj účet" */
  top: 20px; /* Umístění od horní hrany záhlaví */
  right: 20px; /* Umístění od pravého okraje záhlaví */
  display: flex;
}

.user-options a {
  font-family: 'sen', sans-serif;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding: 8px 12px;
  border: 2px solid #333;
  border-radius: 5px;
  transition: 0.3s ease;
  margin-left: 10px; /* Mezera mezi Košíkem a Můj účet */
}

.user-options a:hover {
  background-color: #333;
  color: #fff;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Skryje přebytečný obsah nad a pod záhlavím */
}

.slides {
  display: flex;
  transition: 0.5s ease;
  
}

.slide {
  flex: 0 0 100%;
  opacity: 1; /* Přidáme výchozí průhlednost */
  transition: 1s ease; /* Plynulý přechod pro změnu průhlednosti */
}
.slide h1 {
  font-size: 100px;
  color: #fff;
}
.slide h2{
  font-size: 50px;
  margin-left: 50px;
  color: #fff;
}


.slide img {
  width: 100%;
  height: auto;
}

.caption {
  position: absolute;
  top: 10px; /* Posunutí na horní okraj */
  left: 10px; /* Posunutí na levý okraj */
  color: rgb(0, 0, 0);
  text-align: left; /* Zarovnání textu vlevo */
}

.prev {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.next {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.popis {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 20px 50px;
  margin-top: 10px;
}

.popis h2 {
  font-size: 35px; /* Snížil jsem velikost písma pro lepší vizuální rovnováhu */
  text-transform: uppercase;
  font-weight: bold; /* Přidal jsem tučnost pro zvýraznění */
  color: #333; /* Změnil jsem barvu textu na tmavě šedou pro kontrast s pozadím */
}

.popis a {
  color: #fff; /* Změnil jsem barvu textu na bílou pro lepší čitelnost na pozadí */
  text-decoration: none;
  background: #333; /* Změnil jsem barvu pozadí na tmavě šedou */
  border: none; /* Odstranil jsem ohraničení */
  border-radius: 20px; /* Zaoblení rohů */
  padding: 12px 24px; /* Zvětšil jsem vnitřní odsazení pro lepší vzhled */
  transition: background-color 0.3s ease; /* Přidal jsem plynulou změnu barvy pozadí */
}
.produkty-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.popis a:hover {
  background-color: #555; /* Změnil jsem barvu pozadí při najetí myší na odkaz */
}

.produkty div {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1; /* Nastavil jsem z-index, aby overlay byl nad ostatními prvky */
  transform: translateY(-100%);
  transition: 0.3s ease;
  font-size: 10px;
  opacity: 0; /* Overlay bude výchozím stavem skrytý */
  visibility: hidden; /* Overlay bude výchozím stavem skrytý */
}


.produkty div:hover .overlay {
  transform: translateY(0);
  opacity: 1; /* Overlay se zobrazí při najetí myší */
  visibility: visible; /* Overlay se zobrazí při najetí myší */
}

.sizes {
  margin-bottom: 5px;
}

.sizes p {
  margin: 0;
  font-weight: bold;
}

.sizes ul {
  list-style: none;
  padding: 0;
  margin: 5px 0 0;
}

.sizes ul li {
  display: inline-block;
  background-color: #333;
  color: white;
 padding: 5px 10px; 
  margin-right: 5px;
  border-radius: 5px;
}

.overlay a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 0px 10px;
  background-color: #333;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
}

.overlay a:hover {
  background-color: #555;
}

.produkty {
  width: 1350px;
  height: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  background-color: rgb(255, 255, 255);
  margin-top: 50px;
}

.produkt1,
.produkt2,
.produkt3,
.produkt4,
.produkt5,
.produkt6,
.produkt7,
.produkt8,
.produkt9,
.produkt10 {
  width: 230px;
  height: 230px;
  transition: 0.3s ease;
  cursor: pointer;
}

.produkt1:hover,
.produkt2:hover,
.produkt3:hover,
.produkt4:hover,
.produkt5:hover,
.produkt6:hover,
.produkt7:hover,
.produkt8:hover,
.produkt9:hover,
.produkt10:hover {
  transform: scale(1.03); /* Zvětšení po najetí myší */
}

.produkt1 {
  background-image: url(photos/nabidkaphoto1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt2 {
  background-image: url(photos/nabidkaphoto2.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt3 {
  background-image: url(photos/nabidkaphoto3.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt4 {
  background-image: url(photos/nabidkaphoto4.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt5 {
  background-image: url(photos/nabidkaphoto5.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt6 {
  background-image: url(photos/nabidkaphoto6.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt7 {
  background-image: url(photos/nabidkaphoto7.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt8 {
  background-image: url(photos/nabidkaphoto8.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt9 {
  background-image: url(photos/nabidkaphoto9.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt10 {
  background-image: url(photos/nabidkaphoto10.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.produkt1 h1,
.produkt1 h2,
.produkt2 h1,
.produkt2 h2,
.produkt3 h1,
.produkt3 h2,
.produkt4 h1,
.produkt4 h2,
.produkt5 h1,
.produkt5 h2,
.produkt10 h1,
.produkt10 h2,
.produkt6 h1,
.produkt6 h2,
.produkt7 h1,
.produkt7 h2,
.produkt8 h1,
.produkt8 h2,
.produkt9 h1,
.produkt9 h2,
.produkt10 h1,
.produkt10 h2 {
  font-size: 14px;
}

.produkt1 h1,
.produkt2 h1,
.produkt3 h1,
.produkt4 h1,
.produkt5 h1,
.produkt10 h1,
.produkt6 h1,
.produkt7 h1,
.produkt8 h1,
.produkt9 h1 {
  margin-top: 230px;
  color: #333;
}

.produkt1 h3,
.produkt2 h3,
.produkt3 h3,
.produkt4 h3,
.produkt5 h3,
.produkt6 h3,
.produkt7 h3,
.produkt8 h3,
.produkt9 h3,
.produkt10 h3 {
  font-size: 20px;
  color: #777;
}

.produkt1 h2,
.produkt2 h2,
.produkt3 h2,
.produkt4 h2,
.produkt5 h2,
.produkt6 h2,
.produkt7 h2,
.produkt8 h2,
.produkt9 h2,
.produkt10 h2 {
  margin-left: 5px;
  color: #555;
}

.cara {
  width: 100%;
  height: 1px; 
  background-color: #ccc; 
  margin: 5px 0; 
}

.dalsi-okna-container {
  width: 100%;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  background-color: rgb(255, 255, 255);
  margin-top: 20px; 
}
.okna-stred {
  width: 1600px;
  margin: 0 auto; 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dalsi-okno1,.dalsi-okno2,.dalsi-okno3,.dalsi-okno4 {
  width: 320px;
  height: 320px;
  background-color: #ddd;
  transition: 0.3s ease;  
}
.dalsi-okno1{
  background-image: url(photos/dalsiokna1.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.dalsi-okno2{
  background-image: url(photos/dalsiokna2.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.dalsi-okno3{
  background-image: url(photos/dalsiokna3.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.dalsi-okno4{
  background-image: url(photos/dalsiokna4.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.dalsi-okno1 h1, .dalsi-okno2 h1, .dalsi-okno3 h1, .dalsi-okno4 h1{
  font-size: 20px;
  margin-top: 320px;
}
.dalsi-okno1 h2, .dalsi-okno2 h2, .dalsi-okno3 h2, .dalsi-okno4 h2{
  font-size: 12px;
  margin-left: 5px;
}
.dalsi-okno1:hover,
.dalsi-okno2:hover,
.dalsi-okno3:hover,
.dalsi-okno4:hover {
  transform: scale(1.1); /* Zvětšení po najetí myší */
}


/* Styly pro newsletter */
.newsletter-container {
  background-color: #333;
  color: #fff;
  padding: 50px;
}

.newsletter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsletter-text {
  flex: 1;
  max-width: 400px;
}

.newsletter-form {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.newsletter-section h4 {
  font-size: 24px;
  margin-bottom: 20px;
}

.newsletter-section p {
  font-size: 16px;
  line-height: 1.5;
}

form {
  display: flex;
  align-items: center;
}

label {
  display: none;
}

input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  width: 250px;
  margin-right: 10px;
}

button {
  padding: 12px 24px;
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

button:hover {
  background-color: #555;
  color: #fff;
}

/* Styly pro patičku */
.footer-container {
  background-color: #222;
  color: #fff;
  padding: 50px;
  font-size: 15px
}

.footer-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.about-converse,
.support,
.contact-us {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
}

.about-converse h1,
.support h1,
.contact-us h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.additional-links {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.additional-links h1 {
  font-size: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.additional-links p {
  margin-right: 20px;
}

.additional-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.additional-links a:hover {
  color: #bbb;
}
@media only screen and (max-width: 767px) and (orientation: portrait){/*Pro phone na výšku*/}

@media only screen and (max-width: 767px) and (orientation: landscape){/*Pro phone naležato*/}

@media only screen and (min-width: 768px) and (max-width: 1370px) and (orientation: portrait){/*Tablet na výšku*/}

@media only screen and (min-width: 768px) and (max-width: 1370px) and (orientation: landscape){/*Tablet nalažato*/}