body {
    font-family: Arial, Helvetica, sans-serif; /* Nastaví písmo pre celú stránku */
    line-height: 1.6; /* Nastaví medzery medzi riadkami textu */
    padding: 0; /* Odstráni vnútorné okraje stránky */
    margin: 0; /* Odstráni vonkajšie okraje stránky */
    background-color: #121212; /* Nastaví tmavé pozadie stránky */
    color: #e0e0e0; /* Nastaví svetlú farbu textu */
}

.navigacia {
    padding: 10px 0; /* Nastaví vertikálne vnútorné okraje */
    width: 100%; /* Navigácia pokrýva celú šírku stránky */
    background-color: rgba(30, 30, 30, 0.9); /* Nastaví tmavé, polopriehľadné pozadie */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Pridá tieň pod navigáciu */
}
.menu {
    list-style: none; /* Odstráni štýl odrážok zo zoznamu */
    display: flex; /* Nastaví usporiadanie položiek pomocou flexboxu */
    justify-content: flex-end; /* Zarovná položky na pravú stranu */
    margin: 0; /* Odstráni vonkajšie okraje */
    padding: 0; /* Odstráni vnútorné okraje */
    flex-wrap: wrap; /* Umožní zalomenie položiek pri menšej šírke */
}
.menu li {
    margin: 0 15px; /* Nastaví horizontálne medzery medzi položkami */
}
.menu a {
    color: #e9d39a; /* Nastaví farbu odkazov */
    text-decoration: none; /* Odstráni podčiarknutie odkazov */
    transition: background-color 0.3s; /* Pridá plynulý efekt zmeny pozadia */
    padding: 8px; /* Nastaví vnútorné okraje odkazov */
}
.menu a:hover {
    background-color: rgba(85, 85, 85, 0.8); /* Zmení pozadie pri prechode myšou */
    border-radius: 5px; /* Zaoblení rohy odkazu */
}

.logo {
    margin-top: 10px; /* Nastaví horný okraj loga */
    margin-left: 10px; /* Nastaví ľavý okraj loga */
    width: 10%; /* Nastaví šírku loga na 10% */
    height: auto; /* Automaticky prispôsobí výšku */
    cursor: pointer; /* Zmení kurzor na ukazovateľ pri prechode myšou */
    transition: transform 0.3s; /* Pridá efekt plynulého zväčšenia pri prechode */
}
.logo:hover {
    transform: scale(1.05); /* Jemne zväčší logo pri prechode myšou */
    border-radius: 10px; /* Zaoblení rohy loga */
}

.uvod {
    text-align: center; /* Zarovná text do stredu */
    font-size: 1.2em; /* Nastaví mierne väčší font */
}
.uvod h1 {
    color: #e9d39a; /* Nastaví farbu nadpisu */
    font-size: 1.3em; /* Nastaví veľkosť fontu */
    margin-bottom: 0; /* Odstráni spodný okraj nadpisu */
}

.ponuka-sekcia {
    padding: 40px 20px; /* Nastaví vnútorné okraje */
    max-width: 800px; /* Obmedzí šírku sekcie */
    margin: 0 auto; /* Zarovná sekciu na stred */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie sekcie */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 8px; /* Zaoblení rohy sekcie */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
}
.ponuka-sekcia h1 {
    font-size: 1.8em; /* Nastaví veľkosť fontu */
    color: #e9d39a; /* Nastaví farbu textu */
    margin-bottom: 10px; /* Pridá spodný okraj */
    border-bottom: 2px solid #e9d39a; /* Pridá dolnú linku */
    padding-bottom: 5px; /* Nastaví spodné vnútorné okraje */
}
.ponuka-sekcia strong {
    display: block; /* Umožní zalomenie textu */
    font-size: 1.1em; /* Zvýrazní text */
    color: #e0e0e0; /* Nastaví farbu textu */
    margin-top: 15px; /* Pridá horný okraj */
}
.ponuka-sekcia p {
    font-size: 1em; /* Nastaví veľkosť písma */
    color: #e0e0e0; /* Nastaví farbu textu */
    line-height: 1.8; /* Nastaví riadkovanie textu */
    margin-top: 10px; /* Pridá horný okraj */
}

