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

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   /*  background-color: #fff9e7; */
   background-color: #7c0326;
}

p {margin-bottom: 15px; line-height: 1.8;}
p a {text-decoration: none; color: #7c0326;}
p a:hover {text-decoration: underline;}

strong {color: #7c0326;}

a {
    position: relative;
    color: #0056b3; /* Barva textu */
    text-decoration: none;
    padding: 15px 20px; /* Zachování dostatečného prostoru */
    transition: background-color 0.3s ease, color 0.3s ease; /* Plynulý přechod barvy */
}

a:hover {
    background-color: #0056b3; /* Výrazná barva (např. oranžovo-červená) */
    color: #fff; /* Barva textu při hoveru */
    border-radius: 0px; /* Volitelně zaoblené rohy */
}

.pudorys {
  display: block;
  margin: auto;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 90%;
  max-width: 800px;
  border-radius: 0px !important; /* ← tady patří !important */
}

/* Výběr textu */
::selection {
  background-color: #7c0326; /* barva pozadí při označení */
  color: #ffffff;            /* barva textu při označení */
}

/* Pro kompatibilitu se staršími prohlížeči WebKit */
::-moz-selection {
  background-color: #7c0326;
  color: #ffffff;
}

/* Postupné odhalení obsahu */
.fade-in {
    opacity: 0; /* Skryté na začátku */
    transform: translateY(20px); /* Posun dolů */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Plynulý přechod */
    visibility: hidden; /* Zabrání vykreslení mimo viewport */
}

.fade-in.visible {
    opacity: 1; /* Plně viditelné */
    transform: translateY(0); /* Zpět na původní pozici */
    visibility: visible; /* Viditelné */
}

/* Header */
header {
    background-color: #7c0326;
    height: 100px; /* Výška hlavičky */
    display: flex;
    align-items: center; /* Vertikální zarovnání prvků */
}

header .container {
    display: flex;
    justify-content: space-between; /* Logo vlevo, hamburger/menu vpravo */
    align-items: center;
    max-width: 1200px; /* Maximální šířka obsahu */
    margin: 0 auto; /* Zarovnání na střed */
    padding: 0 20px; /* Odstup od okrajů */
    width: 100%; /* Plná šířka */
}

/* Sekce Popis */
#description-section {
    width: 100%;
    min-height: 900px;
    background: url('img/uvoz-blur.jpg') center/cover no-repeat; /* Obrázek jako pozadí */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
    position: relative;
}

#description-panel {
    max-width: 600px;
    background-color: #fff9e7; /* Překrytí pro zesvětlení */
    display: block;
    text-align: left;
    margin: 30px;
    padding: 0;
    position: relative;
    border-radius: 30px;

}

#description-section h1 {
    font-family: 'PT Sans', sans-serif; /* Pokud chcete použít stejný font jako logo */
    font-size: 32px;
    font-weight: 700;
    color: #7c0326;
    margin: 30px;
    padding-top: 25px;
}

#description-section p {
    max-width: 1200px;
    margin: 30px;
    color: #000000;
    line-height: 1.5;
    padding-bottom: 15px;
}

/* containery */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    
}

.container img {
        border-radius: 35px;
}
.container2 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

