html, body {
    background-color: white; /* Černá barva pozadí za hlavním kontejnerem */
    margin: 0;
    padding: 0;
    
}

.logo {
    position: absolute;
    top: 10px;
    left: 30px;
    right:0px;
    width: 250px; /* Nastavte šířku podle potřeby */
    height: auto; /* Ponechte automatickou výšku pro zachování poměru stran */
}

.main-container {
    max-width: 1200px; /* Maximální šířka hlavního kontejneru */
    margin: 0 auto; /* Zarovnání hlavního kontejneru na střed stránky */
    padding: 20px; /* Vnitřní odsazení pro lepší čitelnost obsahu */
    background-color: white;
   
}

.header {
    background-color: transparent;
    padding: 10px 20px; /* Vnitřní odsazení navigace */
}

.navigation {
    
    
    margin-top: 0px;
    background-color: transparent;
   
}

.navigation ul {
    list-style-type: none;
    margin-bottom: 20px;
    padding-left: 6px;
    margin-left: 15px;
   
}

.navigation ul li {
    display: inline;
    margin-right: 30px;
}

.navigation ul li a {
    font-weight: bold;
   
    text-decoration: none; /* Odstranění podtržení textu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
    font-size: 22px; /* Velikost písma */
    
}


.nadpis {
    text-align: right; /* Zarovnání textu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
    padding-right: 50px; /* Posunutí textu doprava o 10px */
    font-size: 45px; /* Velikost písma */
    margin-bottom: 20px;
}


..banner-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  
    
}



.banner {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
   
}

.banner img {
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px; /* Zaoblené rohy pro obrázky */
}

.banner img.active {
    opacity: 1;
}

.content-container {
    /* Styly pro kontejner s obsahem */
    max-width: 1200px;
    position: relative; /* Přidání relativní pozice */
    z-index: 0; /* Zajištění, že textové kontejnery budou pod bannery */
    margin: 0 auto; /* Zarovnání na střed */
    margin-top: 370px; 
   
}


.ceremonial {
font-family: Arial, sans-serif; /* Použije písmo Arial s fallbackem na generické bezserifové písmo */
font-size: 16px; /* Velikost písma 12px */

text-align: justify;

}

.text-container {
    display: flex;
    justify-content: space-around;
    
   
}
.text-box {
    margin-bottom: 50px; /* Mezera mezi jednotlivými textovými kontejnery */
    margin-right: 20px;
    margin-left: 20px;
    width: 90%; /* Zajistí, že textové boxy budou mít 90% šířky kontejneru */
    max-width: 800px; /* Nastaví maximální šířku textových boxů */
    text-align: right; 
   
}


.text-box p {
    color: black;
    
    line-height: 1.5; /* Řádkování */
    text-align: justify;
    width: 100%; /* Text bude stejně široký jako jeho kontejner */
    font-family: Arial, sans-serif; /* Použije písmo Arial s fallbackem na generické bezserifové písmo */
    font-size: 16px; /* Velikost písma 12px */
    display: block; /* Zarovná text do bloku */
}

.text-box h2 {
    text-align: left; /* Zarovnání textu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
   
    font-size: 30px; /* Velikost písma */
}

.text-box img {
    max-width: 100%; /* Obrázek bude stejně široký jako jeho kontejner */
    max-height: 100%; /* Zajistí, že obrázek nebude vyšší než jeho kontejner */
    flex-shrink: 0; /* Obrázek nebude zmenšován, pokud to nebude nutné */
    display: block; /* Zajištění, že obrázek bude mít vlastnost display: block; */
    margin: auto; /* Automatické zarovnání obrázku na střed vodorovně */
}

.expand-button {
    color: blue; /* Barva textu tlačítka */
    cursor: pointer; /* Ukazatel myši při najetí na tlačítko */
    text-decoration: underline; /* Podtržení textu tlačítka */
}
.expanded {
    max-height: none !important; /* Zrušíme maximální výšku, aby se text zobrazil celý */
}

