body {
            margin: 0;
            padding: 0;
			font-family: 'Montserrat', sans-serif;
        }

        /* Menu */
.nav-link {
    color: black; /* Černý text */
    font-size: 1.6rem;
    font-weight: 200;
    text-transform: uppercase;
    position: relative;
    margin-right: 1.5rem;
    text-decoration: none;
	transition: color 0.3s ease;
}

.nav-link:hover {
    color: black;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: black;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.logo-img {
			height: 120px; /* Výška loga */
			width: auto; /* Automatická šířka zachovávající proporce */
			margin-right: 1.5rem;
		}

		@media (max-width: 768px) {
			.logo-img {
				height: 100px; /* Menší výška loga na mobilních zařízeních */
			}
		}
		
.navbar-brand {
    margin-right: 300px; /* Zvýšení mezery mezi logem a menu */
}

@media (max-width: 768px) {
			.navbar-brand {
				margin-right: 0px; /* Menší výška loga na mobilních zařízeních */
			}
		}

		
.hero-image-container {
    width: 100%; /* Šířka přes celou obrazovku */
    margin: 0; /* Žádné mezery */
    padding: 0; /* Žádné odsazení */
    overflow: hidden; /* Skryje obsah, který by přesahoval */
}

.hero-image {
    width: 100%; /* Obrázek přes celou šířku */
    height: auto; /* Zachování proporcí obrázku */
    display: block; /* Odstranění bílých mezer okolo obrázku */
}

/* Kontejner pro heslo */
.headline-container {
    text-align: center; /* Zarovnání na střed */
    margin: 80px 0; /* Odstup nahoře a dole */
    padding: 0 20px; /* Vnitřní odsazení pro menší obrazovky */
}

/* Hlavní text hesla */
.headline-text {
    font-size: 2.5rem; /* Velké písmo pro heslo */
    font-weight: 300; /* Tenké písmo */
    color: #333; /* Tmavě šedá barva */
    line-height: 1.5; /* Větší řádkování pro lepší čitelnost */
    text-transform: uppercase; /* Velká písmena */
    margin: 20px 0; /* Odsazení nad a pod textem */
}

/* Oddělovací prvek (čára) */
.headline-divider {
    width: 60px; /* Šířka čáry */
    height: 3px; /* Výška čáry */
    background-color: #333; /* Tmavě šedá barva */
    margin: 0 auto; /* Umístění čáry na střed */
    border-radius: 2px; /* Zaoblené okraje */
}

/* Sekce "O nás" */
.about-section {
    background-color: #5E5D55; /* Barva pozadí */
    color: white; /* Bílý text */
    width: 100%; /* Přes celou šířku obrazovky */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0; /* Horní a dolní odsazení */
}

/* Obsah sekce */
.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px; /* Omezíme šířku obsahu */
}

/* Textová část */
.about-text-container {
    flex: 1;
    padding-left: 80px; /* Větší odsazení textu od levého kraje */
    padding-right: 50px; /* Odsazení textu od fotky */
    text-align: left;
    max-width: 60%; /* Zajištění správné šířky textu */
}

/* Nadpis */
.about-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Text */
.about-text {
    font-size: 1.2rem;
    line-height: 1.6;
}

/* Obrázek na desktopu */
.about-image-container {
    flex-shrink: 0;
    width: auto;
    height: 100%;
}

/* Obrázek na desktopu bude zarovnaný úplně na pravý kraj */
.about-image {
    display: block;
    height: 100%;
    max-height: 350px;
    width: auto;
    object-fit: cover;
    position: absolute;
    right: 100px; /* Odsazení obrázku od pravého okraje */
    top: 50%;
    transform: translateY(-50%);
}

/* 📱 Responsivita pro mobilní zařízení */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Na mobilu seřadit pod sebe */
        text-align: center;
        position: static;
    }

    .about-text-container {
        max-width: 90%;
        padding: 20px;
    }

    /* Obrázek na mobilu bude přes celou šířku displeje */
    .about-image-container {
        width: 100%;
        text-align: center;

    }

    .about-image {
        width: 100%;  /* Obrázek přes celou šířku displeje */
        height: auto;
        position: static;
        transform: none;
        max-height: none; /* Odstranění omezení výšky */
    }
}




/* Obsah stránky */
.row-section {
    border: none; /* Zrušení horní čáry */
    border-bottom: 1px solid black; /* Čára pouze dole */
	margin: 0; /* Odstranění mezer na okrajích sekcí */
    padding: 0; /* Odstranění vnitřního odsazení sekcí */
    width: 100%; /* Zajištění, že sekce pokryje celou šířku */
	margin-bottom: 0px; /* Odsazení mezi řádky */
}

