* {

    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;

    }

}



@font-face {

    font-family: 'MyCustomFont';

    src: url('font/EngraversGothicBT.ttf') format('truetype');

  }



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

body {

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

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

    overflow-x: hidden;

}







header {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0px 0px;

    position: relative;

    z-index: 2;

    height: 100px;



}

.logo-text {

    margin: 0;

    font-size: 20px;

    position: fixed;

    left: 50%;

    transform: translateX(-50%);

    letter-spacing: 5px;

    line-height: 27px;

    font-weight: 900;

    color: #891812;

    font-family: 'MyCustomFont', sans-serif;

}

@media (max-width: 400px) {

    .logo-text {

        font-size: 15px;

    }

}







.hamburger-menu {

    width: 50px;

    height: 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    align-items: center;

    cursor: pointer;

    position: fixed;

    right: 40px;

    background-color: #891812;

    padding: 12px;

    padding-top: 14px;

    padding-bottom: 14px;

    border-radius: 50px;

    box-shadow: 0px 0px 10px black;

}

.hamburger-menu:hover {

    transform: scale(1.02);

}

.hamburger-menu .line {

    width: 80%;

    height: 2px;

    background-color: #ffffff;

    transition: transform 0.3s ease, opacity 0.3s ease;

}

.nav-menu {

    position: fixed;

    top: 100px;

    right: -200px; /* Skryté mimo obrazovku */

    width: 200px;

    height: calc(100% - 60px);

    background-color: #891812;

    color: #fff;

    transition: right 0.3s ease;

    z-index: 9999;

}

.nav-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.nav-menu li {

    padding: 15px;

    border-bottom: 1px solid #000000;

    font-weight: 500;

}

.nav-menu a {

    color: #fff;

    text-decoration: none;

    display: block;

}

.nav-menu a:hover {

    color: #000000;

    font-weight: 700;

}

.nav-menu.open {

    right: 0; /* Posune menu do viditelné oblasti */

}

.hamburger-menu.open .stredline {

    opacity: 0; /* Skryje prostřední čáru */

    transition: opacity 0.1s ease; /* Rychlejší zmizení prostřední čáry */

}

.hamburger-menu.open .horniline {

    transform: rotate(45deg) translate(5px, 5px); /* Otočí a posune horní čáru */

    transition: transform 0.3s ease 0.1s;

}

.hamburger-menu.open .dolniline {

    transform: rotate(-45deg) translate(5px, -5px); /* Otočí a posune dolní čáru */

    transition: transform 0.3s ease 0.1s;

}







.social-icons {

    position: fixed;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 20px;

    z-index: 41;

}

.social-icons .social-icon img {

    width: 25px;

    height: 25px;

}

.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;

    }

}



























.videodiv{

    text-align: center;

    margin-top: -100px;

}

.video{

    height: 100vh;

    width: 100%;

    object-fit: cover;

    opacity: 0.6;

}







.backgrounddiv{

    position: absolute;

    top: 30.53vh;

    left: 0;

    height: 20vh;

    z-index: 10; /* Můžete upravit, pokud chcete, aby byl obrázek v pozadí */

    user-select: none;

    width: 100vh;

    padding-left: 8%;

}

.background-logo{

        width: 60.5%;

}

.slogan{

    font-size: 2.04vh;

    letter-spacing: 0.4vh;

    color: #891812;

}





.background-logo, .slogan {

    position: relative;

    transition: transform 0.1s ease-out;

    will-change: transform;

}



















.container {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    color: black;

    cursor: pointer;

    position: absolute;



    padding: 20px;

    width: 100%;

    top: 83.53vh;

    left: 0;

}



/* Text nad šipkou */

.container p {

    margin: 0;

    padding-bottom: 5px; /* Mezera mezi textem a šipkou */

    font-size: 12px;

    color: #891812;

    font-weight: 900;

    letter-spacing: 3px;

}





/* Styl šipky */

.arrow {

    width: 0;

    height: 0;

    border-left: 30px solid transparent;

    border-right: 30px solid transparent;

    border-top: 20px solid #891812; /* Barva šipky */

}