.show-more-button {
    background-color: #b6f5cbb7; /* Barva pozadí tlačítka */
    color: white; /* Barva textu tlačítka */
    border: none; /* Žádný ohraničení tlačítka */
    padding: 10px 20px; /* Odsazení tlačítka */
    font-size: 16px; /* Velikost písma tlačítka */
    cursor: pointer; /* Ukazatel myši se změní na ruku při najetí na tlačítko */
    border-radius: 5px; /* Zaoblené rohy tlačítka */
    transition: background-color 0.3s; /* Plynulá změna barvy pozadí při najetí na tlačítko */
}

.show-more-button:hover {
    background-color: #065232; /* Barva pozadí tlačítka při najetí myši */
}

.footer {
    background-color: white; /* Barva pozadí patičky */
    padding: 15px 0; /* Vnitřní odsazení patičky */
    text-align: center; /* Zarovnání obsahu do středu */
    
    bottom: 0; /* Přilepení patičky ke spodnímu okraji */
    width: 100%; /* Šířka patičky bude 100% šířky okna prohlížeče */
}

.footer p {
    margin: 0; /* Odstranění výchozího odsazení odstavce */
    font-size: 14px; /* Velikost písma v patičce */
}

/* Základní styly pro galerii */
.gallery {

    
    max-width: 1000px; /* Nastaví maximální šířku galerie na 1200 px */
   
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    padding-bottom: 100px;
     margin-left: 435px;
}

.gallery img {
    margin: 10px;
    width: 300px;
    height: 300px;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0px 4px 8px #0c4706; /* přidáme lehký stín */
   
   
}

.gallery img:hover {
    transform: scale(1.1);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* zvýšíme stín při najetí myší */
}
.modal {
    display: none;
    position: fixed;
    z-index: 9999; /* Nastavení vyššího z-indexu pro modální okno */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Průhledné pozadí */
    overflow: auto;
    justify-content: center; /* Zarovnání obsahu do středu horizontálně */
    align-items: center; /* Zarovnání obsahu do středu vertikálně */
}

.modal-content {
    position: relative;
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.mySlides {
    display: none;
}

.modal-img {
    width: 100%;
    height: auto;
}

.cursor {
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 0 3px 3px 0;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    user-select: none;
    z-index: 999; /* Zajištění, že tlačítka budou nad obrázky */
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

/* Dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1000;
    left: -20px; /* Posuneme odkazy doleva */
    top: 100%; /* Rozbalíme dropdown nahoru */
}

.dropdown-content .submenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Průhledný overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Průhledný overlay */
    z-index: 2;
}

.navigation1 {
    display: flex;
    margin-left: 130px;
    align-items: center;
    margin-bottom: 10px;
    background-color: transparent;
   
}

.navigation1 ul {
    list-style-type: none;
    margin-bottom: 1px;
    padding-left: 6px;
}

.navigation1 ul li {
    display: inline;
    margin-right: 30px;
}

.navigation1 ul li a {
    font-weight: bold;
   
    text-decoration: none; /* Odstranění podtržení textu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
    font-size: 23px; /* Velikost písma */
    
}



.nadpis1 {
   
        text-align: right; /* Zarovnání textu */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
        color: white; /* Barva textu */
        padding-right: 50px; /* Posunutí textu doprava o 10px */
        font-size: 45px; /* Velikost písma */
        margin-bottom: 20px;
    
}

a.no-underline {
    text-decoration: none; /* Zruší podtržení textu odkazu */
}



.container-pg h2 {
    text-align: center; /* Zarovná nadpis doleva */
   
    margin-bottom: 30px; /* Přidá mezery dolů nadpisu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
   
    font-size: 30px; /* Velikost písma */
}





.container .ceremonial {
    border: 2px solid transparent; /* Transparentní barva rámečku */
    border-radius: 10px; /* Zaoblení rohů */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Kouřový efekt s průhledností */
}

.container .aktuality {
    border: 2px solid transparent; /* Transparentní barva rámečku */
    border-radius: 10px; /* Zaoblení rohů */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Kouřový efekt s průhledností */
}