blockquote {
    font-size: 1em; /* Nastaví veľkosť písma citácie */
    color: #e0e0e0; /* Nastaví farbu textu */
    margin: 20px 0; /* Pridá vertikálne medzery okolo citácie */
    padding: 15px 20px; /* Nastaví vnútorné okraje */
    background-color: #2a2a2a; /* Nastaví tmavé pozadie */
}
blockquote cite {
    display: block; /* Zobrazuje citáciu na novom riadku */
    text-align: center; /* Zarovná citáciu do stredu */
    font-style: italic; /* Nastaví kurzívu pre citáciu */
    color: #e9d39a; /* Nastaví farbu textu citácie */
}

.obrazky {
    text-align: center; /* Zarovná obsah sekcie do stredu */
    padding: 40px 20px; /* Nastaví vnútorné okraje */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie sekcie */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 8px; /* Zaoblení rohy sekcie */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
}
.obrazky h2 {
    color: #e9d39a; /* Nastaví farbu nadpisu sekcie */
    margin-bottom: 20px; /* Pridá spodný okraj nadpisu */
}
.obrazok {
    width: 30%; /* Nastaví šírku obrázkov na 30% */
    height: auto; /* Automaticky prispôsobí výšku */
    margin: 10px; /* Nastaví vonkajšie okraje obrázkov */
    border-radius: 8px; /* Zaoblení rohy obrázkov */
    transition: transform 0.3s; /* Pridá efekt plynulého zväčšenia */
}
.obrazok:hover {
    cursor: pointer; /* Zmení kurzor na ukazovateľ pri prechode myšou */
    transform: scale(1.05); /* Jemne zväčší obrázok pri prechode myšou */
    box-shadow: 0 0 12px #e9d39a; /* Pridá svetelný tieň */
}

.onas-vyzia-tim {
    padding: 40px 20px; /* Nastaví vnútorné okraje sekcie */
    max-width: 800px; /* Obmedzí maximálnu šírku sekcie */
    margin: 0 auto; /* Zarovná sekciu na stred */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 8px; /* Zaoblení rohy sekcie */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
}
.onas-vyzia-tim h1, h2, h3 {
    font-size: 1.8em; /* Nastaví veľkosť fontu */
    color: #e9d39a; /* Nastaví farbu textu */
    margin-bottom: 10px; /* Pridá spodný okraj */
    border-bottom: 2px solid #e9d39a; /* Pridá dolnú linku */
    padding-bottom: 5px; /* Nastaví spodné vnútorné okraje */
}
.onas-vyzia-tim p {
    font-size: 1em; /* Nastaví veľkosť písma */
    color: #e0e0e0; /* Nastaví farbu textu */
    line-height: 1.8; /* Nastaví riadkovanie textu */
    margin-top: 10px; /* Pridá horný okraj */
}
.onas-vyzia-tim strong {
    display: block; /* Zobrazuje text na novom riadku */
    font-size: 1.2em; /* Zvýrazní text */
    color: #e0e0e0; /* Nastaví farbu textu */
    margin-top: 15px; /* Pridá horný okraj */
}

.ponuka-zoznam {
    width: 100%; /* Nastaví šírku zoznamu na celú stránku */
    max-width: 800px; /* Obmedzí maximálnu šírku zoznamu */
    margin: 20px auto; /* Zarovná zoznam na stred a pridá vertikálne medzery */
    padding: 20px; /* Nastaví vnútorné okraje */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie */
    border-radius: 8px; /* Zaoblení rohy zoznamu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
    text-align: center; /* Zarovná obsah do stredu */
}
dl {
    display: flex; /* Nastaví usporiadanie pomocou flexboxu */
    flex-wrap: wrap; /* Umožní zalomenie pri menšej šírke */
    justify-content: center; /* Zarovná obsah do stredu */
}
dt {
    font-weight: bold; /* Zvýrazní názvy */
    margin: 10px; /* Pridá vonkajšie medzery */
    padding: 13px; /* Nastaví vnútorné okraje */
    text-align: center; /* Zarovná text do stredu */
    width: 13%; /* Nastaví šírku položiek */
    background-color: #2a2a2a; /* Nastaví tmavé pozadie */
    color: #e9d39a; /* Nastaví farbu textu */
    border-radius: 4px; /* Zaoblení rohy */
}
dd {
    text-align: center; /* Zarovná obsah do stredu */
    margin: 0; /* Odstráni vonkajšie okraje */
    padding-top: 5px; /* Nastaví horné vnútorné okraje */
    width: 100%; /* Nastaví šírku na celú dostupnú plochu */
}

