	@media (pointer: coarse) {
    .map-container {
        transform: scale(1);
    }
}
.desktop-mode-on-mobile .map-container {
    transform: scale(1); /* Například zrušíte zmenšení */
}
	
        body {
            font-family: 'Rubik', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            background-image: url("background.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
		
		html, body {
    overflow-x: hidden;
}

		a:link {
		  text-decoration: none;
		}
		a:hover {
		  text-decoration: none;
		  color: #cca952;
		}
		a:visited {
		  text-decoration: none;
		}





		/* Styl pro mobilní zařízení (šířka menší než 768px) */
		@media (max-width: 768px) {

			.map-container {
				margin-top: 50px; /* Zrušení extra mezery, protože panel již nepřekáží */
			}

		}



        /* Mapa */
/* Výchozí styl pro mapu */
.map-container {
    position: relative;
    width: 100%; /* Na mobilu 100 % */
    max-width: 1200px;
    margin-top: 50px;
    text-align: center;
    transform: scale(1); /* Výchozí měřítko */
    transition: transform 0.3s ease; /* Plynulý přechod při změně velikosti */
}

/* Pro větší obrazovky (nad 768px) */
@media (min-width: 768px) {
    .map-container {
        transform: scale(0.8); /* Zmenšíme mapu na 80 % */
    }
}

/* Obrázek mapy */
.map-image {
    width: 100%; /* Obrázek se přizpůsobí šířce kontejneru */
    height: auto; /* Zachování poměru stran */
	display: block;
}


/* Klikací oblasti a hover zůstanou ve správných pozicích relativně k obrázku */

        /* Klikací oblasti */
        .map-container a {
            position: absolute;
            text-decoration: none;
            z-index: 5; /* Nad základní mapou */
        }

        /* Oblasti bublin v procentech */
        .area1 { top: 0%; left: 39%; width: 37.5%; height: 15%; }
        .area2 { top: 21%; left: 55.4%; width: 37.5%; height: 15%; }
        .area3 { top: 41.8%; left: 59%; width: 40.8%; height: 15%; }
        .area4 { top: 63.8%; left: 56%; width: 37.5%; height: 15%; }
        .area5 { top: 84.5%; left: 40%; width: 37.5%; height: 15%; }

        /* Hover vrstvy */
        .hover-area {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("mapa_hover.svg");
            background-size: cover;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 3; /* Pod klikacími oblastmi */
        }

        .hover-area1 {
            clip-path: polygon(39% 0%, 77% 0%, 77% 15.3%, 39% 15.3%);
        }
        .hover-area2 {
            clip-path: polygon(55% 21%, 93.1% 21%, 93.1% 36.2%, 55% 36.2%);
        }
        .hover-area3 {
            clip-path: polygon(59% 42%, 100% 42%, 100% 57%, 59% 57%);
        }
        .hover-area4 {
            clip-path: polygon(56% 64%, 93.8% 64%, 93.8% 79.3%, 56% 79.3%);
        }
        .hover-area5 {
            clip-path: polygon(40% 84.8%, 78% 84.8%, 78% 100%, 40% 100%);
        }

        .area1:hover ~ .hover-area1 { opacity: 1; }
        .area2:hover ~ .hover-area2 { opacity: 1; }
        .area3:hover ~ .hover-area3 { opacity: 1; }
        .area4:hover ~ .hover-area4 { opacity: 1; }
        .area5:hover ~ .hover-area5 { opacity: 1; }




/* Umístění loga uprostřed mapy */
.logo-container {
    position: absolute;
    top: 82%; /* Vertikální umístění */
    left: 44.5%; /* Horizontální umístění */
    transform: translate(-50%, -50%); /* Posunutí loga přesně na střed */
    z-index: 3; /* Nad mapou */
}

.pulse-logo {
    width: 180%; /* Výchozí velikost loga */
    height: 180%; /* Stejná šířka a výška pro kruhové logo */
    animation: heartbeat 2s infinite; /* Použití animace */
}

/* Responzivní pravidla */
@media (max-width: 768px) {
    .logo-container {
        top: 81%; /* Umístění níže pro mobilní zařízení */
		left: 53.7%; /* Zůstává uprostřed */
		transform: translate(-50%, -50%);
		}

    .pulse-logo {
		width: 94%; /* Na menších zařízeních bude logo větší relativně k mapě */
	}
}




/* Pro tabletová zařízení (šířka 768px až 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Mapa */
    .map-container {
        transform: scale(0.9); /* Zmenšení mapy na 90 % */
        margin-top: 100px; /* Přizpůsobení horního okraje */
    }

    /* Pulzující logo */
    .logo-container {
        top: 84%; /* Posun mírně dolů */
        left: 50%; /* Uprostřed */
        transform: translate(-50%, -50%);
    }

    .pulse-logo {
        width: 125%; /* Mírně menší logo než na desktopu */
    }

    /* Klikací oblasti */
    .area1 { top: 0%; left: 38.8%; width: 37.5%; height: 15%; }
    .area2 { top: 20.5%; left: 55.5%; width: 37.5%; height: 15%; }
    .area3 { top: 41.3%; left: 59.3%; width: 40%; height: 15%; }
    .area4 { top: 63.4%; left: 56.3%; width: 37.5%; height: 15%; }
    .area5 { top: 84.5%; left: 40%; width: 37.5%; height: 15%; }

}


@media (min-width: 1024px) and (max-width: 1024px) and (min-height: 764px) and (max-height: 768px) {
    .logo-container {
        top: 81%; /* Posun mírně dolů */
        left: 47%; /* Uprostřed */
        transform: translate(-50%, -50%);
    }

    .pulse-logo {
        width: 148%; /* Mírně menší logo než na desktopu */
    }

}


/* Animace tlukotu srdce */
@keyframes heartbeat {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Normální velikost */
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1); /* Mírné zvětšení */
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* Návrat na původní velikost */
    }
}



		h1, h2, h3 {
			color: #cca952;
			margin-bottom: 20px;
			font-size: 28px;
		}