.row-section:last-child {
    border-bottom: 1px solid black; /* Jedna čára dole pouze u poslední sekce */
}

.row-section:first-of-type {
    border-top: 1px solid black; /* Čára nahoře u prvního řádku */
    padding-top: 0px; /* Volitelné odsazení od horní čáry */
}


.row-section .row {
    margin: 0;
    padding: 0;
}

.row-section img {
    width: 100%;
    height: auto; /* Zachování proporcí */
}

.text {
    display: flex; /* Flexbox pro vertikální zarovnání */
    flex-direction: column; /* Prvky jsou pod sebou */
    align-items: flex-start; /* Zarovnání vlevo */
    justify-content: center; /* Vertikální zarovnání na střed */
    padding-right: 280px; /* Odsazení od pravého okraje */
    padding-left: 70px; /* Odsazení od levého okraje */
    margin: 0; /* Zrušení marginu */
	font-size: 1.1rem; /* Velikost nadpisu */
}

@media (max-width: 768px) {
    .text {
        padding: 10px 15px; /* Menší odsazení na mobilních zařízeních */
    }
}

.section-title {
    font-size: 2rem; /* Velikost nadpisu */
    font-weight: bold; /* Tučné písmo */
    margin-bottom: 10px; /* Menší odsazení od textu */
    margin-top: 0; /* Zrušení horní mezery */
    color: #333; /* Tmavě šedá barva */
    text-transform: uppercase; /* Velká písmena */
    align-self: flex-start; /* Zarovnání nadpisu vlevo */
}



.image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 0px;
}

.image-container img {
    width: 100%;
    height: auto; /* Zachování proporcí obrázku */
	display: block; /* Zajištění, že obrázek nebude mít mezery kolem sebe */
}

.image-title {
    position: absolute;
    color: white;
    font-size: 2rem; /* Velké písmo */
	font-weight: 300;
    text-transform: uppercase; /* Velká písmena */
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Poloprůhledné pozadí za textem */
    padding: 10px 20px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .row .col-lg-6 {
        flex-basis: 100%; /* Sloupce zabírají 100% šířky */
        max-width: 100%; /* Zajištění správné velikosti */
		padding: 0; /* Odstranění odsazení sloupců na mobilních zařízeních */
    }
	
	/* Obrázek bude vždy na prvním místě */
    .row .image-container {
        order: -1; /* Priorita obrázku */
    }

    /* Text bude vždy následovat */
    .row .text {
        order: 0;
    }

    .image-container {
        margin-bottom: 20px; /* Oddělení obrázku od textu */
		margin: 0; /* Zajištění, že obrázky nemají žádné mezery ani na mobilních zařízeních */
    }
}


/* Patička */
.footer {
    position: relative; /* Aby pseudo-elementy zůstaly uvnitř patičky */
    background-color: #111; /* Černé pozadí */
	font-size: 1.3rem; /* Zvýšená velikost textu */
    font-weight: 300; /* Tenké písmo */
    color: white; /* Bílý text */
    padding: 40px 20px;
    text-align: center;
    overflow: hidden; /* Zajistí, že grafika nevyčnívá */
    background-image: url("images/footer-bg.svg");
    background-size: cover; /* Zajistí, že SVG vyplní celou šířku */
    background-position: center 20%; /* Posun obrázku níže */
    background-repeat: no-repeat; /* Nebude se opakovat */
}

/* Pseudo-element s čárami */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Jemné ztmavení pro lepší čitelnost */
    z-index: 0;
}

/* Responsivita - upravení čar na menších obrazovkách */
@media (max-width: 768px) {
    .footer::before {
       
    }
}

.footer * {
    position: relative;
    z-index: 1; /* Zajištění, že text zůstane nad pozadím */
}

/* Specifický styl pro nadpisy (Adresa, Sociální sítě, Fakturační údaje) */
.footer-column p b {
	font-size: 1.6rem; /* Zvýšená velikost textu */
    font-weight: 500; /* O něco výraznější, ale ne příliš tučné */
}

.footer-column {
    margin-bottom: 20px; /* Odsazení mezi sloupci na mobilních zařízeních */
}

.facebook-logo {
    width: 40px; /* Velikost Facebook loga */
    height: 40px;
    margin-top: 10px;
}

.representatives {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px; /* Zmenšení mezery mezi zástupci */
    flex-wrap: wrap; /* Umožní zalomení na menších obrazovkách */
    text-align: center;
}

@media (max-width: 768px) {
    .representatives {
        flex-direction: column; /* Na mobilu se obrázky seřadí pod sebe */
        gap: 20px; /* Menší mezera mezi obrázky */
    }
	
	.rep-category {
        font-size: 1.7rem; /* Na mobilu lehce menší velikost */
    }
	
	.representative {
    text-align: center;
    margin: 0 10px; /* Mezera mezi zástupci */
}


}