.container2 p {line-height: 1.5; color: #ffffff;}
.container2 h1 {font-family: 'PT Sans', sans-serif; /* Pokud chcete použít stejný font jako logo */ font-size: 34px; color: #ffffff; text-align: center;}
.container2 h2 {margin-bottom: 15px; margin-top: 15px; font-family: 'PT Sans', sans-serif; color: #ffffff}
.container2 ul {margin-left: 30px; color: #ffffff}
.container2 strong {color:#ffffff;}
.container2 a {color: #FB5432;}

.container2 img{
    width: 100%;
    height: 450px;
    object-fit: cover;
    margin-top: 25px;
    margin-bottom: 15px;
    border-radius: 35px;
}

.video-wrapper {
  max-width: 1180px;   /* limit šířky */
  max-height: 600px;   /* limit výšky */
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;  /* drží poměr stran */
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50px;
}

.ikona-text {
  align-items: center;      /* zarovná text a ikonu na výšku */
  font-size: 16px;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.ikona-inline {
  width: 20px;              /* velikost podle potřeby */
  height: auto;
  border-radius: 0px;
}

.border0 {border-radius: 0;}

.logo {
    font-family:  'PT Sans', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

.logo a {
    color: white;
    text-decoration: none;
}

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

/* Desktop zobrazení */
.menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.menu-header {
    display: none;
}

/* Zavírací tlačítko je defaultně skryté */
.close-btn {
    display: none;
}

.menu li {
    position: relative;
}

.menu a {
    position: relative;
    color: #fff; /* Barva textu */
    text-decoration: none;
    padding: 15px 20px; /* Zachování dostatečného prostoru */
    transition: background-color 0.3s ease, color 0.3s ease; /* Plynulý přechod barvy */
}

.menu a:hover {
    background-color: #FB5432; /* Výrazná barva (např. oranžovo-červená) */
    color: #fff; /* Barva textu při hoveru */
    border-radius: 0px; /* Volitelně zaoblené rohy */
}

.hamburger {
    display: none; /* Skryté ve výchozím nastavení */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    background-color: white;
    height: 3px;
    width: 25px;
}

/* Dropdown menu - hlavní styl */
.dropdown {
    display: none;
    position: absolute;
    top: calc(100%); /* Dropdown začne přesně pod položkou a přidáme 10px mezery */
    left: 0;
    background-color: #7c0326; /* Tmavě červená barva pozadí */
    list-style: none;
    padding: 10px 0; /* Přidáme vertikální prostor uvnitř dropdown menu */
    margin: 0;
    z-index: 1000;
    width: 200px; /* Nastavíme pevnou šířku */
    border-radius: 0px; /* Jemné zaoblení rohů */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Jemný stín */
}

/* Rodičovský kontejner položky s dropdown menu */
.dropdown-parent {
    position: relative; /* Zajistí, že dropdown menu je absolutně pozicované vzhledem k rodiči */
}

.menu li:hover .dropdown {
    display: block;
}

/* Dropdown položky */
.dropdown li {
    margin: 5px 0; /* Mezera mezi jednotlivými položkami */
}

.dropdown a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px; /* Zvětšíme prostor uvnitř položek */
    display: block;
    font-size: 16px; /* Zvýšíme velikost textu */
    background-color: transparent; /* Zajistíme průhledné pozadí jako výchozí */
    transition: background-color 0.3s ease, color 0.3s ease; /* Plynulý hover efekt */
}

/* Hover efekt pro dropdown položky */
.dropdown a:hover {
    background-color: #FB5432; /* Výrazná barva na hover */
    color: #fff;
    border-radius: 0px;
}

/* main */
main {
    padding: 0;
}

main .container {
    margin-bottom: 40px; /* Přidáme mezery mezi kontejnery */
}

main .container:last-child {
    margin-bottom: 0; /* Poslední kontejner bez mezery dole */
}

.apartment {
    margin-bottom: 10px;
    background-color: #ffffff; /* Jemné pozadí */
    border-radius: 0px;
    padding: 35px;
    border-style: solid;
    border-width: 1px;
    border-color: #d1d1d1;
    border-radius: 50px;
}

.apartment h2 {
    font-family:  'PT Sans', sans-serif;
    font-size: 38px;
    margin-bottom: 20px;
    color: #7c0326;
}

.apartment .location {
    font-size: 18px;
    margin-bottom: 20px;
}

.apartman-main {
    display: flex;
    flex-wrap: nowrap; /* Prvky zůstanou na jednom řádku */
    width: 100%; /* Šířka kontejneru */
    gap: 0; /* Žádné mezery mezi položkami */
    margin: 0; /* Zajistí, že nebudou přidány další mezery */
    padding: 0; /* Zamezí vnitřním odsazením */
    box-sizing: border-box; /* Správné počítání šířky */
}

.main-image {
    flex: 2;
    max-width: 66.666%; /* Zabere 2/3 šířky */
    margin: 5px; /* Zajistí, že nejsou žádné dodatečné mezery */
    padding: 0; 
}

.main-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.info-container {
    flex: 1;
    max-width: 33.333%; /* Zabere 1/3 šířky */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Obsah pod sebou */
    gap: 10px; /* Mezera mezi mapkou a hodnocením */
}

.google-map {
    flex: 1;
    height: 200px;
    margin: 5px;
    border-radius: 50px;
}

.rating {
    font-family:  'PT Sans', sans-serif;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8rem;
    font-weight: bold;
    color: #7c0326;
}

@media screen and (max-width: 768px) {
    .apartman-main {
        flex-direction: column; /* Prvky pod sebou */
    }
    .main-image,
    .info-container {
        max-width: 100%; /* Zabere plnou šířku */
    }

    .info-container {
        flex-direction: row; /* Mapka a hodnocení vedle sebe */
    }

    .google-map,
    .rating {
        flex: 1;
        height: auto;
        font-size: 4rem;
    }
}

.apartment .gallery {
    display: flex;
    flex-wrap: wrap; /* Povolit zalamování na další řádky */
    gap: 10px; /* Mezera mezi obrázky */
    justify-content: center; /* Zarovná obrázky na střed */
    margin: 30px 0; /* Přidáme mezery nad a pod galerií */
    padding: 0; /* Žádné vnitřní odsazení */
}

.apartment .gallery img {
    width: 105px; /* Pevná šířka obrázků */
    height: 105px; /* Pevná výška obrázků */
    object-fit: cover; /* Zachování čtvercového tvaru */
    border-radius: 0px; /* Volitelné zaoblení rohů */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* Plynulá animace */
    cursor: pointer; /* Změní kurzor na ukazatel (ruka) */
    border: 2px solid transparent; /* Transparentní ohraničení, aby nedocházelo k posunům */
    border-radius: 30px;
}

@media screen and (max-width: 768px) {
    .apartment .gallery img {
        width: 95px; /* Pevná šířka obrázků */
        height: 95px; /* Pevná výška obrázků */
    }
}

.apartment .gallery img:hover {
    transform: scale(1.1); /* Mírné zvětšení obrázku při najetí myší */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Zvýraznění stínu při najetí */
    border: 2px solid #7c0326; /* Červené ohraničení při hoveru */
}

.features {
    display: flex; /* Použijeme flexbox */
    flex-wrap: wrap; /* Povolit zalamování na další řádky */
    gap: 10px; /* Mezera mezi buňkami */
    justify-content: center; /* Zarovnání buňek vlevo */
    margin-bottom: 25px;
}

.feature {
    display: inline-flex; /* Flexbox uvnitř jednotlivé buňky */
    align-items: center; /* Zarovná obsah na střed vertikálně */
    gap: 5px; /* Mezera mezi ikonou a textem */
    padding: 10px; /* Přidáme vnitřní odsazení */
    background-color: #f9f9f9; /* Světlé pozadí */
    border: 1px solid #ddd; /* Ohraničení */
    border-radius: 5px; /* Zaoblené rohy */
    white-space: nowrap; /* Zabraňuje zalomení textu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0); /* Jemný stín */
    font-size: 14px; /* Přizpůsobení velikosti textu */
}

.icon {
    font-size: 1.5em; /* Velikost ikony */
    flex-shrink: 0; /* Zabrání zmenšování ikony */
}

.text {
    font-size: 1em; /* Velikost textu */
    color: #333; /* Barva textu */
}

.feature .icon {
    font-size: 20px; /* Velikost ikony */
}

.apartment .description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Tlačítka */

.buttons-container {
    display: flex;
    justify-content: center; /* Zarovnání na střed */
    align-items: center;
    flex-wrap: wrap; /* Zajistí zalamování na menších obrazovkách */
    gap: 15px; /* Mezera mezi tlačítky */
    margin-top: 20px; /* Odstup od obsahu výše */
}

.info-button, .booking-button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.info-button {
    background-color: #7c0326; /* Barva webu */
    color: #fff; /* Bílý text */
    border: 1px solid #7c0326;
}

.info-button:hover {
    background-color: #fff; /* Bílé pozadí při hoveru */
    color: #7c0326; /* Barva textu webu při hoveru */
    border: 1px solid #7c0326;
}

.booking-button {
    background-color: #007bff; /* Modrá barva */
    color: #fff; /* Bílý text */
    border: 1px solid #007bff;
}

.booking-button:hover {
    background-color: #0056b3; /* Tmavší modrá při hoveru */
    border-color: #0056b3;
}

/* Responzivní zobrazení */
@media screen and (max-width: 768px) {
    .buttons-container {
        flex-direction: column; /* Tlačítka pod sebou */
    }

    .info-button, .booking-button {
        width: 100%; /* Tlačítka zabírají celou šířku */
        text-align: center;
    }
}

footer {
    background-color: #7c0326;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    padding-top: 45px;
    text-align: center;
    min-height: 100px;
}

/* Společné styly pro jazykový přepínač */
.language-switch {
    display: flex;
    align-items: center;
    gap: 5px; /* Vzdálenost mezi vlajkou a textem */
}

.language-switch .flag {
    width: 20px; /* Šířka vlajky */
    height: auto; /* Zachování proporcí */
    display: inline-block;
}

.language-link {
    color: #fff;
    text-decoration: none;
    font-size: 16px; /* Velikost textu */
}

/* Desktop verze */
.desktop-only {
    display: flex;
}

/* Mobilní verze */
.mobile-only {
    display: none; /* Skryté v desktop verzi */
}

/* Hodnocení */
.guest-reviews {
    margin: 20px 0;
    font-family: 'Roboto', sans-serif;
    width: 100%;

}

.review-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

.review-score {
    background-color: #7c0326;
    color: #f9f9f9;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.review-info h2 {
    font-size: 20px;
    margin: 0;
    padding-right: 25px;
}

.review-info p {
    margin: 5px 0 0;
    font-size: 14px;
}

.review-info a {
    color: #007bff;
    text-decoration: none;
}

.review-info a:hover {
    text-decoration: underline;
}

.availability-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.availability-button:hover {
    background-color: #0056b3;
}

.review-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.review-category {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}


.review-category span {
    flex-shrink: 0;
    font-size: 14px;
    color: #ffffff;
}

.progress-bar {
    flex-grow: 1;
    height: 8px;
    background-color: #000000;
    border-radius: 5px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background-color: #ffffff;
    border-radius: 5px;
}

.review-category .score {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

/* Hodnocení carousall */
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
}

.carousel-track-container {
    overflow: hidden;
    width: 80%; /* Nastavit šířku dle potřeby */
    position: relative; /* Aby bylo možné správně pracovat s trackem */
    padding: 0; /* Zabránění dalším mezerám */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 5px; /* Mezera mezi hodnoceními */
    list-style: none; /* Odstraní tečky mezi položkami */
    margin: 0; /* Zabrání přidání mezer */
    padding: 0; /* Zabrání mezerám kolem tracku */
    width: 100%; /* Zajistí, že track bude přizpůsoben obalu */
}

.carousel-slide {
    flex: 0 0 33.33%; /* Na desktopu zobrazíme tři hodnocení */
    max-width: 33.33%; /* Každé zabírá třetinu šířky */
    box-sizing: border-box;
    padding: 10px;
    display: flex; /* Umožní rovnoměrnou výšku */
    flex-direction: column; /* Obsah skládá svisle */
    justify-content: space-between; /* Vyrovná obsah uvnitř */
    align-items: center; /* Zarovnání obsahu na střed */
}

@media (max-width: 768px) {
    .carousel-slide {
        flex: 0 0 100%; /* Na mobilu zobrazíme jedno hodnocení */
        max-width: 100%; /* Šířka na celou obrazovku */
    }
}

.testimonial {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex; /* Přidá flexbox pro obsah uvnitř */
    flex-direction: column;
    justify-content: space-between; /* Rovnoměrné rozložení obsahu */
    height: 100%; /* Zajistí, že všechny boxy budou stejné výšky */
}

.carousel-btn {
    background: #7c0326;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}
  
/* Host */
.host-container {
    margin: 20px;
    text-align: left;
}

.host-header h2 {
    font-family:  'PT Sans', sans-serif;
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 15px;
}

.host-header hr {
    border: 1px solid hsl(0, 0%, 100%);
    margin-bottom: 20px;
    width: 100%;
}

.host-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.host-image img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.host-text {
    flex: 1;
}

.host-text ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.host-text ul li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #000000;
}

.host-text p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #ffffff;
}

@media (max-width: 768px) {
    .host-content {
        flex-direction: column; /* Fotografie a text se zobrazí pod sebou */
        align-items: center; /* Zarovná obsah na střed */
        text-align: center; /* Text bude na střed */
    }

    .host-image {
        margin-bottom: 20px; /* Přidá mezery mezi fotografií a textem */
    }

    .host-text {
        text-align: left; /* Pokud chcete zarovnat text vlevo */
    }
}

.okolí {
    padding: 20px;
    background-color: #fff9e7;
    border-radius: 50px;
}

.okolí h2 {
    font-size: 28px;
    margin-bottom: 10px;
    padding-left: 25px  ;
    color: #7c0326;
}

.okolí a {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
    margin-right: 10px;
}

.okolí-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.okolí-column {
    flex: 1 1 220px;
    background: #fff;
    padding: 15px;
    border-radius: 25px;
}

.okolí-column h3 {
    font-size: 18px;
    color: #7c0326;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.okolí-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.okolí-column li {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.5;
}

.okolí .info {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

.okoli-map {
  display: flex;
  justify-content: center;   /* vodorovně doprostřed */
}

.okoli-map iframe {
  width: min(100%, 1100px);   /* responzivní šířka */
  aspect-ratio: 16 / 9;       /* drží poměr místo pevné výšky */
  height: auto;
  border: 0;
}

@media (max-width: 768px) {
    .okolí-container {
        flex-direction: column;
    }

    .okolí-column {
        flex: 1 1 100%;
    }
}

.equipment {
    font-family: 'Roboto', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.equipment h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    margin-left: 15px;
    color: #7c0326;
}

.equipment p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
    margin-right: 15px;
}

.equipment-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 15px;
}

.equipment-category {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 15px;
}

.equipment-category h4 {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 15px;
    padding-left: 25px;
    color: #7c0326;
}

.equipment-category h4 .icon {
    margin-right: 10px;
    font-size: 1.5em;
}

.equipment-category ul {
    list-style: none;
    padding: 0;
    padding-left: 25px;
    margin: 0;
}

.equipment-category ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
}

.equipment-category ul li::before {
    content: '✔️';
    position: absolute;
    left: 0;
    color: green;
    font-size: 1em;
}

/* Podminky */
.podminky {
    margin: 20px auto;
    max-width: 1200px;
    padding: 20px;
    background-color: #fff9e7;
    border-radius: 50px;
}

.podminky h2 {
    font-size: 24px;
    margin-bottom: 10px;
    padding:25px;
    color: #333;
}

.podminky p {
    margin-bottom: 20px;
    color: #666;
    line-height: 1.6;
    padding: 0 25px 0;
}

.podminky-content {
    display: flex;
    flex-direction: column;
    gap: 0 25px 0;
}

.podminka {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.podminka .icon {
    font-size: 24px;
    color: #007bff;
    flex-shrink: 0;
}

.podminka .info h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.podminka .info p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

.podminka .info a {
    color: #007bff;
    text-decoration: none;
}

.podminka .info a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .podminka {
        flex-direction: column;
        align-items: flex-start;
    }

    .podminka .icon {
        font-size: 20px;
        margin-bottom: 5px;
    }
}

/* Nepřehlédněte */
.neprehlednete {
    margin: 20px auto;
    max-width: 1200px;
    padding: 20px;
    background-color: #7c0326;;
    border-radius: 0px;
}

.neprehlednete h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff9e7;
}

.neprehlednete p {
    margin-bottom: 20px;
    color: #fff9e7;
    line-height: 1.6;
}

.info-box {
    background: #fff9e7;
    border: 1px solid #fff9e7;
    border-radius: 25px;
    padding: 15px 20px;
   
}

.info-box p {
    margin: 10px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}


/* Mobilní zobrazení */
@media (max-width: 768px) {
    #description-section {padding: 15px;}
    .container {padding: 15px;}

    .hamburger {
        display: flex; /* Zobrazí hamburger menu na mobilních zařízeních */
    }

    nav .menu {
        display: none; /* Skryjeme hlavní menu na mobilu */
    }

    .menu {
        display: none; /* Výchozí stav je skryté */
        flex-direction: column;
        background-color: #7c0326;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 0; /* Výchozí výška */
        overflow: hidden; /* Skryje obsah při výchozím stavu */
        z-index: 1000;
        opacity: 0; /* Neviditelné */
        transition: height 0.5s ease-in, opacity 0.5s ease-in; /* Plynulé přechody */
        visibility: hidden; /* Skryté pro přístupnost */
    }
    
    /* Aktivní stav menu (otevřené) */
    .menu.active {
        display: flex; /* Zobrazíme flexbox */
        height: 70%; /* Nastavíme plnou výšku */
        opacity: 1; /* Viditelné */
        visibility: visible; /* Přístupné */
    }

    .menu-header {
        display: flex;
        justify-content: space-between; /* Nadpis vlevo, tlačítko vpravo */
        align-items: center; /* Vertikální zarovnání na střed */
        width: 100%;
        padding: 10px 30px; /* Přidá odsazení kolem obsahu */
        box-sizing: border-box; /* Zohlední padding do celkové šířky */
        margin-bottom: 5px; /* Mezery pod nadpisem a tlačítkem */
    }

    .menu-header h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #fff9e7;
        margin: 0;
        text-align: left; /* Zarovnání textu nadpisu vlevo */
    }

    .menu-header .close-btn {
        background: none;
        border: none;
        color: #fff9e7;
        font-size: 24px;
        cursor: pointer;
        margin: 0;
        text-align: right; /* Zarovnání tlačítka doprava */
    }

    .menu li {
        width: 100%;
        text-align: left;
    }

    .menu a {
        padding: 15px 30px;
        color: #fff9e7;
        text-align: left;
        display: block;
    }

    .menu a:hover {
        background-color: #ff4500;
    }

    .dropdown {
        position: static; /* Mobil: dropdown bude zarovnán podle obsahu */
        top: 0; /* Zrušíme odsazení */
        margin: 0; /* Přidáme pouze malý rozestup */
        width: 100%; /* Rozšíření na celou šířku menu */
        box-shadow: none; /* Zrušíme stín pro mobilní verzi */
    }

    .close-btn {
        display: block; /* Zavírací tlačítko viditelné pouze v mobilním režimu */
        align-self: center; /* Zarovnání na střed vertikálně v rámci flexboxu */
        background: none;
        border: none;
        color: #fff9e7;
        font-size: 24px;
        cursor: pointer;
        margin: 0; /* Zrušíme spodní margin */
        padding: 0; /* Zrušíme padding pro přesnější umístění */
    }

    .desktop-only {
        display: none; /* Skryjeme jazykový přepínač v desktop verzi */
    }

    .mobile-only {
        display: flex; /* Zobrazíme jazykový přepínač v mobilní verzi */
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
    }

    /* Styl pro mobilní jazykový přepínač */
    .language-switch.mobile-only {
        display: flex;
        align-items: center;
        justify-content: center; /* Zarovnání do středu */
        gap: 5px;
        margin-top: 10px; /* Mezera pod nadpisem */
        margin-bottom: 10px; /* Mezera nad zavíracím tlačítkem */
    }

    /* Styl pro vlajku */
    .language-switch .flag {
        width: 20px; /* Šířka vlajky */
        height: auto;
        gap: 10px;
    }

    .flag {
        margin-right: 10px;
        gap: 10px;
    }

    .features {
        gap: 5px; /* Menší mezera mezi buňkami na mobilu */
    }
    .feature {
        font-size: 0.9em; /* Mírně menší text na menších obrazovkách */
    }
}

@media (min-width: 769px) {
    header {
        height: 100px; /* Zvýší výšku headeru */
        padding: 0; /* Zruší padding */
        display: flex;
        align-items: center;
    }

    .menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 80px; /* Přidáme line-height pro vertikální zarovnání */
        padding: 0 20px; /* Horizontální padding pro prostor mezi odkazy */
        height: 100px; /* Ujistíme se, že odkazy vyplní celý header */
        color: #fff9e7; /* Barva textu */
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .menu a:hover {
        background-color: #ff4500; /* Zvýraznění na celou výšku odkazu */
        color: #fff9e7;
    }

    .container {
        max-width: 1200px; /* Pro lepší zarovnání obsahu */
        width: 100%;
        margin: 0 auto;
        height: 100%; /* Zajistí, že obsah vyplní výšku headeru */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}