body, html {
    margin: 0;
    padding: 0;
    height: 100%;

}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #2E2A2A; /* Barva pozadí */
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 200vh; /* Nastaví šířku obrázku na 100% šířky okna prohlížeče */
    height: 100vh; /* Nastaví výšku obrázku na 100% výšky okna prohlížeče */
    object-fit: cover; /* Zajišťuje, že obrázek vyplní celý prostor, zachovává poměr stran a ořízne přebytečnou část */
}

.content {
    /*  position: relative;*/
    z-index: 1; /* Zajišťuje, aby obsah překrýval fotografii */
    /* Přidejte další styly pro obsah podle vašich potřeb */
}


.carousel-content {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: normal;
    font-size: 40px;
    line-height: 59px;
    color: #4A4545;
    cursor: grab;
    position: relative;
}


.my-arts {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: normal;
    font-size: 45px;
    line-height: 59px;
    color: #F7D7D9; /* Růžová barva pro střední text */
}

/*.line {
    width: 100%; /* Šířka čáry (100% šířky karuselu)

    border: 2px solid #4A4545;
    opacity: 1;
    position: absolute;
    bottom: 0px; /* Posunutí nadolů
    left: 0; /* Zarovnání na začátek karuselu
}*/

.my-arts::after {
    content: "";
    position: absolute;
    left: -20px; /* Posunutí doleva o velikost okraje*/
    bottom: -1px; /* Posunutí o 1px pod text*/
    width: calc(100% + 40px); /* Šířka čáry (zahrnuje i okraje)*/
    height: 2px; /* Větší tloušťka čáry pro střední text*/
    background-color: #F7D7D9; /* Barva růžové čáry*/
}

.rectangle {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 10px;
    opacity: 1;
    text-align: center; /* Zarovnání textu na střed */
    font: normal normal bold 30px/5px Lora;
    letter-spacing: 12px;
    color: #2E2A2A;
}



.image-container img {
    width: 50%; /* Každý obrázek zabere 50 % šířky obrazovky */
    height: auto; /* Udržuje poměr stran obrázků */
    margin: 10px; /* Mezera mezi obrázky */
}

@media screen and (max-width: 800px) {
    /* Pokud je šířka obrazovky menší než 800px */
    .image-container img {
        width: 100%; /* Obrázky budou zabírat celou šířku */
    }
}

.rectangle {
    width: 50vw; /* Šířka 50% šířky prohlížeče */
    height: 60vh; /* Výška 30% výšky prohlížeče */
    max-width: 575px; /* Maximální šířka, aby se udržel obsah v rozumných mezích */
    max-height: 367px; /* Maximální výška, aby se udržel obsah v rozumných mezích */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;

    margin: 1vw;
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.3s ease; /* Plynulý přechod */


}
.rectangle:hover {
    transform: scale(1.05); /* Zvětší obdélník o 5% při najetí myší */
}




.white {
    background-color: #FFFFFF !important;
}

.pink {
    background-color: #F7D7D9 !important;
}

.rectangle a {
    text-decoration: none;
}
.text img {
    width: 50vw; /* Šířka 50% šířky prohlížeče */
    height: 60vh; /* Výška 30% výšky prohlížeče */
    max-width: 575px; /* Maximální šířka, aby se udržel obsah v rozumných mezích */
    max-height: 367px;
}body {
     background-color: #E7CBCD;
 }

.container {
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    height: 100vh; /* Set the container height to the full viewport height */
}


.button-container {
    display: flex;
    flex-direction: column; /* Arrange buttons in a column */
    align-items: center; /* Center buttons horizontally */
}


h1 {

    text-align: center;
    font: normal normal normal 200%/200% Lora;
    letter-spacing: 3.6px;
    color: #4A4545;
    opacity: 1;
}


.button-container a {
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 5%;
    padding: 12%;
    position: relative; /* Make button a relative positioned container */
}

.button-container a .icon {
    width: 40px; /* Zmenšení šířky ikony o 20% */
    height: 40px; /* Zmenšení výšky ikony o 20% */

    padding: 10px;
    transform: translate(-50%, -150%); /* Vystředit ikonu */
}

.button-container a .icon.star {
    background-image: url('../images/star.svg'); /* Nastavení pozadí na star.svg */
    padding-right: 5px; /* Přidání mezery mezi ikonami */
}

.button-container a .icon.star02 {
    background-image: url('../images/star02.svg'); /* Nastavení pozadí na star02.svg */
    opacity: 0; /* Skrytí ikony star02.svg */
    transform: translate(-250%, -150%); /* Vystředit ikonu */
}

.button-container a:hover .icon.star {
    opacity: 0; /* Skrytí ikony star.svg při hoveru */
}

.button-container a:hover .icon.star02 {
    opacity: 1; /* Zobrazení ikony star02.svg při hoveru */
}

.button-container a .hover-text {
    position: absolute;
    top: 0%;
    left: 50%; /* Vystředit text po ose x */
    transform: translate(-50%, -50%); /* Vystředit text po ose x a y */
    opacity: 0; /* Initially hide the text */
    transition: opacity 0.2s ease-in-out; /* Add transition for smooth opacity change */
    font: italic normal normal 24px/24px Lora; /* Zmenšení fontu o 20% */
    letter-spacing: 2.16px; /* Zmenšení mezery mezi písmeny o 20% */
    color: #4A4545; /* Text color */
    white-space: nowrap; /* Zabraňte přerušení textu na více řádcích */
}

.button-container a:hover .hover-text {
    opacity: 1; /* Show the text on hover */
}

.button-container a .icon.star {
    background-image: url('../images/star.svg'); /* Nastavení pozadí na star.svg */
    position: absolute;
    top: 60px; /* Umístění ikony star.svg nahoře */
}

.button-container a .icon.star02 {
    background-image: url('../images/star02.svg'); /* Nastavení pozadí na star02.svg */
    opacity: 0; /* Skrytí ikony star02.svg */
    position: absolute;
    top: 60px; /* Posunutí ikony star02.svg o 60px dolů */
}

.container {
    overflow-x: hidden;
}

.navSwiperContainer {
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 !important;
}

.navSwiper {
    max-width: 1500px;
}

.navSwiper .swiper-slide-active {
    color: #F7D7D9;
}

.navSwiper .swiper-slide-active::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 2px;
    background-color: #F7D7D9;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s;
}

.navSwiper .swiper-slide:hover {
    cursor: pointer;
}

.navSwiper .swiper-slide {
    text-align: center;
    position: relative;
}

.swiper-wrapper {
    align-items: center !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide.data {
    min-height: 40vh;
    display: grid !important;
    place-items: center;
}


.swiper-items {
    height: 80vh;
}