/* Resetování výchozích stylů prohlížeče */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}



@media screen and (min-width: 1000px) {

    ::-webkit-scrollbar {

        width: 15px;

    }

    ::-webkit-scrollbar-track {

        background: #4d4c4c;

    }

    ::-webkit-scrollbar-thumb {

        background: #979797;

        border-radius: 7px;

    }

    ::-webkit-scrollbar-thumb:hover {

        background: #676767;

    }

}





/* Základní styly pro tělo stránky */

body {

    font-family: "Open Sans", sans-serif;

    background-color: #1c2426;

}



/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/

/* Home - index*/



















header {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background: linear-gradient(to bottom, rgba(184, 66, 66, 0.261), rgba(189, 189, 189, 0));

    position: fixed;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 1000;

    font-family: "Roboto Slab", serif;

    pointer-events: none;

}



nav {

    display: flex;

    gap: 80px;

    pointer-events: all;

}

.navactive{

    color: #f5c59e !important;

}



.navright {

    margin-left: 50px;

}



nav a {

    text-decoration: none;

    color: #ffffff;

    font-weight: bold;

    padding: 20px;

    text-shadow: 2px 2px 15px rgba(0, 0, 0, 1);

}



nav a:hover {

    color: #f5c59e;

}



.logo {

    margin: 0 150px;

    margin-left: 155px;

        pointer-events: all;

    

}

.logo:hover {

    transform: scale(1.05);

}



.logo img {

    height: 110px;

}



.content {

    padding-top: 100px;

}



.hamburger-menu {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 60px;

    height: 60px;

    cursor: pointer;

    z-index: 2000; /* Higher than the mobile menu */

    position: absolute; /* Changed from relative to absolute */

    top: 50px; /* Adjust as needed */

    right: 40px; /* Adjust as needed */

    padding: 15px;

    pointer-events: all;

}



.hamburger-menu span {

    height: 4px;

    width: 100%;

    background-color: #ffffff;

    border-radius: 2px;

    transition: all 0.3s ease;

}



.mobile-menu {

    display: none;

    flex-direction: column;

    align-items: center;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: #571920e9;

    padding-top: 100px;

    z-index: 800; /* Lower than the hamburger menu */

}



.mobile-menu a {

    text-align: center;

    color: #ffffff;

    text-decoration: none;

    font-weight: 500;

    width: 100%;

    font-size: 24px;

    padding: 20px 0;

    border-bottom: 2px solid #0000005d;



}

.mobile-menu-top{

    margin-top: -50px;

}

@media (max-width: 1200px) {

    .hamburger-menu {

        display: flex;

    }



    nav {

        display: none;

    }



    .logo {

        margin: 0;

    }



    .navright {

        margin-left: 0;

    }

}



.hamburger-menu.active span:nth-child(1) {

    transform: rotate(45deg) translate(9px, 9px);

}



.hamburger-menu.active span:nth-child(2) {

    opacity: 0;

}



.hamburger-menu.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

}



.mobile-menu.active {

    display: flex;

    padding-top: 50px; /* Ensure there's space for the hamburger menu */

}



.mobile-menu.active {

    display: flex;

    padding-top: 150px; /* Ensure there's space for the hamburger menu */

}





























.language-switcher {

    position: fixed;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.5);

    padding: 1px;

    border-radius: 0 5px 5px 0;

    z-index: 1000;

}



.language-switcher #language-button {

    background: transparent;

    border: none;



    padding-left: 8px;

    padding-right: 10px;

    padding-top: 5px;

    cursor: pointer;

}



.language-switcher #language-button img {

    width: 40px; /* Adjust size as needed */

    height: auto;

}



.language-switcher #language-button:hover img {

    opacity: 0.8;

}



.language-switcher .dropdown-content {

    display: none;

    flex-direction: column;

    position: absolute;

    margin-top: 0px;

    margin-left: -1px;

    background: rgba(0, 0, 0, 0.8);



}



.language-switcher .dropdown-content button {

    background: transparent;

    border: none;

    padding-left: 8px;

    padding-right: 10px;

    padding-top: 10px;

    margin: 0px 0;

    cursor: pointer;

}



.language-switcher .dropdown-content button img {

    width: 40px; /* Adjust size as needed */

    height: auto;

}



.language-switcher .dropdown-content button:hover img {

    opacity: 0.8;

}









@media (max-width: 1200px) {

    .language-switcher {

        position: fixed;

        top: 80px;

        left: 40px;

        transform: translateY(-50%);

        background: rgba(0, 0, 0, 0.5);

        padding: 1px;

        border-radius: 5px 5px 5px 5px;

        z-index: 1000;

    }

}



@media (max-height: 700px) {

    .language-switcher {

    top: 12%;

}

}

















/* Social Icons Styling */

.social-icons {

    position: fixed;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 13px;

    z-index: 41;

}



.social-icons .social-icon img {

    width: 18px;

    height: 18px;

}

.social-icons .social-icon img:hover {

    transform: scale(1.2); /* Zvětšení ikon o 20% při hoveru */

}

@media (max-width: 1000px) {

    .social-icons {

        display: none;

    }

}





















/* Stylování nákupního košíku */

.shopping-cart {

    position: fixed;

    left: 10px;

    bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 41;

    cursor: pointer;

}



.shopping-cart img {

    width: 80px; /* Velikost ikony */

    height: 80px;

}



.shopping-cart img:hover {

    transform: scale(1.05); /* Zvětšení ikony o 20% při hoveru */

}











/* Menší okno s objednávacím formulářem */