.text-container {
    border: 2px solid transparent; /* Transparentní barva rámečku */
    border-radius: 10px; /* Zaoblení rohů */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Kouřový efekt s průhledností */
}

.text-box img {
    width: 600px;
    height: auto;
}

.form-container {
    
    border: 2px solid transparent; /* Transparentní barva rámečku */
    border-radius: 10px; /* Zaoblení rohů */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Kouřový efekt s průhledností */
   
       
    
   
}

/* Styly pro responzivní design */

/* Základní styly pro responzivní design */

/* Prohlášení pro mobilní zařízení */
@media only screen and (max-width: 600px) {





    .logo {
        position: relative; /* Přizpůsobíme pozici loga */
        top: 0; /* Přesuneme logo na začátek obsahu */
        left: 0; /* Přesuneme logo na začátek obsahu */
        margin-bottom: 20px; /* Snížíme mezery pod logem */
    }

    .banner-container {
        margin-top: 20px; /* Snížíme mezery nad obsahem */
    }

    .content-container {
        margin-top: 150px; /* Snížíme mezery nad obsahem */
    }

    .text-container {
       
        margin-top: 20px; /* Snížíme mezery nad textovými boxy */
    }

    .nadpis {
        text-align: right; /* Zarovnání textu */
       
        font-size: 20px; /* Velikost písma */
        padding-right: 10px; /* Snížení odstupu napravo */
    }
  
        .text-container {
            display: block; /* Změna na blokové zobrazení pro jednotlivé textové boxy */
        }
        
        .text-box {
            margin-bottom: 20px; /* Snížení mezery mezi jednotlivými textovými boxy */
            margin-right: 0; /* Odstranění pravého odsazení */
            margin-left: 0; /* Odstranění levého odsazení */
            width: 90%; /* Zajistí, že textové boxy budou mít 90% šířky kontejneru */
            max-width: 100%; /* Maximální šířka bude odpovídat šířce kontejneru */
            text-align: justify; /* Zarovnání textu do bloku */
        }
    
    
    
    .banner {
        width: 100%; /* Změna šířky banneru pro mobilní zařízení */
        margin: 0 auto; /* Zarovnání banneru na střed */
    }
    .nadpis1 {font-size: 20px; }

    .container-pg h2 {
        margin-bottom: 20px; 
       
        font-size: 20px; /* Velikost písma */
    }
    
    
    
}



.footer {
    background-color: white; /* Barva pozadí patičky */
    padding: 20px 0; /* Vnitřní odsazení patičky */
}

.container {
    max-width: 1200px; /* Maximální šířka obsahu patičky */
    margin: 0 auto; /* Zarovnání obsahu patičky na střed */
}

.logo-social-container {
    display: inline-flex; /* Použití inline-flex */
    align-items: flex-start; /* Zarovnání položek nahoru */
}

.logo-box {
    display:flex;
    margin-left: 30px;
}

.social-box {
   display:flex;
    align-items: flex-start; /* Zarovnání položek nahoru */
}

.logo-box img {
    width: 130px; /* Přizpůsobení velikosti loga (upravte podle potřeby) */
    margin-right: 30px; /* Mezera mezi logy */
    height: 200px;

}


.social-box img {
    width: 50px; /* Přizpůsobení velikosti loga (upravte podle potřeby) */
    margin-right: 30px; /* Mezera mezi logy */
}

.copywrite-box {
    text-align: center; /* Zarovnání textu na střed */
    margin-top: 40px;
}



@media (max-width: 767px) {
    .logo-box, .social-box {
      display: flex;
      flex-wrap: wrap;
    }
  
    .logo-box img {
      width: 90px; /* Nová šířka log (upravte podle potřeby) */
      height: auto; /* Ponechání původního poměru stran */
      margin-right: 20px; /* Mezera mezi logy */
      margin-bottom: 20px; /* Přidáme mezery mezi logy pro oddělení */
    }


     .social-box img {
        width: 30px; /* Nová šířka log (upravte podle potřeby) */
        height: auto; /* Ponechání původního poměru stran */
        margin-right: 10px; /* Mezera mezi logy */
        margin-bottom: 20px; /* Přidáme mezery mezi logy pro oddělení */
      }

      
  }





