@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

body, html {
    margin: 0;
    padding: 0;
    height: 150%;
    background-color: #2E2A2A;}

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

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Zajišťuje, aby se fotografie přizpůsobila velikosti kontejneru */
}

.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 {
    width: 100%;
    height: calc(100% - 40px); /* Výška karuselu (odečítáme výšku čáry) */
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    bottom: 0;
    position: fixed;
    margin-bottom: 10px;

}

.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: 40px;
    line-height: 59px;
    font-size: 45px; /* Větší font pro střední text */
    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*/
}


.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: 150% !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;
}

* {
    margin: 0;
    box-sizing: border-box;
}



#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Zajišťuje, že další obsah bude relativní k rodiči (body) */
    z-index: 1;


}

.contact-box {
    width: clamp(100px, 90%, 1000px);
    margin: 80px 50px;
    display: flex;
    flex-wrap: wrap;
}

.contact-links, .contact-form-wrapper {
    width: 50%;

    padding: 10% 5% 10% 5%;
}


.contact-links {
    background-color:#F7D7D9 ;

    border-radius: 10px 0 0 10px;
}

.contact-form-wrapper {
    background-color: #4A4545;
    border-radius: 0 10px 10px 0;
}

@media only screen and (max-width: 800px) {
    .contact-links, .contact-form-wrapper {
        width: 100%;
    }

    .contact-links {
        border-radius: 10px 10px 0 0;
    }

    .contact-form-wrapper {
        border-radius: 0 0 10px 10px;
    }
}

@media only screen and (max-width: 400px) {
    .contact-box {
        width: 95%;
        margin: 8% 5%;
    }
}

h2 {
    font-family: 'Lora', sans-serif;
    color: #2E2A2A;
    font-size:40px;
    letter-spacing: 2px;
   margin-top:70px;
    text-align: center;

}
hr{
    margin-top: 10px;
}

.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.link {
    margin: 10px;
    cursor: pointer;
}

img {
    width: 45px;
    height: 45px;

    transition: 0.2s;
    user-select: none;
    color:#F7D7D9;
 /* Rotace barevného tónu na 180 stupňů, což odpovídá červené barvě */
}


.link:hover {
    transform: scale(1.1, 1.1);
}

.link:active {
    transform: scale(1.1, 1.1);
    filter:
            hue-rotate(220deg)
            drop-shadow(2px 4px 4px #222)
            sepia(0.3);
}

.form-item {
    position: relative;
}

label, input, textarea {
    font-family: 'Lora', sans-serif;
}

label {
    position: absolute;
    top: 10px;
    left: 2%;
    color: #4A4545;
    font-size: clamp(14px, 1.5vw, 18px);
    pointer-events: none;
    user-select: none;
}

input, textarea {
    width: 100%;
    outline: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 12px;
    font-size: clamp(15px, 1.5vw, 18px);
}

input:focus+label,
input:valid+label,
textarea:focus+label,
textarea:valid+label {
    font-size: clamp(13px, 1.3vw, 16px);
    color: #4A4545;
    top: -20px;
    transition: all .225s ease;
}

.submit-btn {
    background-color: white;
    filter: drop-shadow(2px 2px 3px #0003);
    color: #3B3737D1;
    font-family: "Lora",sans-serif;
    font-size: clamp(16px, 1.6vw, 18px);
    display: block;
    padding: 12px 20px;
    margin: 2px auto;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}

.submit-btn:hover {
    transform: scale(1.1, 1.1);
}

.submit-btn:active {
    transform: scale(1.1, 1.1);
    filter: sepia(0.5);
}

@media only screen and (max-width: 800px) {
    h2 {
        font-size: clamp(40px, 10vw, 60px);
    }
}

@media only screen and (max-width: 400px) {
    h2 {
        font-size: clamp(30px, 12vw, 60px);
    }

    .links {
        padding-top: 30px;
    }

    img {
        width: 38px;
        height: 38px;
    }
}