/* Menší okno s objednávacím formulářem */

/* Obecný styl pro formulář */

/* Obecný styl pro formulář */

/* Obecný styl pro formulář */



































.background {

    position: relative;

    overflow: hidden;

    width: 100%;

    height: 120vh;

    margin-top: -70px;

}



.changing-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover; /* zajistí, aby obrázky vyplňovaly celou plochu */

}



.art-small {

    display: none;

}



.scroll-arrow {

    position: absolute;

    top: 60%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    cursor: pointer;

    z-index: 10; /* Zajistí, aby byl scroll arrow nad ostatními prvky */

}



.scroll-arrow img {

    width: 100%;

    margin-top: 150px;

}







.spacer1 {

    width: 100%;

    height: 150px;

    margin-top: -150px;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #1c2426 99%);

    z-index: 1; /* zajistí, aby bylo logo navrchu ostatních obrázků */

    position: relative;

}



.mobile-image {

    display: none; /* výchozí stav je skrytý */

}



.mobile-image-index {

    display: none; /* výchozí stav je skrytý */

    margin-top: 400px;

}



.mobile-imagexss {

    display: none;

}



.art-large {

    margin-top: 150px;

}





.changing-text {

    position: absolute;

    top: -3%;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    z-index: 2;

    pointer-events: none;

    color: white;

    font-family: 'Georgia', 'Times New Roman', serif;

    text-shadow: 0px 0px 10px rgb(0, 0, 0), 0px 0px 20px rgb(0, 0, 0);

}



.pBohemiNadpis {

    font-size: 5rem;

    font-weight: 800;

    letter-spacing: 1px;

    margin: 0;

}



.headline h1 {

    font-size: 2rem;

    font-weight: 700;

    margin: 0.2em 0 0.5em 0;

}



.underline {

    width: 150px;

    height: 4px;

    background-color: #1e2a36; /* tmavě modrá linie pod textem */

    border: none;

    margin: 0 auto 1em auto;

}



.subline {

    font-size: 1.1rem;

    font-weight: bold;

    margin: 0.2em 0;

}



.sub-subline {

    font-size: 0.95rem;

    font-style: italic;

    opacity: 0.9;

}







@media (max-width: 800px) {





    .mobile-image-index {

        display: block; /* výchozí stav je skrytý */

    }



    .spacer1 {

        width: 100%;

        height: 300px;

        margin-top: -300px;

        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #1c2426 40%);

        z-index: 1; /* zajistí, aby bylo logo navrchu ostatních obrázků */

        position: relative;

    }

    .scroll-arrow {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        display: flex;

        flex-direction: column;

        align-items: center;

        cursor: pointer;

        z-index: 10; /* Zajistí, aby byl scroll arrow nad ostatními prvky */

    }



    .art-small {

        display: block;

    }



    .art-large {

        display: none;

    }







    .changing-text {

    position: absolute;

    top: -10%;

    left: 0;

}



.pBohemiNadpis {

    font-size: 3rem;

    font-weight: 800;

    letter-spacing: 1px;

    margin: 0;

}



.headline h1 {

    font-size: 1.5rem;

    font-weight: 700;

    margin: 0.2em 0 0.5em 0;

}



.underline {

    width: 150px;

    height: 4px;

    background-color: #1e2a36; /* tmavě modrá linie pod textem */

    border: none;

    margin: 0 auto 1em auto;

}



.subline {

    font-size: 0.8rem;

    font-weight: bold;

    margin: 0.2em 0;

}



.sub-subline {

    font-size: 0.75rem;

    font-style: italic;

    opacity: 0.9;

}



}



@media (max-width: 450px) {

    .pBohemiNadpis {

        font-size: 2.4rem;

        font-weight: 800;

        letter-spacing: 1px;

        margin: 0;

    }



    .headline h1 {

        font-size: 1.2rem;

        font-weight: 700;

        margin: 0.2em 0 0.5em 0;

    }



    .underline {

        width: 150px;

        height: 4px;

        background-color: #1e2a36; /* tmavě modrá linie pod textem */

        border: none;

        margin: 0 auto 1em auto;

    }



    .subline {

        font-size: 0.75rem;

        font-weight: bold;

        margin: 0.2em 0;

    }



    .sub-subline {

        font-size: 0.70rem;

        font-style: italic;

        opacity: 0.9;

    }

}







@media (max-width: 400px) {

    .background .mobile-image-index {

        display: none;

    }



    .background .mobile-imagexss {

        display: block;

    }

}





















.containerBOHEMIA {

    display: flex;

    width: 100%;

    margin-top: 150px;

    color: #ffffff;

    overflow: hidden; /* Skrytí obsahu, který je mimo viditelnou oblast */

}



.containerBOHEMIA2{

        padding-bottom: 200px;

}



.leftBOHEMIA{

    width: 50%;

    padding-left: 200px;

    padding-right: 00px;

    margin-top: 9%;

}



.leftBOHEMIA {

  position: relative;

  opacity: 0;

  left: -100px; /* start mimo obrazovku vlevo */

  transition: none; /* bez animace na začátku */

}



/* přidáme třídu, která animaci spustí */

.leftBOHEMIA.animate {

  animation: slideInFromLeft 1s forwards;

}



@keyframes slideInFromLeft {

  to {

    left: 0;

    opacity: 1;

  }

}





.h4BOHEMI{

    font-size: 14px;

    letter-spacing: 5px;

    margin-left: 4px;

}

.h3BOHEMI{

    margin-top: 20px;

    font-size: 25px;

    font-family: "Roboto Slab", serif;

}