.ponuka-obrazok {
    width: 90%; /* Nastaví šírku obrázku na 90% dostupného priestoru */
    height: auto; /* Automaticky prispôsobí výšku podľa šírky */
    margin-top: 5px; /* Pridá horný okraj obrázku */
    margin-bottom: 5px; /* Pridá spodný okraj obrázku */
    border-radius: 4px; /* Zaoblení rohy obrázku */
    transition: transform 0.3s; /* Pridá efekt plynulého zväčšenia */
}
.ponuka-obrazok:hover {
    cursor: pointer; /* Zmení kurzor na ukazovateľ pri prechode myšou */
    transform: scale(1.05); /* Jemne zväčší obrázok pri prechode myšou */
    box-shadow: 0 0 12px #e9d39a; /* Pridá svetelný tieň */
}

.tabuka {
    width: 100%; /* Nastaví šírku tabuľky na celú šírku rodiča */
    max-width: 800px; /* Obmedzí maximálnu šírku tabuľky */
    margin: 20px auto; /* Zarovná tabuľku na stred a pridá vertikálne medzery */
    margin-top: 0px; /* Odstráni horný okraj */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie */
    border-radius: 8px; /* Zaoblení rohy tabuľky */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
    padding: 20px; /* Nastaví vnútorné okraje */
    color: #e0e0e0; /* Nastaví farbu textu */
    text-align: center; /* Zarovná obsah do stredu */
}
.vnutro-tabulky {
    width: 100%; /* Nastaví šírku vnútornej tabuľky na 100% rodiča */
    border-collapse: collapse; /* Odstráni medzery medzi bunkami tabuľky */
    color: #e0e0e0; /* Nastaví farbu textu */
}
.vnutro-tabulky th, .vnutro-tabulky td {
    padding: 12px 15px; /* Nastaví vnútorné okraje buniek */
    border: 1px solid #333; /* Pridá tmavý rámik okolo buniek */
}
.vnutro-tabulky th {
    background-color: #2a2a2a; /* Nastaví tmavé pozadie pre hlavičku tabuľky */
    color: #e9d39a; /* Nastaví farbu textu v hlavičke tabuľky */
    font-weight: bold; /* Zvýrazní text */
}
.vnutro-tabulky tr:nth-child(even) {
    background-color: #222; /* Nastaví odlišnú farbu pre párne riadky */
}
.vnutro-tabulky tr:hover {
    background-color: #555; /* Nastaví farbu pre riadok pri prechode myšou */
}

.obrazkova-mapa-nadpis {
    text-align: center; /* Zarovná nadpis do stredu */
    font-size: 1.8em; /* Nastaví veľkosť textu */
    color: #e9d39a; /* Nastaví farbu textu */
    margin-top: 0px; /* Odstráni horný okraj */
    margin-bottom: 20px; /* Pridá spodný okraj */
}
.obrazkova-mapa {
    width: 51%; /* Nastaví šírku obrázku na 51% dostupného priestoru */
    height: auto; /* Automaticky prispôsobí výšku podľa šírky */
    display: block; /* Nastaví obrázok ako blokový prvok */
    margin: 0 auto; /* Zarovná obrázok na stred */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 5px; /* Zaoblení rohy obrázku */
}

.video-audio {
    padding: 40px 20px; /* Nastaví vnútorné okraje sekcie */
    max-width: 800px; /* Obmedzí maximálnu šírku sekcie */
    margin: 0 auto; /* Zarovná sekciu na stred */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 8px; /* Zaoblení rohy sekcie */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
    text-align: center; /* Zarovná obsah do stredu */
}