.gradient-div {

    position: absolute;

    width: 100%; /* Nastavte požadovanou šířku */

    height: 100px; /* Nastavte požadovanou výšku */

    background: linear-gradient(to top, #5f100c, rgba(255, 0, 0, 0));

    margin-top: -100px;

}

@media (max-width: 1000px) {

    .backgrounddiv{

        width: 100%;

        padding-left: 0%;

        text-align: center;

    }

    .slogan{

        font-size: 0.8em;

        letter-spacing: 0.4vh;

        color: #891812;

    }

}





































.background2 {

    width: 100%;

    height: 1050px;

    background: #5f100c;

    display: flex; /* Flexbox layout */

    justify-content: center; /* Horizontální vycentrování */

    padding-top: 100px;

    margin-top: -5px;

}

.box {

    width: 450px; /* Každý div bude mít 20% šířky */

    height: auto; /* Nastavíš si výšku podle potřeby */

    margin: 50px; /* Prostor mezi divy */

    padding-top: 50px;

    border-radius: 50px;

    cursor: pointer;

    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;

}

.box.active {

    background-color: #4a0c09;

    transform: scale(1.04);

}

.boxspacer{

    display: flex; /* Nastavíš flexbox */

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

}

.boxSircle{

    background: linear-gradient(to bottom, #fdf8e9 0%, #e9ddb7 90%);

    border-radius: 100px;

    width: 190px;

    height: 190px;

    text-align: center;

    display: flex; /* Nastavíš flexbox */

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

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

}

.innerCircle {

    width: 170px;

    height: 170px;

    background-color: #5f100c;

    border: 7px solid #5f100c; /* Barva obrysu dutého kruhu */

    background-color: transparent; /* Průhledné pozadí pro dutý efekt */

    position: absolute; /* Absolutní pozicování uvnitř rodiče */

    border-radius: 500px;

}

.boximg{

    max-width: 100px;

    margin-top: -5px;

}

.boxh1{

    text-align: center;

    font-size: 35px;

    margin-top: 90px;

    font-weight: 900;

    color: #ffffff;

}

.boxtext{

    color: #ffffff;

    text-align: center;

    margin-top: 50px;

    font-size: 18px;

    padding: 40px;

}

@media (max-width: 1500px) {

    .background2 {

        padding-top: 0px;

        height: 950px;

    }

    .box {

        transform: scale(0.8);

        margin: 0px; /* Prostor mezi divy */

    }

    .box.active {

        transform: scale(0.84);

    }

}

@media (max-width: 1100px) {

    .boxh1{

        font-size: 22px;

        margin-top: 40px;

        font-weight: 900;

    }

    .boxtext{

        margin-top: 10px;

        font-size: 18px;

        padding: 20px;

    }

    .box {

        width: 450px; /* Každý div bude mít 20% šířky */

        height: 700px; /* Nastavíš si výšku podle potřeby */

    }

    .background2 {

        width: 100%;

        height: 750px;

    }

}

@media (max-width: 900px) {

    .box {

        height: 750px; /* Nastavíš si výšku podle potřeby */

    }

}

@media (max-width: 750px) {

    .background2 {

        height: auto; /* Výška podle obsahu */

        display: block; /* Zajištění blokového prvku */

        text-align: center; /* Centrovaní obsahu uvnitř */

        padding: 20px; /* Vnitřní odsazení kontejneru */

    }

    .box {

        display: block; /* Každý box bude blokový prvek */

        margin: 0px auto; /* Vzdálenost mezi boxy a centrování */

        max-width: 400px; /* Maximální šířka boxu, aby nevypadaly příliš široce */

        height: auto;

    }

}



@media (max-width: 450px) {

    .background2 {



    }

    .box {

        max-width: 300px; /* Maximální šířka boxu, aby nevypadaly příliš široce */

    }

}











.background3{

    width: 100%;

    height: 1100px;

    background: linear-gradient(to bottom, #fdf8e9 0%, #e9ddb7 90%);

    display: flex; /* Flexbox layout */

}

.background3-half-left{

    width: 45%;

}

.video-menusveta{

    width: 700px;

    height: 500px;

    margin-top: 350px;

    margin-left: 150px;

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

    animation: zmenaTvaru1 5s infinite alternate ease-in-out; /* Rovnoměrná animace */

    object-fit: cover;

    cursor: pointer;

    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;

}

.video-menusveta:hover{

    transform: scale(1.05);

}



.background3-half-right{

    padding-top: 150px;

    width: 55%;

    padding-left: 150px;

    padding-right: 150px;

}

.background3-img{

    text-align: center;

    height: 0px;

}

.background3-menusvetalogo{

    width: 200px;

    margin-top: 100px;

}



.main-text-about {

    font-size: 25px;

    font-weight: 100;

    letter-spacing: 5px;

    padding-bottom: 20px;

    margin-top: 150px;

}

.main-text-slogan2 {

    font-size: 45px;

    font-weight: 800;

    line-height: 50px;

    padding-bottom: 20px;

}

.main-text-text {

    font-size: 20px;

    margin-top: 15px;

}

.textup {

    font-size: 25px;

}

.dozvededsevice {

    margin-top: 30px;

    height: 50px;

    width: 200px;

    background-color: #00000000;

    border: 2px solid #ffffff;

    color: #000000;

    font-weight: 600;

    font-size: 20px;

    cursor: pointer;

    transition: transform 0.3s, background-color 0.3s; /* Ensure smooth hover transitions */

}

.dozvededsevice:hover {

    transform: scale(1.1);

    background-color: #ffffff1e;

}

.leftbutton {

    margin-left: 10px;

}

.leftbutton:hover {

    border: 2px solid #e6b810;

}

.rightbutton {

    background-color: #ffffff;

    color: #000000;

}

.rightbutton:hover {

    background-color: #cecece;

    color: #000000;

}

@media (max-width: 1700px) {

    .video-menusveta{

        width: 550px;

        height: 400px;

        margin-top: 400px;



    }

    .main-text-slogan2 {

        font-size: 35px;

        font-weight: 800;

        line-height: 50px;

        padding-bottom: 20px;

    }

    .main-text-text {

        font-size: 18px;

        margin-top: 15px;

    }

    .textup {

        font-size: 18px;

    }

}

@media (max-width: 1450px) {

    .background3{

        height: 950px;

    }

    .video-menusveta{

        margin-top: 350px;

        margin-left: 60px;

    }

    .background3-half-right{

        padding-top: 150px;

        padding-right: 50px;

    }

    .main-text-about {

        margin-top: 80px;

    }

}

@media (max-width: 1250px) {

    .background3{

        height: 850px;

    }

    .video-menusveta{

        margin-top: 300px;

        width: 400px;

        height: 300px;

        margin-left: 70px;

    }

    .background3-half-right{

        padding-top: 150px;

        width: 55%;

        padding-left: 50px;

    }

    .main-text-slogan2 {

        font-size: 25px;

        font-weight: 800;

        line-height: 30px;

        padding-bottom: 20px;

    }

    .main-text-text {

        font-size: 15px;

        margin-top: 10px;

    }

    .background3-menusvetalogo{

        width: 150px;

        margin-top: 50px;

    }

}

@media (max-width: 1000px) {

    .background3 {

        display: flex; /* Použití Flexboxu pro zarovnání divů */

        flex-direction: column; /* Výchozí pořadí - jeden pod druhým */

        text-align: center;

        height: 1050px;

    }

    .background3-half-right {

        padding-top: 50px;

        width: 100%;

        padding-left: 150px;

        padding-right: 150px;

    }

    .background3-half-left {

        width: 100%;

        margin-top: -250px;

        height: 10px;

    }

    @media (max-width: 1000px) {

        .background3-half-right {

            order: 1; /* Pravá část nahoře */

        }



        .background3-half-left {

            order: 2; /* Levá část dole */

        }

    }

    .video-menusveta{

        margin-left: 0px;

    }

}

@media (max-width:750px) {

    .background3{

        height: 1050px;

    }

    .background3-half-right{

        padding-left: 50px;

        padding-right: 50px;

    }

    .video-menusveta{

        width: 350px;

        height: 250px;



    }



}

@media (max-width:550px) {

    .background3 {

        height: 1150px;

    }

    .dozvededsevice {

        margin-top: 30px;

        height: 45px;

        width: 150px;

        font-weight: 600;

        font-size: 15px;

    }

    

}



@media (max-width:420px) {

    .leftbutton {

        margin-left: 0px;

    }

    

}



@media (max-width:385px) {

    .background3 {

        height: 1250px;

    }

    .video-menusveta{

        width: 300px;

        height: 250px;



    }

}





















.blog-section {

    text-align: center;

    padding: 200px 0;

    display: none;

    background-color: #5f100c;

  }

  

  .blog-section h2 {

    font-size: 2em;

    margin-bottom: 20px;

    color: #333;

  }

  

  .blog-section h2 span {

    color: #28a745; /* Green color */

  }

  

  .blog-cards {

    display: flex;

    justify-content: center;

    gap: 100px;

    max-width: 1200px;

    margin: 0 auto;

    flex-wrap: wrap;

  }

  

  .blog-card {

    background: linear-gradient(to bottom, #fdf8e9 0%, #e9ddb7 90%);



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

    overflow: hidden;

    max-width: 300px;

    transition: transform 0.3s;

    cursor: pointer;

    box-shadow: 0px 0px 30px rgb(0, 0, 0);



  }

  

  .blog-card:hover {

    transform: translateY(-10px);

  }

  

  .blog-card img {

    width: 100%;

    height: auto;

  }

  

  .blog-content {

    padding: 20px;

  }

  

  .blog-date {

    font-size: 0.9em;

    color: #28a745;

    margin-bottom: 10px;

  }

  

  .blog-content h3 {

    font-size: 1.2em;

    color: #333;

    margin-bottom: 10px;

  }

  

  .blog-content p {

    color: #666;

    font-size: 0.9em;

    margin-bottom: 15px;

  }

  

  .read-more {

    color: #a73528;

    text-decoration: none;

    font-weight: bold;

  }

  

  .read-more:hover {

    text-decoration: underline;

  }















































.image-container {

    display: flex;

    flex-wrap: wrap;

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

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



    background-color: #000000;



}

.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-container{



    border-style: none;

    border: 3px solid #891812;

    background-color: #89181200;

    color: #891812;

    font-size: 20px;

    font-weight: 600;

    padding-top: 18px;

    padding-bottom: 18px;

    padding-left: 45px;

    padding-right: 45px;

    letter-spacing: 2px;

    cursor: pointer;

}

.custom-buttonimage-container:hover {

    background-color: #891812;

    color: #e1cfb7;

}





.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: 75px;

    width: 100%;

    height: 800px;

    display: flex;

    justify-content: center;

    align-items: center;

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

    background-size: 100%;

}





.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;

}

.formular-h4{

    margin-top: 15px;

    margin-bottom: 50px;

    font-size: 25px;

    color: #ffffff;

    font-weight: 600;

}



.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: 150px;

    

}



textarea {

    height: 150px;

    max-width: 350px;

    z-index: 10;

    min-height: 150px;

    min-width: 350px;

    

}



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: #000000;

    border-top: 3px solid #ffffff; /* white border */ 



}

.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: 00px;

    width:200px ;

}

.footer-section h3 {

    font-size: 18px;

    margin-bottom: 10px;

    color: #ffffff;

    text-transform: uppercase;

}

.footer-section p {

    font-size: 16px;

    color: #aaaaaa;

}

#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%;

}

.end{

    color: #ffffff30;

    text-align: center;

    background-color: #000000;

    width: 100%;

    padding-top: 10px;

    height: 50px;

    position: absolute;

}

.WebStavitel{

    background-color: #000000;

    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;

    }

}