.h1BOHEMI{

    font-size: 42px;

    margin-top: 15px;

    font-family: "Roboto Slab", serif;

    text-transform: uppercase;

}

.p1BOHEMI{

    font-size: 16px;

    margin-top: 35px;

    color: #d2d2d2;

}

.p1BOHEMI-b{

    color: #ffffff;

}

.p2BOHEMI{

    font-size: 16px;

    margin-top: 35px;

}

.custom-buttonBOHEMIA {

    background-color: transparent;

    border: none;

    color: #f5c59e; /* Adjust this color to match the text color in your image */

    font-size: 25px; /* Adjust the font size as needed */

    font-weight: bold;

    cursor: pointer;

    outline: none;

    display: flex;

    align-items: center;

    transition: font-size 0.3s ease;

    margin-top: 20px;

}



.arrow {

    display: inline-block;

    font-size: 25px;

    transition: font-size 0.3s ease;

    margin-left: 5px; /* Adjust the margin as needed */

}



.custom-buttonBOHEMIA:hover .arrow {

    font-size: 30px; /* Adjust the font size increase as needed */

}



.custom-buttonBOHEMIA:hover {

    font-size: 30px; /* Adjust the font size increase as needed */

    color: #49e241;

}













.rightBOHEMIA{

    width: 40%;

    padding: 20px;

}



.containerBOHEMIAimage {

    max-width: 100%;

    height: auto;

}



.containerBOHEMIAimage2{

    max-width: 100%;

    height: auto;

}

.photo-stack {

    width: 100%;

    height: 100%;

    position: relative;

    object-fit: cover; /* zajistí, aby obrázky vyplňovaly celou plochu */

    margin-top: 210px;

}



.photo-stack img {

    margin-left: 200px;

    width: 80%;

    position: absolute;

    transition: transform 0.3s ease;

}



@media(max-width:1750px){

    .rightBOHEMIA{

        margin-top: 60px;

    }

}



@media(max-width:1550px){

    .rightBOHEMIA{

        margin-top: 120px;

    }

}



@media(max-width:1470px){

    .rightBOHEMIA{

        margin-top: 40px;

    }

    .photo-stack img {

        margin-left: 50px;

    }

    .leftBOHEMIA{

        width: 60%;

        padding-left: 100px;

        padding-right: 100px;

        margin-top: 9%;

    }

}



@media(max-width:1300px){

    .rightBOHEMIA{

        margin-top: 100px;

    }

    .leftBOHEMIA{

        width: 60%;

        padding-left: 100px;

        padding-right: 100px;

        margin-top: 9%;

    }

}

@media(max-width:1100px){

    .rightBOHEMIA{

        margin-top: 100px;

        width: 50%;

        margin-left: 25%;

    }



    .containerBOHEMIA {

        padding-bottom: 0px;

}

    .containerBOHEMIAimage {

        width: 100%; /* Zajistí, že obrázek nepřetéká kontejnerm */

        height: auto;    /* Zachovává proporce obrázku */

    }

    .photo-stack{

        width: 100%;

        margin-left: 0px;

        height: 450px;

        margin: 0;

        margin-top: 100px;

    }

    .photo-stack img {

        width: 100%;

        margin: 0;

    }

    .leftBOHEMIA{

        width: 100%;

        padding-left: 50px;

        padding-right: 200px;

        margin-top: 9%;

    }

    .containerBOHEMIA {

        display: block;

        width: 100%;  

    }

}

@media(max-width:850px){

    .rightBOHEMIA {

        margin-top: 50px;

        width: 80%;

        margin-left: 10%;

        padding-bottom: 100px;

    }

    .containerBOHEMIAimage {

        width: 100%; /* Zajistí, že obrázek nepřetéká kontejnerm */

        height: auto;    /* Zachovává proporce obrázku */

    }

    .leftBOHEMIA{

        width: 100%;

        padding-left: 50px;

        padding-right: 50px;



    }

    .containerBOHEMIA {

        display: block;

        width: 100%;

        margin-top: 150px;

        color: #ffffff;

    }

    .h1BOHEMI{

        font-size: 30px;

    }

}

@media(max-width:800px){

    .containerBOHEMIA {

        margin-top: 0px;

    }

}



@media(max-width:650px){

    .rightBOHEMIA {

        margin-top: 50px;

        width: 80%;

        margin-left: 10%;

        padding-bottom: 100px;

    }

    .image-container {

        margin-top: 10px;

    }

}



































.background1 {

  margin-top: 100px;

  width: 100%;

  height: 700px;

  display: flex;

  justify-content: center;

  align-items: center;

  background: url('images/index/wood.webp') no-repeat center center fixed;

  background-size: 100%;

}







.container {

    display: flex;

    gap: 200px; /* Adjust the gap between buttons as needed */

}



.item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px; /* Optional: Adjust padding as needed */

    

}



.round-button {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 250px; /* Adjust the size as needed */

    height: 250px; /* Adjust the size as needed */

    border-radius: 50%;

    border: 30px solid #571920; /* Adjust border color and width as needed */

    background-color: #1c242690 ; /* Make the background transparent */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s ease;

}



.round-button img {

    width: 60%; /* Adjust the image size as needed */

    height: 60%; /* Adjust the image size as needed */

    object-fit: cover; /* Ensure the image covers the button without distortion */

}



.round-button:hover {

    transform: scale(1.1); /* Slightly enlarge the button on hover */

    background-color: #1c2426c6; /* Make the background transparent */

}



