@media screen and (orientation: portrait)
{
    body 
    {
    -moz-transform: scale(1.2);
 	zoom: 1.2;
    }
}

body {
    --bs-body-bg: #ffffff; /* Temné pozadí */
    --bs-body-color: #202020; /* Světlý text, aby byl čitelný */
    background-color: var(--bs-body-bg); /* Ujistíme se, že se použije */
    color: var(--bs-body-color);
    padding: 0px;
}

a {
    text-decoration: none;
}

#debugBox 
{
	display: none;
        background: #f8f9fa;
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 20px;
        white-space: pre-wrap;
        word-wrap: break-word;
}

.menudole 
{
	overflow: hidden;
	position: fixed;
	z-index: 10;
	bottom: 20px;
	left: 20px;
	right: 0;
	width: 100%;
	border: 0;
}

.transparent-header {
  position: fixed;                   /* zůstane přilepený nahoře */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #e0e0e0;
  text-align: center;
  margin: 0;
  z-index: 1030;                    /* aby byl nad ostatními */
  margin-top: 0px;
}

.container
{
	max-width: 100%;
	margin-bottom: 20px;
}

.table-responsive
{
	width: 100%;
	margin: 0px;
	padding: 0px;
	margin-bottom: 50px;
}

.banner-container img 
{
	max-width: 50%;
        height: auto;
}

.contact-section 
{
        background-color: #fafafa;
        padding: 15px;
        margin-bottom: 0px;
        border-radius: 5px;
        border: 2px solid #852c84;
}

.parameter-list 
{
        list-style-type: none;
        padding: 0;
        margin: 0;
}
        
.parameter-list li 
{
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
}
        
.label 
{
        font-weight: bold;
        color: #495057;
}

.value 
{
        color: #6c757d;
}

.menu-card 
{
    	display: flex;
    	flex-direction: column;
   	align-items: center;
   	justify-content: center;
   	text-align: center;
    	padding: 5px;
    	min-height: 100px; /* Uprav podle potřeby */
    	color: white;
    	border-radius: 30px;
    	text-decoration: none;
    	border: 1px solid #852c84;
}

.menu-card i 
{
    	margin-bottom: 10px; /* Oddělí ikonu od textu */
}

.menu-card:hover 
{
       transform: scale(1.05);
       box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
       /*border: 2px solid #000000;*/
}

.header 
{
  /* Odebereme background a border-radius odtud, přesuneme je do .header__bottom */
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column; /* Aby se .header__top a .header__bottom skládaly pod sebe */
  height: 100px; /* Příklad celkové výšky headeru */
  /* padding-top: 30px; */ /* již nepotřebujeme */
}

.wrapper 
{
  width: 95%;
  margin: 0 auto;
  padding: 0 0px;
  display: flex;
  flex-direction: column;
  height: 100%; /* Důležité, aby se wrapper roztáhl */
}

/* Nová sekce pro horní část headeru (textové popisky) */
.header__top {
  display: flex;
  justify-content: left; /* Zarovnání popisků vlevo */
  flex-grow: 1; /* Aby zabralo veškerý dostupný prostor nahoře */
  align-items: flex-end; /* Popisky budou zarovnány dolů v horní části */
  gap: 54px; /* Mezera mezi popisky */
  padding-bottom: 5px; /* Trocha odsazení od spodního okraje horní části */
  padding-left: 25px;
  color: #202020; /* Barva textu pro popisky */
  font-weight: bold; /* Tučné písmo pro popisky */
  font-size: 20px;
}

.icon-description-wrapper {
    display: flex;
    justify-content: center;
    width: 48px; /* Šířka, aby odpovídala šířce ikon pro zarovnání */
    text-align: center;
}

.icon-description {
    white-space: nowrap;
    font-size: 0.85em; /* Velikost písma pro popisky */
    line-height: 1.2; /* Mezera mezi řádky */
}

.header__bottom {
  background: linear-gradient(to bottom,
    rgba(133, 44, 132, 1) 0%,
    rgba(36, 43, 75, 1) 100%);
  border-radius: 30px;
  height: 50%; /* Poloviční výška celého headeru */
  display: flex;
  align-items: center; /* Vertikální centrování ikon */
  padding: 0 15px; /* Odsazení ikon od okrajů */
}

#img {
    filter: invert(99%) sepia(99%) saturate(2%) hue-rotate(186deg) brightness(105%) contrast(101%);
}

