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 */
    transition: opacity 0.8s ease-in-out;
}

.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.1s 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.1s;
}

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