.more-button {

    margin-top: 20px;

    padding: 10px 20px;

    border: none;

    background-color: #0000006a;

    color: #000000;

    font-size: 25px;

    cursor: pointer;

    border-radius: 5px;

    box-shadow: 0 0px 10px rgba(0, 0, 0, 1);

    color: #f5c59e;

    transition: background-color 0.3s ease, color 0.3s ease;

    transition: transform 0.3s ease;

}



.more-button:hover {

    background-color: #000000;

    color: #49e241;

    transform: scale(1.1);

}

.itemp{

    color: #ffffff;

    font-weight: 800;

    font-size: 40px;

    margin-top: 20px;

}

@media(max-width:1650px){

    .container {

        gap: 200px; /* Adjust the gap between buttons as needed */

    }

    .background1 {

        background-size: 120%;

    }

}

@media(max-width:1400px){

    .container {

        gap: 50px; /* Adjust the gap between buttons as needed */

    }

    .background1 {

        background-size: 150%;

    }

}

@media(max-width:1100px){

    .container {

        gap: 50px; /* Adjust the gap between buttons as needed */

    }

    .background1 {

        background-size: 180%;

    }

    .round-button {

        width: 200px; /* Adjust the size as needed */

        height: 200px; /* Adjust the size as needed */

    }

}

@media(max-width:950px){

    .container {

        display: block;

        gap: 200px; /* Adjust the gap between buttons as needed */

    }



    .background1 {

        height: 1300px;

        background-size: 250%;

    }

    .item {

        padding: 50px; /* Optional: Adjust padding as needed */



    }



    .background1 {

        margin-top: 00px;



    }

    }

    @media(max-width:700px){

        .background1 {

            background-size: 360%;

        }

    }

    @media(max-width:450px){

        .itemp{

        color: #ffffff;

        font-size: 30px;

        }

    }

    @media(max-width:400px){

        .itemp{

        color: #ffffff;

        font-size: 25px;

        }

    }





/* iOS – vypne paralaxu jen na iPhonech a iPadech */

@supports (-webkit-touch-callout: none) {

  @media (max-width: 1024px) {

    .background1 {

      background-attachment: scroll !important;

        background-size: 500% !important;

    }

  }

}











.image-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center; /* Zarovná na střed vodorovně */

    align-items: center; /* Zarovná na střed svisle */





}

.foodimage {

    border-radius: 15px;

    width: 24.8%; 

    height: auto;

    margin-top: 2px;

    margin-left: 1px;

    margin-right: 1px;

    transition: transform 0.3s ease-in-out;

    cursor: pointer;

    user-select: none;

}

.foodimage:hover {

    animation: zoomIn 0.3s ease-in-out;

    transform: scale(0.98); /* Increase the scale on hover */

}

.nonclick{

    pointer-events: none;

}

.custom-buttonimage{

    z-index: 2;

    background-color: rgba(0, 0, 0, 0); /* Transparent background */

    border: #000000;

    border: 1px solid #e49d04aa; /* Red border */

    color: #ffffff; /* Text color */

    padding: 15px 45px; /* Adjust padding as needed */

    cursor: pointer;

    font-size: 16px;

    font-weight: 800;

    text-shadow: 0 0 5px black

}

.custom-buttonimage:hover {

    background-color: #1a1a1a4d;

    transform: scale(1.02);

}

.modal {

    display: none;

    position: fixed;

    z-index: 10000;

    padding-top: 50px;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.9);



}

.modal-content {

    margin: auto;

    display: block;

    width: 35%; 

    height: auto;

    margin-top: 170px;

}

.close {

    position: absolute;

    top: 100px;

    right: 80px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}

.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}



@media(max-width:1010px){

    .foodimage {

        width: 24.59%; 

    }

    .modal-content {

        width: 90%; 

        margin-top: -150;

    }

}

@media(max-width:500px){

    .foodimage {

        width: 24.4%; 

    }

}

@media(max-width:650px){

    .image-container {

        margin-top: 10px;

    }

}





















.backgroundhelp {

    margin-top: 200px;

    width: 100%;

    height: 800px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: url('images/index/woods.webp') no-repeat center center fixed;

    background-size: cover;

}



@supports (-webkit-touch-callout: none) {

  @media (max-width: 1024px) {

    .backgroundhelp {

      background-attachment: scroll !important;

    }

  }

}





.formular-div {

    position: relative;

    text-align: center;

    margin-left: -8px;

    overflow: hidden; /* Ensures child elements do not overflow */

}



.formular-div-back {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    z-index: 1;

    pointer-events: none;

    user-select: none;

}

.formular{

    color: #ffffff;

    text-align: center;

    padding-top: 50px;

    padding-bottom: 150px;

}



.formular-h1 {

    margin-top: 115px;

    color: #ffffff;

    font-size: 60px;

    font-weight: 600;

    margin-bottom: -20px;

    font-family: "Roboto Slab", serif;

}

.formular-h4{

    margin-top: 15px;

    margin-bottom: 50px;

    font-size: 25px;

    color: #ffffff;

    font-weight: 600;

    font-family: "Roboto Slab", serif;

}



.formularlabel{

    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    font-weight: 100;

}









.formularInput{

    width: 350px;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid #ccc;

    border-radius: 4px;

    box-sizing: border-box;

    max-height: 500px;

    

}



textarea {

    height: 150px;



    z-index: 10;

}



input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 16px;

}



input[type="submit"]:hover {

    background-color: #45a049;

}





.dsdsdsd{

    width: 100%;

    margin-top: -1000px;

    opacity: 0.2;

    z-index: 1;

    pointer-events: none;

    max-height: 1080px;

    user-select: none;

}