.logo-wrapper {
  display: flex;
  justify-content: left; /* Horizontální zarovnání */
  align-items: center;     /* Vertikální zarovnání, pokud chceš střed i vertikálně */
  height: 60px;           /* Výška celé obrazovky */
  margin-top: 20px;
}

.logo-kontakty {
  display: flex;
  justify-content: right; /* Horizontální zarovnání */
  align-items: center;     /* Vertikální zarovnání, pokud chceš střed i vertikálně */
  height: 60px;           /* Výška celé obrazovky */
  margin-top: 20px;
}

.logo
{
    width: 100%;
    height: 64px;
    margin-bottom: 20px;
    margin-left: 5%;
}

.logo img 
{
  height: 64px;
  margin: 0px;
  margin-top: 10px;
}

.header__icons 
{
  display: flex;
  gap: 30px;
  justify-content: left;
  width: 100%; /* Aby se ikony roztáhly a gap fungoval správně */
}

.header__icons a img 
{
  height: 48px;
  transition: transform 0.2s; 
  margin-top: 3px;
}

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

.card 
{
	border: none;
        border-radius: 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.card-header 
{
        background-color: #007bff; /* Světle modrá */
        color: white;
        border-radius: 8px 8px 0 0;
        font-size: 1.25rem;
}

.card-body 
{
        background-color: white;
        padding: 1.5rem;
}

.list-group-item 
{
        background-color: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        padding: 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 2px solid #852c84;
}
        
.list-group-item strong 
{
        color: #007bff;
}

.table thead 
{
       border: 2px solid #852c84;
       background-color: #fafafa !important; /* Světle modrá */
}

.table tbody tr 
{
       cursor: pointer; /* Změna kurzoru na ruku při najetí */
       border: 2px solid #852c84;
}

.overlay 
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	text-align: center;
	z-index: 9999;
}

.overlay:target 
{
	visibility: visible;
	opacity: 1;
	text-align: center;
}

.social-icons {
    display: flex;
    gap: 20px; /* Mezera mezi ikonami */
    height: 100%;
}

.social-icons a {
    color: #242b4b; /* Barva ikon */
    font-size: 24px; /* Velikost ikon */
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #852c84; /* Barva při najetí myší */
}

.top-bar {
    display: flex;
    justify-content: space-between; /* Zarovná logo doleva a sociální ikony doprava */
    align-items: center; /* Vertikální centrování */
    padding: 0px 10px; /* Odsazení od okrajů */
    margin-bottom: 0px; /* Mezera pod top-barem a headerem */
    /* background-color: #f8f9fa; */ /* Volitelné: Světlé pozadí pro horní lištu */
}

.wrapper-karty {
    display: flex; /* Umožní elementům v kontejneru se řadit vedle sebe */
    flex-wrap: wrap; /* Pokud se nevejde na jeden řádek, přejde na další */
    gap: 20px; /* Mezera mezi kartami a obrázkem */
    align-items: flex-start; /* Zarovná položky na začátek (nahoru) */
    justify-content: center; /* Vycentruje obsah horizontálně, pokud je místa více */
    padding: 20px; /* Vnitřní odsazení wrapperu */
}

.homepage-karta {
    flex: 2; /* Umožní kartám roztáhnout se a zabrat dostupný prostor */
    min-width: 250px; /* Minimální šířka karty, aby se nezmenšovala příliš */
    max-width: 250px;
    min-height: 400px;
    max-height: 400px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #e9e9e9;
}

.homepage-karta h3 {
    color: #852c84;
    margin-bottom: 5px;
}

.homepage-karta h4 {
    color: #242b4b;
    margin-top: 10px;
}

/* Styl pro obrázek, aby se vešel vedle karet */
.wrapper-karty img {
    max-width: 100%; /* Zajišťuje, že obrázek nepřeteče rodičovský kontejner */
    height: auto; /* Zachová poměr stran obrázku */
    flex: 1; /* Dává obrázku více prostoru ve flex kontejneru (2x více než karta) */
    /* Můžete si pohrát s hodnotou flex, např. flex: 1 pro rovnoměrnější rozložení */
}

.contacts-container {
    display: flex; /* Rozdělí obsah na dvě hlavní části vedle sebe */
    gap: 20px; /* Mezera mezi sekcí map a pozadím */
    padding: 20px; /* Vnitřní odsazení kontejneru */
    min-height: 500px; /* Minimální výška, aby bylo vidět pozadí, upravte dle potřeby */
}