.ceremonial-box {
    background-color: rgba(215, 216, 210, 0.986); /* modrá barva s 50% průhledností */
   
    display: inline-block;
    width: 350px;
    height: 590px;
   
    
    margin-right: 50px; /* Volitelné pro vzdálenost mezi boxy */
    box-sizing: border-box; /* Zahrnutí paddingu a borderu do celkové šířky */
    text-align: justify; /* Zarovná nadpis doleva */

    
    border: 2px solid transparent; /* Transparentní barva rámečku */
    border-radius: 10px; /* Zaoblení rohů */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Kouřový efekt s průhledností */
    font-family: Arial, sans-serif; /* Použije písmo Arial s fallbackem na generické bezserifové písmo */
    font-size: 15px; /* Velikost písma 12px */
   
}

.ceremonial-box h4 {font size: 50px;}


.container-ceremonial {
    display: flex;
    justify-content: center;
    padding-left: 65px;

}

.form-container p {text-align: center;

font-size: 17px; }

@media only screen and (max-width: 600px) {
    /* Nastavit .ceremonial-box na zobrazení pod sebou */
    .ceremonial-box {
        display: block;
        width: auto; /* Automatická šířka podle šířky obrazovky */
        margin-right: 0; /* Odstranění margin-right */
        margin-bottom: 20px; /* Nebo libovolný jiný požadovaný odstup */
        padding: 20px; /* Vnitřní odsazení */
        text-align: justify; /* Zarovná nadpis doleva */
    }

    /* Odstranit styly pro .container-ceremonial pro mobilní zařízení */
    .container-ceremonial {
        display: block;
        padding-left: 0; /* Odstranit levé odsazení */
    }
}




.bio {width: 800px;
display: block;
text-align: left;
margin-left: 500px;}

@media only screen and (max-width: 767px) {

    .gallery {margin:auto}
    .bio {margin-left:-30px;
        width: 400px
        text-align: left;}
}






/* Styly pro tlačítko hamburger */
.hamburger {
    display: none;
    cursor: pointer;

    position: absolute; /* Umožní absolutní pozicionování */
    top: 20px; /* Posune tlačítko hamburgeru 20px od horní hrany rodičovského prvku */
    right: 20px; /* Posune tlačítko hamburgeru 20px od pravé hrany rodičovského prvku */
    z-index: 999; /* Zajišťuje, že tlačítko bude navrchu ostatního obsahu */
    background-color: white;
    border: none;
    
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 5px;
    background-color: black;
}

/* Styly pro tlačítko hamburger ve stavu aktivace */
.hamburger.active span:first-child {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:last-child {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Základní styly pro mobilní navigaci (zobrazené na všech zařízeních) */
.mobile-navigation {
    display: none;
}

/* Zobrazení mobilní navigace pouze na mobilních zařízeních */
@media only screen and (max-width: 767px) {
    .hamburger {
        display: block;
        
    }

   

    .mobile-navigation {
        display: none;
    }

    .mobile-navigation.show {
        display: block;
    }

    .main-container {
        max-width: 100%; /* Maximální šířka na 100% šířky viewportu */
        padding: 10px; /* Redukované odsazení pro menší obrazovky */
        margin: 0; /* Žádné okraje */
    }

    .navigation{display:none;}
}

.hamburger.active span {
    background-color: #333; /* Pevná barva pro pruhy hamburgeru */

}

.mobile-navigation ul li a {
    color: black; /* Změní barvu textu na černou */
    font-weight: bold;
   
    text-decoration: none; /* Odstranění podtržení textu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 2px 2px 4px rgb(0, 0, 0); /* Horizontální offset, vertikální offset, rozmazání, barva stínu */
    color: white; /* Barva textu */
    font-size: 18px; /* Velikost písma */
}