.highlight {
    color: #cca952;
}

.text-container {
    z-index: 3;
    color: #373f44;
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 50px;
    max-width: 900px;
}

/* Zarovnání nadpisu vlevo */
.text-container h2 {
    text-align: left;
    margin-bottom: 15px;
}




.contact-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Zajistí zalomení na menších obrazovkách */
    gap: 20px; /* Mezera mezi sloupci */
}

.contact-column {
    flex: 1; /* Sloupce budou mít stejnou šířku */
    min-width: 250px; /* Zamezí příliš úzkým sloupcům */
    text-align: left;
}

.contact-column:nth-child(2) { 
    display: flex;
    flex-direction: column;
    margin-left: 60px;
}

.contact-row {
    display: flex;
    align-items: center; /* Vertikální zarovnání */

}

.contact-row i {
    flex-shrink: 0; /* Zabrání zmenšování ikon */
    width: 30px; /* Šířka ikon pro zarovnání textu */
    text-align: center; /* Horizontální zarovnání ikon */
    font-size: 24px; /* Velikost ikon */
    color: #cca952; /* Barva ikon */
    margin-right: 10px; /* Mezera mezi ikonou a textem */
}

.contact-row a {
    text-decoration: none;
    color: #373f44; /* Barva textu */

}

.contact-row span {

}



/* Footer */
.footer {
    bottom: 10px; /* Umístí text 10px od spodního okraje stránky */
    width: 100%;
    text-align: center;
    font-size: 12px; /* Menší písmo */
    color: #888; /* Šedá barva */
    font-family: 'Rubik', sans-serif; /* Používá stejný font jako zbytek stránky */
}


/* Pro mobilní zařízení */
@media (max-width: 768px) {
	h1, h2, h3 {
		font-size: 22px;
	}

    .text-container {
        margin-left: 0%; /* Jiná hodnota odsazení vlevo pro mobilní zařízení */
        width: 95%; /* Na mobilních zařízeních text zabere celou šířku */
		font-size: 14px;
    }

	.contact-column:nth-child(2) {
        margin-left: 0;
    }


    .footer {
        position: fixed; /* Umístí copyright fixně na spodní okraj */
        bottom: 0; /* Ujistíme se, že copyright je u spodního okraje */
        font-size: 10px; /* Zmenšíme písmo pro mobilní zařízení */
    }
}