@media(max-width:1650px){

    .backgroundhelp {

        background-size: 120%;

    }

}

@media(max-width:1400px){

    .backgroundhelp {

        background-size: 150%;

    }

}

@media(max-width:1100px){

    .backgroundhelp {

        background-size: 180%;

        margin-top: 50px;

    }

}

@media(max-width:950px){

    .backgroundhelp {

        background-size: 260%;

    }

}

@media(max-width:860px){

    .formular-h1 {

        margin-top: 60px;

        color: #ffffff;

        font-size: 35px;

        font-weight: 100;

        margin-bottom: -20px;

    }

    .formular-h4{

        margin-top: 25px;

        font-size: 18px;

    }

}

@media(max-width:650px){

    .backgroundhelp {

        background-size: 350%;

        height: 700px;

    }

}



















footer {

    background-color: #1c2426;



}

.foter-div{

    display: flex;

    justify-content: space-between;

    padding: 20px;

    text-align: center;

    padding-top: 30px;

    padding-left: 10%;

    padding-right: 10%;

}

.footer-section {

    flex-basis: 267px; 

}

.logo-foter{

    margin-top: -30px;

    width:180px ;

}

.footer-section h3 {

    font-size: 18px;

    margin-bottom: 10px;

    color: #ffffff;

    text-transform: uppercase;

    font-family: "Roboto Slab", serif;

}

.footer-section p {

    font-size: 16px;

    color: #ffffff;

}

#foter-down{

    margin-top: 50px;

}

.media-icons{

    text-align: center;

    margin-top: -30px;

}

.media{

    margin: 6px;

    width: 40px;

    transition: transform 0.3s ease-in-out;

    cursor: pointer;

    user-select: none;

}

.media:hover{

    transform: scale(0.92);

    opacity: 50%;

}



.footer-section a{

    color: #6397ef;

}



.end a{

    color: #6397ef;

}

.end{

    color: #ffffff;

    text-align: center;

    background-color: #1c2426;

    width: 100%;

    padding-top: 10px;

    height: 50px;

    position: absolute;

    font-family: "Roboto Slab", serif;

}

.WebStavitel{

    background-color: #1c2426;

    margin-top: -1px;

    font-size: 12px;

}



@media(max-width:1800px){

    .foter-div{

        padding-left: 2%;

        padding-right: 2%;

    }

}

@media(max-width:1500px){

    .foter-div{

        padding-left: 0%;

        padding-right: 0%;

    }

}





@media(max-width:1400px){

    .foter-div{

        display: block;

        justify-content: space-between;

        padding: 20px;

        text-align: center;

        padding-top: 30px;

        padding-left: 10%;

        padding-right: 10%;

    }

    .footer-section{

        margin-top: 55px;

    }

    .media-icons{

        margin-top: 35px;

    }

}





















.hidden {

    display: none !important;

    

}



















/* Produk */

/* Produk */

/* Produk */

/* Produk */

/* Produk */

/* Produk */

/* Produk */

/* Produk */

/* Produk */







.product-container {

    display: flex;

    align-items: center; /* Vertikální zarovnání na střed */

    justify-content: center; /* Horizontální zarovnání na střed */

    gap: 200px;

    height: auto; /* Aby se obsah centroval na celou výšku obrazovky */



    margin-top: 200px;

    color: #ffffff;

  }

  

  

  .product-image img {

    max-width: 500px;

    height: auto;

  }

  

  .product-details {

    max-width: 600px;

  }

  

  .product-details h2 {

    font-size: 24px;

    margin-bottom: 10px;

    

  }



  

  .product-details .price {

    font-size: 22px;

    font-weight: bold;

    color: #e60000;

  }

  

  .product-details .availability {

    color: green;

    margin-bottom: 10px;

  }

  

  .product-details .features {

    list-style-type: none;

    padding: 0;

  }

  

  .product-details .features li {

    margin-bottom: 5px;

  }

  

.add-to-cart {

  background: linear-gradient(145deg, #7b0000, #e60000);

  color: #fff;

  padding: 16px 52px;

  border: none;

  border-radius: 50px;

  font-size: 18px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  cursor: pointer;

  margin-top: 25px;

  transition: all 0.3s ease;

  box-shadow: 0 8px 24px rgba(230, 0, 0, 0.4);

  position: relative;

  overflow: hidden;

}



.add-to-cart::before {

  content: "";

  position: absolute;

  top: 0;

  left: -75%;

  width: 50%;

  height: 100%;

  background: rgba(255, 255, 255, 0.602);

  transform: skewX(-25deg);

  transition: left 0.5s ease;

}



.add-to-cart:hover::before {

  left: 130%;

}



.add-to-cart:hover {

  background: linear-gradient(145deg, #a00000, #ff1a1a);

  box-shadow: 0 12px 30px rgba(255, 0, 0, 0.6);

  transform: translateY(-2px);

}



.add-to-cart:active {

  transform: translateY(1px);

  box-shadow: 0 6px 15px rgba(255, 0, 0, 0.3);

}







  @media (max-width: 1400px) {

    .product-container {

        display: block;

        text-align: center;

        margin-top: 200px;

        height: auto; /* Aby se obsah centroval na celou výšku obrazovky */

        

    }

    .product-details{

        text-align: center;

        max-width: 100%;

        margin: 10px;

    }

}







@media (max-width: 800px) {

    .product-image img {

        max-width: 400px;

        height: auto;

      }

}



@media (max-width: 410px) {

    .product-image img {

        max-width: 310px;

        height: auto;

      }

}





.why-us {

    margin-top: 100px;

    padding: 60px 30px;

    background-color: #1c2426;

    text-align: center;

}



.benefits {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

}



.benefit {

    background-color: #1c2426;

    border-radius: 16px;

    padding: 20px;

    width: 220px;

    /* Optimalizujeme transition pouze pro transform */

    transition: transform 0.3s ease;

    /* Zajistíme, že animace využívá GPU */

    will-change: transform;

}



.benefit img {

    width: 70px;

    margin-bottom: 15px;

}



.benefit h3 {

    font-size: 20px;

    margin-bottom: 10px;

    color: #ffffff;

}



.benefit p {

    font-size: 14px;

    color: #bbbbbb;

}



/* Keyframe pro zvednutí a návrat - omezíme box-shadow pro plynulost */

@keyframes riseAndFall {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px); /* Zvýšíme zvednutí pro výraznější efekt */

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Lehčí stín */

    }

    100% {

        transform: translateY(0);

    }

}