/* Styl pro nadpisy kategorií */
.rep-category {
    font-size: 1.6rem !important; /* Zvýšená velikost textu */
    font-weight: bold; /* Tučné písmo */
    text-transform: uppercase; /* Velká písmena */
    margin-bottom: 10px; /* Větší mezera pod nadpisem */

}

/* Styl pro text v bloku zástupce */
.representative p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.representative {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zarovnání bloku na střed */
    text-align: left; /* Zarovnání obsahu vlevo */
    /* max-width: 300px; /* Maximální šířka textu, aby to nevypadalo roztahaně */
}

.rep-img {
    width: 300px; /* Kulatý obrázek zástupce */
    height: 300px;
    border-radius: 50%; /* Kulatý tvar */
    object-fit: cover; /* Zajištění správného poměru obrázku */
    margin-bottom: 10px;
}


.copyright {
    margin-top: 20px;
    font-size: 0.9rem; /* Menší text pro copyright */
    color: #aaa; /* Lehce šedá barva */
}

@media (max-width: 768px) {
    .footer-column {
        text-align: center; /* Na mobilu zarovnáno na střed */
    }

    .rep-img {
        /* width: 100px; /* Menší obrázky na mobilních zařízeních */
        /* height: 100px; */
    }
}


.facebook-link {
    font-size: 1.5rem; /* Velikost ikony */
    color: white; /* Bílá barva ikony */
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
}

.facebook-link:hover {
    color: #4267B2; /* Modrá barva při najetí myší (Facebook barva) */
}

iframe {
    border: none; /* Odstranění okraje mapy */
    margin-bottom: 20px; /* Odsazení mapy od ostatních prvků */
    display: block;
}

.social-link {
    font-size: 1.2rem; /* Velikost textu odkazu */
    color: white; /* Barva odkazu */
    text-decoration: none; /* Bez podtržení */
    margin-bottom: 10px; /* Mezera mezi odkazy */
    display: inline-block;
}

.social-link i {
    margin-right: 5px; /* Mezera mezi ikonou a textem */
}

.social-link:hover {
    color: #4267B2; /* Modrá pro Facebook */
}

.social-link:nth-child(2):hover {
    color: #E1306C; /* Růžová pro Instagram */
}


/* Galerie sekce */
.gallery-section {
    /* margin-bottom: 40px; /* Odsazení mezi sekcemi */
    /* border-bottom: 1px solid black; /* Oddělovací čára */
    /* padding-bottom: 20px; */
}

.category-title {
    font-size: 2rem;
	font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.category-description {
    font-size: 1rem;
    margin-bottom: 20px;
}

.gallery-thumbnails {
    display: grid; /* Použití grid layoutu */
    grid-template-columns: repeat(3, 1fr); /* Vždy 3 sloupce na řádek */
    gap: 5px; /* Mezera mezi náhledy */
    width: 100%; /* Roztažení galerie na celou šířku */
}

.thumbnail {
    width: 100%; /* Náhled zabere celý prostor sloupce */

    object-fit: cover; /* Zachování proporcí obrázků */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.01); /* Zvětšení při hoveru */
    opacity: 0.8; /* Ztmavení při hoveru */
}

.thumbnail:hover::after {
    opacity: 1; /* Překryv se zobrazí při hoveru */
}

@media (max-width: 768px) {
    .gallery-thumbnails {
        display: flex;
        flex-direction: column; /* Obrázky pod sebou */
        gap: 5px; /* Bez mezer mezi obrázky */
    }

    .thumbnail img {
        width: 100%; /* Obrázky pokryjí celou šířku */
        height: auto; /* Automatická výška pro zachování proporcí */
    }
}





.gallery-container {
    width: 100%; /* Šířka galerie přes celou obrazovku */
    margin: 0; /* Zrušení centrování a mezer */
    padding: 0; /* Zrušení vnitřních odsazení */
}


/* Kontejner pro banner kategorie */
.category-banner {
    position: relative;
    width: 100%; /* Obrázek přes celou šířku obrazovky */
    height: 500px; /* Fixní výška banneru */
    overflow: hidden; /* Skryje přebytečné části obrázku */
    margin-bottom: 5px; /* Mezera pod bannerem */
	margin-top: 5px;
}

@media (max-width: 768px) {
    .category-banner {
        position: relative;
		width: 100%; /* Obrázek přes celou šířku obrazovky */
		height: 100%; /* Fixní výška banneru */
		overflow: hidden; /* Skryje přebytečné části obrázku */
		margin-bottom: 5px; /* Mezera pod bannerem */
    }
}