.tlacidlo {
    background-color: #e9d39a; /* Nastaví svetlé pozadie pre tlačidlo */
    color: #1e1e1e; /* Nastaví tmavú farbu textu */
    padding: 10px 20px; /* Nastaví vnútorné okraje */
    text-decoration: none; /* Odstráni podčiarknutie textu */
    border-radius: 5px; /* Zaoblení rohy tlačidla */
    transition: background-color 0.3s; /* Pridá efekt pri zmene farby pozadia */
}
.tlacidlo:hover {
    background-color: #333; /* Nastaví tmavé pozadie pri prechode myšou */
    color: #e9d39a; /* Zmení farbu textu pri prechode myšou */
}

.kontakt-sekcia {
    text-align: center; /* Zarovná obsah sekcie na stred */
    padding: 40px 20px; /* Nastaví vnútorné okraje */
    max-width: 550px; /* Obmedzí maximálnu šírku sekcie */
    margin: 0 auto; /* Zarovná sekciu na stred */
    background-color: #1e1e1e; /* Nastaví tmavé pozadie */
    margin-bottom: 20px; /* Pridá spodný okraj */
    border-radius: 8px; /* Zaoblení rohy sekcie */
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.3); /* Pridá jemný tieň */
}
.kontakt-sekcia a {
    color: #e9d39a; /* Nastaví farbu odkazov */
    text-decoration: none; /* Odstráni podčiarknutie odkazov */
}
.kontakt-sekcia-nadpis {
    font-size: 1.8em; /* Nastaví veľkosť textu pre nadpis */
    color: #e9d39a; /* Nastaví farbu textu nadpisu */
    margin-bottom: 10px; /* Pridá spodný okraj */
    border-bottom: 2px solid #e9d39a; /* Pridá spodnú čiaru */
    padding-bottom: 5px; /* Pridá vnútorný spodný okraj */
    padding-left: 120px; /* Pridá ľavý okraj */
    padding-right: 120px; /* Pridá pravý okraj */
}
.kontakt-info {
    background-color: #222; /* Nastaví tmavé pozadie pre kontaktné informácie */
    text-align: center; /* Zarovná text na stred */
    color: #e0e0e0; /* Nastaví svetlú farbu textu */
}
.kontakt-info h3 {
    color: #e9d39a; /* Nastaví farbu nadpisu */
    padding-top: 10px; /* Pridá horný vnútorný okraj */
    padding-bottom: 10px; /* Pridá spodný vnútorný okraj */
    margin-top: 0px; /* Odstráni horný okraj */
}
.kontakt-info a {
    text-decoration: none; /* Odstráni podčiarknutie odkazov */
    color: #fff; /* Nastaví bielu farbu textu odkazov */
}

.prava {
    margin-bottom: 0; /* Odstráni spodný okraj */
}

.scroll-na-vrch {
    position: fixed; /* Umiestni tlačidlo pevne na dané miesto */
    bottom: 35px; /* Umiestni tlačidlo 35px od spodného okraja */
    right: 20px; /* Umiestni tlačidlo 20px od pravého okraja */
    background-color: #e9d39a; /* Nastaví farbu pozadia tlačidla */
    color: #333; /* Nastaví farbu textu */
    border-radius: 50%; /* Zaoblení tlačidlo do kruhového tvaru */
    width: 25px; /* Nastaví šírku tlačidla */
    height: 25px; /* Nastaví výšku tlačidla */
    text-align: center; /* Zarovná text do stredu */
    font-size: 15px; /* Nastaví veľkosť textu */
    text-decoration: none; /* Odstráni podčiarknutie textu */
    transition: background-color 0.3s; /* Pridá efekt pri zmene farby pozadia */
}
.scroll-na-vrch:hover {
    background-color: #555; /* Nastaví tmavé pozadie pri prechode myšou */
    color: #e9d39a; /* Zmení farbu textu pri prechode myšou */
}

html {
    scroll-behavior: smooth; /* Umožňuje plynulé scrollovanie */
}