/* Animace pro viditelné prvky s třídou .animating */

.why-us.visible .benefit.animating {

    animation: riseAndFall 10s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Plynulejší křivka */

}



/* Postupné zpoždění pro každý prvek */

.why-us.visible .benefit:nth-child(1).animating { animation-delay: 0.3s; }

.why-us.visible .benefit:nth-child(2).animating { animation-delay: 0.6s; }

.why-us.visible .benefit:nth-child(3).animating { animation-delay: 0.9s; }

.why-us.visible .benefit:nth-child(4).animating { animation-delay: 1.2s; }

.why-us.visible .benefit:nth-child(5).animating { animation-delay: 1.5s; }

.why-us.visible .benefit:nth-child(6).animating { animation-delay: 1.8s; }



/* Hover efekt pro vizuální styl */

.benefit:hover {

    transform: translateY(-8px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



/* Třída pro zastavení animace */

.benefit.paused {

    animation: none;

    transform: translateY(0);

    box-shadow: none;

}































.productdiv {

    display: flex;

    width: 100%;

    padding-top: 100px;

    padding-bottom: 100px;

    color: #ffffff;

    opacity: 1; /* Počáteční opacity */



}



/* Animace se aplikuje na prvek s třídou .is-visible */

.productdiv.is-visible {

    animation: fadeInScale 1s ease-in-out forwards;

}



@keyframes fadeInScale {

    0% {

        opacity: 0;

        transform: scale(0.9);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}

.productdivHalfLeft,

.productdivHalfRight {

    width: 50%;

    padding: 10px; /* Volitelné: Přidat nějaké odsazení pro lepší prostor */

}







.productdivHalfLeft {

    padding-left: 200px;

}

.productdivHalfRight {

    text-align: center;

}

.custom-buttonBOHEMIA2 {

    background-color: transparent;

    border: none;

    color: #f5c59e; /* Adjust this color to match the text color in your image */

    font-size: 25px; /* Adjust the font size as needed */

    font-weight: bold;

    cursor: pointer;

    outline: none;

    display: flex;

    transition: font-size 0.3s ease;

    margin-top: 20px;

}

.custom-buttonBOHEMIA2:hover .arrow {

    font-size: 30px; /* Adjust the font size increase as needed */

}



.custom-buttonBOHEMIA2:hover {

    font-size: 30px; /* Adjust the font size increase as needed */

    color: #49e241;

}

@media (max-width: 1200px) {

    .productdiv {

        display: block;

        padding-bottom: 10px;

    }

    .productdivHalfLeft,

    .productdivHalfRight {

        text-align: center;

        padding-left: 0px;

        width: 100%; /* Nastaví šířku na 100% pro každý div */

        padding: 20px;

    }

    .productdivHalfRight{

        margin-top: 50px;

    }

    .custom-buttonBOHEMIA2 {

        width: 100%;

        display: block;

    }



}

















.productdiChange {

    display: flex;

    width: 100%;

    flex-wrap: wrap; /* Umožní přetečení divů při zmenšení */

    padding-top: 100px;

    padding-bottom: 100px;

    background-color: #571920;

    box-shadow: 0 0 30px rgba(0,0,0,0.6);

    color: #ffffff;

    opacity: 0; /* Počáteční opacity */

    transform: translateX(-50px); /* Počáteční posun zleva */

}



/* Animace se aplikuje na prvek s třídou .is-visible */

.productdiChange.is-visible {

    animation: slideInFade 1.2s ease-out forwards;

}



@keyframes slideInFade {

    0% {

        opacity: 0;

        transform: translateX(-50px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}





.productdivHalfLeftChange,

.productdivHalfRightChange {

    width: 50%;

    padding: 10px; /* Volitelné: Přidat nějaké odsazení pro lepší prostor */

}



.productdivHalfLeftChange {

    text-align: center;

}



.productdivHalfRightChange {

    padding-right: 200px; /* Pokud chcete odsazení zleva */

}



@media (max-width: 1200px) {

    .productdiChange {

        display: flex; /* Ujistíme se, že používáme flexbox */

        flex-direction: column; /* Změní orientaci na sloupec */

        padding-bottom: 10px;

    }



    .productdivHalfLeftChange,

    .productdivHalfRightChange {

        text-align: center;

        padding-left: 0px;

        width: 100%; /* Nastaví šířku na 100% pro každý div */

        padding: 20px;

    }









    .productdivHalfLeftChange{

        margin-top: 50px;

    }















    .productdivHalfRightChange {

        order: -1; /* Umístí pravý div nad levý div */

    }



    .productdivHalfLeftChange {

        order: 1; /* Nastaví pořadí levého divu jako pozdější */

    }

}







        .product-details {

            opacity: 0;

            transform: translateY(20px);

            animation: fadeIn 1s ease-in-out forwards;

        }



        .product-image {

            opacity: 0;

            transform: translateY(-20px);

            animation: fadeInReverse 1s ease-in-out forwards;

        }



        @keyframes fadeIn {

            0% {

                opacity: 0;

                transform: translateY(20px);

            }

            100% {

                opacity: 1;

                transform: translateY(0);

            }

        }



        @keyframes fadeInReverse {

            0% {

                opacity: 0;

                transform: translateY(-20px);

            }

            100% {

                opacity: 1;

                transform: translateY(0);

            }

        }









.animated-shape-1{

    width: 350px;

    height: 350px;

    margin-top: 80px;

    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    animation: zmenaTvaru3 5s infinite alternate;

    background-color: #4dccbd;

    display: inline-block;

    background-image: 

        radial-gradient(circle, rgba(255, 0, 0, 0) 10%, rgb(0, 0, 0)),

        url('images/product/web-9.webp'); /* Cesta k tvému obrázku */

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}



.animated-shape-2{

    width: 350px;

    height: 350px;

    margin-top: 0px;

    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    animation: zmenaTvaru3 5s infinite alternate;

    background-color: #4dccbd;

    display: inline-block;

    background-image: 

        radial-gradient(circle, rgba(255, 0, 0, 0) 20%, rgb(0, 0, 0)),

        url('fotoalbum/Untitled-12.webp'); /* Cesta k tvému obrázku */

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}





.animated-shape-3{

    width: 350px;

    height: 350px;

    margin-top: -20px;

    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    animation: zmenaTvaru3 5s infinite alternate;

    background-color: #4dccbd;

    display: inline-block;

    background-image: 

        radial-gradient(circle, rgba(255, 0, 0, 0) 20%, rgb(0, 0, 0)),

        url('images/product/Untitled-2.webp'); /* Cesta k tvému obrázku */

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}





.animated-shape-4{

    width: 350px;

    height: 350px;

    margin-top: 50px;

    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    animation: zmenaTvaru3 5s infinite alternate;

    background-color: #4dccbd;

    display: inline-block;

    background-image: 

        radial-gradient(circle, rgba(255, 0, 0, 0) 10%, rgb(0, 0, 0)),

        url('images/product/web-5.webp'); /* Cesta k tvému obrázku */

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}



.animated-shape-5{

    width: 350px;

    height: 350px;

    margin-top: 20px;

    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    animation: zmenaTvaru3 5s infinite alternate;

    background-color: #4dccbd;

    display: inline-block;

    background-image: 

        radial-gradient(circle, rgba(255, 0, 0, 0) 10%, rgb(0, 0, 0)),

        url('images/product/web-4.webp'); /* Cesta k tvému obrázku */

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}



@keyframes zmenaTvaru3 {

    0% {

        border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;

    }

    100% {

        border-radius: 50% 60% 40% 70%/60% 70% 40% 50%;

    }

}

    @media(max-width:390px){

        .animated-shape-1,.animated-shape-2,.animated-shape-3,.animated-shape-4,.animated-shape-5{

        width: 300px;

        height: 300px;

        }

    }











.review-section {

    height: 300px;

    font-family: 'Helvetica Neue', sans-serif;

    display: flex;

    justify-content: center;

    margin-top: 100px;

}



.review-carousel {

  position: relative;

  max-width: 1000px;

  width: 100%;

  border-radius: 50px;

  box-shadow: 0 10px 20px rgba(0,0,0,0.1);

  overflow: hidden;

  padding: 2rem;

  text-align: center;

  

}



.review {

  display: none;

  color: #333;

}



.review.active {

  display: block;

  animation: fadeIn 1s ease-in-out;

}



.avatar {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  object-fit: cover;

  margin: 0 auto 1rem;

  border: 2px solid #ffffff;

}



.review p {

  font-size: 1.2rem;

  margin-bottom: 1rem;

  padding: 20px;

  color: #ffffff;

}



.review .stars {

  color: #f4c430; /* zlatá barva hvězd */

  font-size: 1.3rem;

  margin-bottom: 0.5rem;

}



.review span {

  font-style: italic;

  color: #4ac334;

  display: block;

  margin-top: 0.5rem;

}



button.prev,

button.next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: #ffffffcc;

  border: none;

  padding: 0.5rem 1rem;

  cursor: pointer;

  font-size: 1.5rem;

  border-radius: 50%;

  transition: background 0.3s;

  z-index: 10; /* Přidáno – zajistí překrytí */

}

button.prev:hover,

button.next:hover {

  background: #f5c59e;

}



button.prev {

  left: 10px;

}



button.next {

  right: 5px;

}



@keyframes fadeIn {

  from { opacity: 0; transform: scale(0.95); }

  to { opacity: 1; transform: scale(1); }

}  

  

















.demand-section {

padding-top: 150px;

padding-left: 20px;

padding-right: 20px;

  color: #fff;

  text-align: center;

  font-family: 'Georgia', serif;

}



.demand-container {

  max-width: 920px;

  margin: 0 auto;

      background-color: #571920;

  padding: 50px;

  border-radius: 16px;

  box-shadow: 0 0 30px rgba(0,0,0,0.6);

}



.demand-container h2 {

  font-size: 36px;

  margin-bottom: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.demand-container p {

  font-size: 18px;

  margin-bottom: 35px;

}



.demand-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.form-row {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

}



.form-row input {

  flex: 1;

  min-width: 200px;

}



.demand-form input,

.demand-form textarea {

  width: 100%;

  padding: 14px 16px;

  border: none;

  border-radius: 8px;

  font-size: 16px;

  background: #fff;

  color: #000;

  box-sizing: border-box;

}



.demand-form textarea {

  resize: vertical;

}



.demand-form button {

  background-color: #68a851;

  color: white;

  padding: 14px;

  border: none;

  border-radius: 8px;

  font-size: 17px;

  font-weight: bold;

  cursor: pointer;

  transition: background 0.3s ease;

}



.demand-form button:hover {

  background-color: #398b1b;;

}



  @media(max-width:530px){



    .demand-container h2 {

    font-size: 30px;

    }



    .demand-container {

    padding: 50px;

    padding-left: 20px;

    padding-right: 20px;

    }



  }



    @media(max-width:410px){



    .demand-container h2 {

    font-size: 25px;

    }



    .demand-container {

    padding: 50px;

    padding-left: 20px;

    padding-right: 20px;

    }



  }











/* COOPERATION */

/* COOPERATION */

/* COOPERATION */

/* COOPERATION */

/* COOPERATION */

/* COOPERATION */

/* COOPERATION */

/* COOPERATION */





.spacer2{

    margin-top: 150px;

}





.shapelogo{

    width: 400px;

    height: 400px;

    margin-top: -60px;

    display: inline-block;

    background-size: cover; /* Pozadí se přizpůsobí velikosti divu */

    background-position: center; /* Pozadí bude vycentrováno */

}



@media(max-width:450px){

        .shapelogo{

            width: 350px;

            height: 350px;

        }

  }





@media(max-width:400px){

        .shapelogo{

            width: 300px;

            height: 300px;

        }

  }





































/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */

/* KONTAKT */





.kontakt{

    height: 100%;

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -100PX;

}

.centered {

    margin-top: 200px;

    width: 1300px; /* Nastavte šířku dle potřeby */

    height: 500px;

    text-align: center;

    display: flex; /* Použití flexbox layoutu */

    justify-content: center; /* Zarovnání prvků na střed v ose X */

    align-items: center; /* Zarovnání prvků na střed v ose Y */

    

    

}

.rectangle {

    width: 420px;

    height: 250px;

    display: inline-block;

    margin: 10px; /* Odsazení mezi obdélníky */

    position: relative; /* Nastavení relativní pozice pro potomka */



}

.circle {

    width: 125px;

    height: 125px;

    margin-top: -20px;

    border: 3px solid #101923;

    border-radius: 50%; /* Vytvoření kruhového tvaru */

    position: absolute; /* Nastavení absolutní pozice uvnitř obdélníku */

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* Posunutí kolečka na střed obdélníku */

    -webkit-transition:all 0.2s ease-in-out;

    transition:all 0.2s ease-in-out;

    cursor: pointer;

    user-select: none;

    background-color: #1c2426;;

  }

  .circle:hover {

    background-color: #571920;

  }

  .kontaktIcon{

    width: 70px;



  }

  .circle:hover img.kontaktIcon {

filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(175deg) brightness(106%) contrast(101%);



  }

  .KontaktText{

    margin-top: 230px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 300;

  }

  

  .centeredmapa{

    margin-top: 250px;

    width: 100%; /* Nastavte šířku dle potřeby */

    height: 100%; /* Nastavte výšku dle potřeby */

    display: flex; /* Použití flexbox layoutu */

    justify-content: center; /* Zarovnání prvků na střed v ose X */

    align-items: center; /* Zarovnání prvků na střed v ose Y */

  }

  .kontaktyMap2{

    display: none;

}





  @media(max-width:1300px){



    .centered {

        width: 100%;

        height: auto; /* Adjust height to fit content */

        text-align: center;

        display: flex;

        flex-direction: column; /* Stack rectangles vertically */

        align-items: center;

    }

    

    .rectangle {

        width: 100%;

        margin-top: 70px;

    }

    .kontaktyMap2{

        display: block;

    }

    .kontaktyMap{

        display: none;

    }

    

  }



  .googlemap{

    margin-top: 200px;

    padding-bottom: 200px;

    display: flex;

    justify-content: center;

    align-items: center;

  }



  









/* faq */

/* faq */

/* faq */

/* faq */

/* faq */

/* faq */

/* faq */











  .faq-section {

    padding-top: 200px;

  max-width: 700px;

  margin: 2rem auto;

  font-family: Arial, sans-serif;

  color: #333;

}



.faq-section h1 {

  text-align: center;

  margin-bottom: 1.5rem;

  font-size: 3rem;

  text-transform: uppercase;

  color: #ffffff;

  padding: 50px 0 ;

}



.faq-item {

  border-bottom: 1px solid #ddd;

  margin-bottom: 0.5rem;

}



.faq-question {

  width: 100%;

  padding: 1rem;

  font-size: 1.1rem;

  font-weight: bold;

  background-color: #f4f4f4;

  border: none;

  text-align: left;

  cursor: pointer;

  transition: background-color 0.3s ease;

}



.faq-question:hover {

  background-color: #e0e0e0;

}



.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease;

  background-color: #fafafa;

  padding: 0 1rem;

}



.faq-answer p {

  margin: 0.8rem 0;

}



/* Active state */

.faq-item.active .faq-answer {

  max-height: 200px; /* adjust if answers are longer */

  padding: 1rem;

}