.maps-section {
    flex: 2; /* Tato sekce zabere dostupný prostor, ale s menší prioritou */
    display: flex;
    flex-direction: column; /* Mapy se budou řadit pod sebou */
    gap: 0px; /* Mezera mezi jednotlivými mapovými položkami */
    padding-right: 20px; /* Odsazení od obrázku na pozadí */
}

.map-item {
    display: flex; /* Mapa a popis se budou řadit vedle sebe */
    align-items: center; /* Vertikální centrování mapy a popisu */
    gap: 15px; /* Mezera mezi obrázkem mapy a popiskem */
}

.map-item img {
    max-width: 70%; /* Upravte šířku mapového obrázku podle potřeby */
    height: auto;
    border: 0px solid #ddd; /* Volitelný rámeček kolem mapy */
    border-radius: 8px;
}

.map-description {
    flex-grow: 1; /* Popisky zaberou zbytek prostoru vedle mapy */
    color: #333;
}

.map-description h5 {
    margin: 0; /* Odstraní výchozí marginy pro kompaktnější zobrazení */
    line-height: 1.4; /* Mezera mezi řádky textu */
    font-size: 15px;
}

.background-image-section {
    flex: 1; /* Tato sekce zabere více zbývajícího prostoru (např. 2x více než maps-section) */
    background-size: cover; /* Pokryje celou plochu divu */
    background-position: center; /* Vycentruje obrázek */
    background-repeat: no-repeat; /* Zabrání opakování obrázku */
    border-radius: 15px; /* Volitelné: zaoblené rohy pro obrázek pozadí */
    display: flex; /* Pokud chcete obsahovat text/jiný obsah přes pozadí */
    justify-content: center;
    align-items: center;
    color: white; /* Barva textu, pokud byste ho tam vložili */
    font-size: 2em;
    max-width: 100%;
    min-width: 5%;
    max-height: 12em;
    margin-top: 350px;
}

.background-image-section-tv {
    flex: 1; /* Tato sekce zabere více zbývajícího prostoru (např. 2x více než maps-section) */
    background-size: cover; /* Pokryje celou plochu divu */
    background-position: center; /* Vycentruje obrázek */
    background-repeat: no-repeat; /* Zabrání opakování obrázku */
    border-radius: 15px; /* Volitelné: zaoblené rohy pro obrázek pozadí */
    display: flex; /* Pokud chcete obsahovat text/jiný obsah přes pozadí */
    justify-content: center;
    align-items: center;
    color: white; /* Barva textu, pokud byste ho tam vložili */
    font-size: 2em;
    max-width: 100%;
    min-width: 5%;
    margin-top: 0px;
}

/* Styly pro horizontální menu */
.horizontal-menu {
    background-color: #ffffff; /* Tmavé pozadí menu */
    overflow: hidden; /* Důležité pro vycentrování a float */
    padding: 10px 0; /* Vertikální padding pro menu */
    -moz-transform: scale(0.6);
 		zoom: 0.6;
}

.horizontal-menu ul {
    list-style-type: none; /* Odstraní odrážky u seznamu */
    margin: 0;
    padding: 0;
    text-align: center; /* Vycentruje položky menu */
}

.horizontal-menu li {
    display: inline-block; /* Zobrazí položky vedle sebe */
    margin: 0 30px; /* Mezery mezi položkami */
}

.horizontal-menu li a {
    display: block; /* Umožní nastavení paddingu a rozměrů pro celou plochu odkazu */
    color: #852c84; /* Barva textu odkazů */
    text-align: center;
    padding: 14px 16px; /* Padding uvnitř každé položky menu */
    text-decoration: none; /* Odstraní podtržení odkazů */
    transition: background-color 0.5s ease; /* Plynulý přechod při najetí myší */
    border-radius: 30px;
}

.horizontal-menu li a.active,
.horizontal-menu li a:hover {
    border-radius: 30px; /* Zaoblené rohy při najetí myší */
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 10px;
    transition: 0.5s all;
}

.sluzby-texty
{
    font-size: 30px; 
    margin-left:15px;
    color: #852c84;
}

#footer
 {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
 }

#komplet {
  min-height: 100%;
  position: relative;
}

@media screen and (orientation: portrait), screen and (max-width: 767px) 
{
    .sluzby-texty
    {
        font-size: 30px; 
        margin-left:15px;
        color: #852c84;
    }
}