/* Resetovanie stylov pre vsetky elementy */
* {
    margin: 0; /* Odstrani predvolene okraje */
    padding: 0; /* Odstrani predvolene vyplne */
    box-sizing: border-box; /* Zabezpeci spravne pocitanie velkosti boxov */
}

/* Styl pre telo stranky */
body {
    font-family: Arial, sans-serif; /* Nastavi pismo */
    color: #333; /* Farba textu */
    text-align: center; /* Zarovnanie textu */
}

/* Hlavicka */
header {
    background-color: #b30000; /* Cervene pozadie */
    color: white; /* Biela farba textu */
    padding: 2rem 1rem; /* Vnutorne odsadenie */
    position: relative; /* Pre pozicovanie loga */
}

header h1 {
    font-size: 2rem; /* Velkost nadpisu */
    margin-bottom: 1rem; /* Spodny odstup */
    text-align: center; /* Centrovanie textu */
}

/* Logo v hlavicke */
header .logo {
    height: 50px; /* Vyska loga */
    position: absolute; /* Absolutna pozicia */
    right: 20px; /* Vzdialenost od praveho okraja */
    top: 20px; /* Vzdialenost od vrchu */
}

/* Navigacia */
header nav {
    margin-top: 1rem; /* Horny odstup */
}

header nav a {
    display: inline-block; /* Horizontalne zoradenie odkazov */
    margin: 0 0.5rem; /* Odstupy medzi odkazmi */
    padding: 0.8rem 1.2rem; /* Vnutorne odsadenie */
    background-color: white; /* Biele pozadie odkazu */
    color: black; /* Cierny text */
    border: 2px solid #b30000; /* Cervene oramovanie */
    border-radius: 5px; /* Zaoblene rohy */
    text-decoration: none; /* Odstranenie podciarknutia */
    font-size: 1rem; /* Velkost textu */
    font-weight: bold; /* Tucny text */
    transition: background-color 0.3s ease, color 0.3s ease; /* Animacia na zmenu farby */
}

header nav a:hover {
    background-color: #b30000; /* Zmena farby pozadia pri hover */
    color: white; /* Zmena farby textu pri hover */
}

/* Obrazkova mapa */
#map {
    margin: 2rem auto; /* Centrovanie a odstup */
    display: flex; /* Flexbox pre zarovnanie */
    justify-content: center; /* Centrovanie obrazkov */
}

#map img {
    max-width: 100%; /* Obrazok nesmie presiahnut sirku kontajnera */
    height: auto; /* Zachovanie pomeru stran */
    transition: transform 0.3s ease; /* Animacia na hover */
}

#map img:hover {
    transform: scale(1.2); /* Zvysenie velkosti pri hover */
}

/* Globalne pravidla pre obrazky */
img {
    margin: 10px auto; /* Centrovanie obrazkov */
    display: block; /* Blokovy element */
    max-width: 100%; /* Obrazok nesmie presiahnut sirku kontajnera */
    height: auto; /* Zachovanie pomeru stran */
}

/* Obsah stranky */
main {
    padding: 5rem 10rem; /* Vnutorne odsadenie */
    max-width: 1000px; /* Maximalna sirka obsahu */
    margin: 0 auto; /* Centrovanie */
}

h2 {
    color: #b30000; /* Cervena farba nadpisu */
    font-size: 1.8rem; /* Velkost textu */
    margin-bottom: 1rem; /* Spodny odstup */
}

/* Sekcia sluzieb */
#services, #gallery, #testimonials {
    margin-bottom: 2rem; /* Odstup medzi sekciami */
}

.service-item, .gallery-item, .testimonial {
    background-color: #f9f9f9; /* Svetle pozadie */
    padding: 1rem; /* Vnutorne odsadenie */
    border-radius: 5px; /* Zaoblene rohy */
    margin-bottom: 1rem; /* Spodny odstup */
    border: 1px solid #ddd; /* Svetle oramovanie */
}

.service-item h3 {
    font-size: 1.2rem; /* Velkost nadpisu */
    color: #b30000; /* Cervena farba textu */
}

/* Video a audio sekcie */
section video, section audio {
    display: block; /* Blokove zobrazenie */
    margin: 1.5rem auto; /* Centrovanie s odstupom */
    border: 1px solid #ddd; /* Svetle oramovanie */
    border-radius: 20px; /* Zaoblene rohy */
    padding: 1rem; /* Vnutorne odsadenie */
    background-color: #c21717; /* Cervene pozadie */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Tien */
    max-width: 90%; /* Maximalna sirka */
}

section video {
    width: 50%; /* Polovicna sirka */
    height: auto; /* Zachovanie pomeru stran */
}

section audio {
    width: 100%; /* Cela sirka */
}

/* Paticka */
footer {
    background-color: #b30000; /* Cervene pozadie */
    color: white; /* Biela farba textu */
    text-align: center; /* Centrovanie textu */
    padding: 1rem; /* Vnutorne odsadenie */
}

footer .social-links a {
    color: white; /* Biela farba textu */
    text-decoration: none; /* Odstranenie podciarknutia */
    margin: 0 0.5rem; /* Odstup medzi odkazmi */
}

/* Obrazky so specifickymi stylmi */
#specific-image {
    border-radius: 20px; /* Zaoblene rohy */
    max-width: 100%; /* Obrazok nesmie presiahnut sirku kontajnera */
    height: auto; /* Zachovanie pomeru stran */
}

.float-image {
    float: left; /* Obrazok zarovnany dolava */
    margin: 10px; /* Vonkajsi odstup */
    max-width: 300px; /* Maximalna sirka */
    height: auto; /* Zachovanie pomeru stran */
}

/* Tabulky */
table {
    width: 50%; /* Polovicna sirka */
    margin: 0 auto; /* Centrovanie tabulky */
    border-collapse: collapse; /* Odstranenie medzier medzi bunkami */
}

table, th, td {
    border: 1px solid black; /* Cierne oramovanie */
}

th, td {
    padding: 10px; /* Vnutorne odsadenie buniek */
    text-align: center; /* Centrovanie textu v bunkach */
}