/* Obrázek v banneru */
.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Obrázek se přizpůsobí rámečku a zachová proporce */
}

/* Nadpis v banneru */
.category-title {
    position: absolute;
    top: 50%; /* Vertikálně zarovnaný uprostřed */
    left: 50%; /* Horizontálně zarovnaný uprostřed */
    transform: translate(-50%, -50%); /* Korekce zarovnání */
    font-size: 2.5rem; /* Velikost textu */
    font-weight: bold; /* Tučné písmo */
    color: white; /* Bílá barva textu */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Jemný stín textu */
    text-transform: uppercase; /* Velká písmena */
    z-index: 1; /* Nadpis bude nad obrázkem */
    text-align: center;
}


/* Patička – správné zarovnání pro PC */
.footer-row {
    display: flex;
    justify-content: space-between; /* Formulář vlevo, texty a ikony vpravo */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    text-align: left;
    padding: 20px;
}

/* Levý sloupec: Formulář */
.form-column {
    flex: 1;
    max-width: 500px;
    margin-left: 50px; /* Posunutí formuláře od levého kraje */
}

/* Pravý sloupec: Texty a sociální ikony */
.text-column {
    flex: 1;
    max-width: 500px;
	text-align: center;
}

/* Styl pro nadpisy v patičce */
.footer-title {
    /* font-size: 1.8rem;
    font-weight: bold; */
    margin-bottom: 10px;
    text-align: center; /* Na PC zarovnání vlevo */
}

/* Zvýšení velikosti textu */
.footer-text {
    font-size: 1.3rem;
    font-weight: 300;
    text-align: center; /* Zarovnání textu vlevo na PC */
}

/* Formulář */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Pole formuláře */
.contact-form .form-group input,
.contact-form .form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 100%; /* Na PC 100% šířka formuláře */
}

/* Zajištění, že label nebude pod checkboxem */
.form-group input[type="checkbox"] {
    width: auto; /* Zajištění správného zobrazení */
    margin: 0; /* Odstranění výchozího odsazení */
}

/* Tlačítko formuláře */
.form-button {
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    background-color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.form-button:hover {
    background-color: #333;
}

/* Sociální ikony */
.social-icons-container {
    display: flex;
    justify-content: center; /* Na PC zarovnané doleva */
    gap: 20px;
    margin-top: 10px;
}

.footer-title.contact-title {
        text-align: center;
        width: 100%;
		font-size: 3rem;
}

/* Responsivita – Mobilní zobrazení */
@media (max-width: 768px) {
    /* Patička: všechny prvky budou pod sebou */
    .footer-row {
        display: flex;
        flex-direction: column; /* Vše pod sebe */
        align-items: center; /* Vycentrování na mobilu */
        text-align: center;
        gap: 30px; /* Větší mezera mezi jednotlivými sekcemi */
        width: 100%;
    }

    /* Každý sloupec zabírá celou šířku */
    .form-column,
    .text-column {
        width: 100%;
        max-width: 100%;
        margin: 0 auto; /* Zarovnání na střed */
    }

    /* Formulář */
    .contact-form {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0%; /* Odsazení od krajů displeje */
    }

    .contact-form .form-group {
        width: 100%;
    }

    /* Pole formuláře */
    .contact-form .form-group input,
    .contact-form .form-group textarea {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Zabrání překročení šířky */
    }

    /* Tlačítko */
    .form-button {
        width: 100%;
        max-width: 100%;
        padding: 15px;
        font-size: 1.2rem;
        font-weight: bold;
        color: white;
        background-color: #000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
        text-align: center;
    }

    .form-button:hover {
        background-color: #333;
    }
}






/* Styl pro sociální ikony (Facebook, Instagram) */
.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px; /* Velikost čtverce */
    height:120px;
    border: 2px solid #000; /* Černý obrys */
    color: #000; /* Černá barva ikon */
    font-size: 4.8rem; /* Velikost ikon */
    border-radius: 8px; /* Lehce zaoblené rohy */
    transition: all 0.3s ease;
    text-decoration: none;
}
.social-icon:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Efekt při najetí */
}


/* Text v ostatních sloupcích */
.footer-column {
    padding: 10px;
}

/* Responsivita pro mobilní zobrazení */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column; /* Sloupce budou pod sebou */
        align-items: center; /* Zarovnání všech sloupců na střed */
    }
	
	.footer-column {
        display: flex;
        justify-content: center; /* Vycentrování obsahu ve sloupcích */
    }

    .social-icon {
        width: 80px; /* Menší velikost na mobilu */
        height: 80px;
        font-size: 3rem;
    }
}