/* ==========================================
   ZÁKLADNÍ VYNULOVÁNÍ A PÍSMA
   ========================================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #121212;
    color: #e0e0e0;
}

h1, h2, h3, h4, .nadpis-h2, .hodnoceni-h3, .sluzby-h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.nav-link, .hamburger-link, .telefon {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.nadpis-h2 {
    font-size: 50px;
    text-align: center;
    padding-top: 30px;
    margin-bottom: 5px;
}

.cara {
    width: 80px;
    height: 3px;
    background-color: #d4a373;
    text-align: center;
    margin: 0 auto;
}

/* ==========================================
   ANIMACE
   ========================================== */
@keyframes objeveni {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   TOPBAR & HEADER (ZÁHLAVÍ)
   ========================================== */
.topbar, header {
    position: relative;
    z-index: 10;
}

.topbar {
    width: 100%;
    border-bottom: 1px solid #d4a373;
    height: 40px;
    display: flex;
    justify-content: space-between;
    animation: objeveni 1.5s ease;
}

.separator {
    width: 8px;
    height: 8px;
    border: 1px solid white;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    width: 100%;
    animation: objeveni 2.5s ease;
}

.scroll {
    background-color: #d4a373;
    border-bottom: 1px solid #121212;
    position: fixed;
    top: 0;
    transition: all 350ms ease;
    z-index: 25;
}

.scroll .nav-link:hover::after {
    background-color: black;
}

nav {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    position: relative;
}

.osobni-logo-figure {
    width: 100%;
    max-width: 220px;
}

.osobni-logo-image {
    width: 100%;
    
}

.filter {
    filter: invert(1);
}

.link-list {
    display: flex;
    align-items: center;
}

.link-list-li {
    margin-left: 30px;
}

.nav-link {
    font-size: 20px;
    color: white;
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    right: 0;
    height: 3px;
    bottom: -3px;
    background-color: #d4a373;
    transition: all 350ms ease;
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
}

.nav-kontakty {
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    color: white;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

.telefon {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.address {
    display: flex;
    align-items: center;
    gap: 8px;
}

.socials {
    display: flex;
    gap: 15px;
}

.lincik {
    font-size: 22px;
    color: white;
    transition: all 350ms ease;
}

/* ==========================================
   DROPDOWN MENU
   ========================================== */
.dropdown {
    position: relative;
}

.sluzby-podsekce {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1c1c1c;
    border: 1px solid #d4a373;
    width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 400ms ease;
    height: auto;
    padding: 15px;
}

.dropdown:hover .sluzby-podsekce {
    opacity: 1;
    visibility: visible;
}

.podsekce-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.podsekce-link {
    color: white;
    position: relative;
    text-transform: uppercase;
    font-size: 14px;
}

.podsekce-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -3px;
    right: 0;
    transition: all 350ms ease;
    background-color: #d4a373;
}

.podsekce-link:hover::after {
    width: 100%;
    left: 0;
}

.podsekce2 {
    width: 200px;
}

/* ==========================================
   HERO WRAPPER & FULLSCREEN SWIPER
   ========================================== */
/* Zde nastav požadovanou výšku celé sekce. Pokud nechceš 100vh, změň hodnotu níže (např. na 600px, 80vh atd.) */
.hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden;
}

.site-header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Přepisy inline stylů z JS pro Swiper */
.hero-swiper,
.hero-swiper[style],
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-wrapper[style],
.hero-swiper .swiper-slide,
.hero-swiper .swiper-slide[style] {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
}

.hero-swiper {
    width: 100%;
    position: relative;
    z-index: 1;
    --swiper-theme-color: #d4a373;
    --swiper-navigation-size: 26px;
}

.hero-swiper .swiper-wrapper {
    display: flex;
    width: 100%;
}

.hero-slide {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    padding: 100px 20px 40px 20px;
    box-sizing: border-box;
    position: relative;
}

.hero-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    z-index: 10;
}

.domu-span {
    font-size: 25px;
    font-style: italic;
    color: #d4a373;
    font-family: 'Playfair Display', serif;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}

.hero-title {
    width:100%;
    max-width: 1000px;
    font-size: 40px;
    font-family: 'Playfair Display', serif;
    margin: 10px 0 20px 0;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    text-align: center;
}

.domu-para {
    line-height: 1.6;
    font-size: 20px;
    color: #f0f0f0;
    text-align: center;
    max-width: 700px;
}

.buttons {
    margin-top: 35px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.domu-button {
    padding: 15px 35px;
    border-radius: 18px;
    border: 1px solid #d4a373;
    font-size: 20px;
    background-color: #d4a373;
    color: #121212;
    font-weight: bold;
    cursor: pointer;
    transition: all 350ms ease;
    text-decoration: none;
    display: inline-block;
}

.domu-button:hover {
    background-color: black;
    color: #d4a373;
    border: 1px solid #d4a373;
}

.hero-btn-outline {
    padding: 15px 35px;
    border-radius: 18px;
    border: 2px solid #d4a373;
    font-size: 20px;
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    transition: all 350ms ease;
    text-decoration: none;
    display: inline-block;
}

.hero-btn-outline:hover {
    background-color: #d4a373;
    color: #121212;
}

/* Swiper Navigace & Paginace */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    background: rgba(18, 18, 18, 0.6);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #d4a373;
    color: #d4a373;
    transition: all 0.3s ease;
    z-index: 15;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    background: #d4a373;
    color: #121212;
}

.hero-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #d4a373;
    opacity: 1;
    width: 30px;
    border-radius: 10px;
}
/* ==========================================
   RESPONZIVITA
   ========================================== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }
    .domu-para {
        font-size: 16px;
    }
    .domu-span {
        font-size: 18px;
    }
    .hero-slide {
        padding-top: 130px;
    }
    .buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .domu-button, .hero-btn-outline {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 12px 20px;
    }
}
/* SEKCE ONAS */

#onas{
    width:100%;
    min-height: 800px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #121212; 
    color: #e0e0e0;
}
.onas-container{
    width:100%;
    max-width: 1500px;
    height:650px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    
    margin-top: 50px;
    gap:150px;
}

.onas-figure{
    width:100%;
    max-width: 600px;
    overflow: hidden;
    height:600px;
    border: 4px solid #d4a373; /* Růžové ohraničení portrétu */
    box-shadow: 0 20px 40px rgba(93, 64, 55, 0.1);
    transition: all 0.5s ease-in-out;
    border-radius: 50%;
}
.onas-figure:hover{
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    cursor: pointer;
}
.onas-image{
    width:100%;
    height:100%;
    object-fit: cover;
    transition: all 350ms ease;
}
.onas-figure:hover .onas-image{
    transform: scale(1.1);
}

.onas-text{
    width:100%;
    max-width: 600px;
    height: 500px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.onas-h3{
    font-family: 'Playfair Display', serif;
    font-size: 35px;
    margin-bottom: 20px;
    color: #d4a373; /* Akcent */
}
.onas-para{
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #b3b3b3;
    text-align: center;
    
}
.onas-para:last-of-type{
    margin-bottom: 40px;
}

.onas-button{
    padding: 15px 35px;
    border-radius: 20px;
    border: 1px solid #d4a373;
    background-color: #d4a373; /* Sjednoceno do růžové */
    font-size: 20px;
    color: #121212;
    font-weight: bold;
    cursor: pointer;
    max-width: 230px;
    text-align: center;
    transition: all 350ms ease;
    
}
.onas-button:hover{
    color:#d4a373;
    background-color: #000000;
    border:2px solid #d4a373;
}


/* SEKCE SLUŽBY */

#sluzby{
    width:100%;
    min-height: 1400px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #1c1c1c; /* Střídání pozadí */
}
.sluzby-container{
    width:100%;
    max-width: 1500px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:50px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.sluzby-blok{
    width:100%;
    max-width: 400px;
    height:600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background-color: #252525; /* Tmavé karty */
    border: 1px solid #333;
    transition: all 400ms ease;
}
.sluzby-blok:hover{
    cursor: pointer;
}
.sluzby-blok:hover .sluzby-image{
    transform: scale(1.1);
    filter:blur(5px);

}


.sluzby-figure{
    width:100%;
    max-width: 400px;
    height:350px;
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.sluzby-blok::before{
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    background-color: #000000;
    z-index: 2;
    opacity: 0;
    transition: all 350ms ease;
}
.sluzby-blok:hover{
    border: 2px solid #d4a373; /* Růžové ohraničení karty na hover */
}
.sluzby-image{
    width:100%;
    height:100%;
    object-fit: cover;
    transition: all 350ms ease;
}

.sluzby-text{
    width:100%;
    max-width: 360px;
    margin:0 auto;
    margin-top: 20px;
}
.sluzby-h3{
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    margin-bottom: 10px;
    color: #d4a373;
}
.sluzby-para{
    font-size: 18px;
    line-height: 1.5;
    color: #b3b3b3;
    margin-bottom: 10px;
}



.sluzby-neviditelny{
    text-align: center;
    position: absolute;
    width:100%;
    max-width: 200px;
    font-size: 20px;
    color: white;
    transform: translateY(300px);
    opacity: 0;
    transition: all 350ms ease;
    z-index: 3;
    bottom:40px;
}


.sluzby-blok:hover::before{
    opacity: 0.65;
}
.sluzby-blok:hover .sluzby-neviditelny{
    opacity: 1;
    transform: translateY(0);
}
.sluzby-button{
    padding: 20px;
    background-color: #d4a373;
    border-radius: 30px;
    margin:0 auto;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    color:black;
    font-size: 16px;
    
}

/* SEKCE GALERIE */

#galerie{
    width:100%;
    min-height: 1300px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #121212;
}
.galerie-container{
    width:100%;
    max-width: 1500px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:30px;
    margin-top: 50px;
}

.galerie-figure{
    width:100%;
    max-width: 350px;
    height:350px;
    border-radius: 10px;
    overflow: hidden;
    transform: scale(0.9) translateY(30px);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
    border: 2px solid #252525;
}
.galerie-figure.animation{
    opacity: 1;
    transform: translateY(0);
}
.galerie-image{
    width:100%;
    height:100%;
    object-fit: cover;
    cursor: pointer;
    transition: all 400ms ease;
}

.galerie-image:hover{
    transform: scale(0.8) rotate(-15deg);
    border-radius: 20px;
}

.full-img{
    width:100%;
    height:100vh;
    background-color: rgba(0,0,0,0.95);
    position: fixed;
    top:0;
    left:0;
    display:flex;
    align-items: center;
    justify-content: center;
    display:none;
    z-index: 90;
}


.full-img img{
    width:90%;
    max-width: 500px;
    transition: all 400ms ease;
    border-radius: 20px;
    border: 3px solid #d4a373; /* Růžové ohraničení zvětšeného obrázku */
}

.full-img img:hover{
    transform: scale(1.1);
    cursor: zoom-in;
}
.full-img span{
    position: absolute;
    top:5%;
    right:5%;
    font-size: 30px;
    color:#fff;
    cursor: pointer;
    transition: all 400ms ease;
    
}


/*SEKCE BANNER*/

#banner{
    width:100%;
    overflow: hidden;
    min-height: 350px;
    display:flex;
    
}

.banner-container{
    display:flex;
    align-items: center;
    animation:scrollInfinite 25s linear infinite;
}


.banner-container img{
    width:300px;
    height:300px;
    padding:0px;
    flex-shrink: 0;
    object-fit: cover;
}
.banner2 img{
    width:200px;
    height:200px;
}
@keyframes scrollInfinite{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}
/* SEKCE TÝM */

#tym{
    width:100%;
    min-height: 750px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #1c1c1c;
}

.tym-container{
    width:100%;
    max-width: 1600px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-top: 50px;
    padding-bottom: 80px;
}

.tym-blok{
    width:100%;
    max-width: 400px;
    height:650px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:10px;
    border-radius: 20px;
    transition: all 350ms ease;
    border: 1px solid #d4a373; /* Růžový rámeček bloku týmu */
    
}
.tym-blok:hover{
    transform: scale(0.9);
    
    cursor: pointer;
}

.tym-figure{
    width:100%;
    max-width: 150px;
    height:150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #d4a373; /* Růžový rámeček portrétu */
}
.tym-figure:hover .tym-image{
    transform: scale(1.2);
    cursor: pointer;
}
.tym-image{
    width:100%;
    height:100%;
    transition: all 350ms ease;
}
.tym-h3{
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    color:#d4a373;
}
.tym-span{
    font-size: 16px;
    color:#a0a0a0;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 15px;
}
.tym-para{
    font-size: 14px;
    line-height: 1.7;
    max-width: 250px;
    color: lightgray;
    min-height:180px;
}
.insta{
    font-size: 40px;
}
.socialni-site{
    display:flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.telefoni-cislo{
    font-size: 20px;
}
.socialni-site a{
    color:white;
    transition: all 400ms ease;
}
.socialni-site a:hover{
    cursor: pointer;
    color:#d4a373;
    transform: scale(1.1);
}
.informace{
    padding: 10px 20px;
    background-color: #d4a373;
    border-radius: 10px;
    color:black;
    font-size: 20px;
    transition: all 400ms ease;
}
.informace:hover{
    color:#d4a373;
    background-color: black;
    border:1px solid #d4a373;
    cursor: pointer;
}
/* SEKCE CENÍK */

#cenik{
    width:100%;
    min-height: 500px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #121212;
}
.cenik-figure{
    width:100%;
    max-width: 400px;
    height:500px;
    margin: 50px 0;
    border: 2px solid #d4a373; /* Růžové ohraničení ceníku */
    border-radius: 10px;
    overflow: hidden;
}
.cenik-image{
    width:100%;
    height:100%;
}

/*SEKCE HODNOCENÍ*/
#hodnoceni {
    width: 100%;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1c1c1c;
}

.hodnoceni-span {
    color: #a0a0a0;
    font-style: italic;
    font-size: 25px;
    margin-top: 20px;
    text-align: center; 
    font-family: 'Playfair Display', serif; /* Elegantní kadeřnický rukopis */
}
.hodnoceni-container {
    width: 100%;
    max-width: 1350px; 
    margin: 50px auto 0 auto;
    display: flex;
    justify-content: center;
    position: relative; 
}

.swiper2 {
    width: 100%;
    max-width: 1200px; 
    height: 350px; 
    --swiper-theme-color: #d4a373;
    --swiper-navigation-color: #d4a373;
    padding: 0; 
    box-sizing: border-box;
}

.slide2 {
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.blocek {
    width: 100%;
    max-width: 350px;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px; 
    margin: 0 auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4); 
    border-radius: 15px;
    background-color: #252525; /* Tmavá karta */
    border: 1px solid #d4a373;   /* Jemná růžová linka pro ohraničení */
    color: white;
    padding: 20px; 
    box-sizing: border-box;
    transition: all 350ms ease;
}
.blocek:hover{
    transform: scale(0.85);
    cursor: pointer;
}

.hodnoceni-figure{
    width:100%;
    max-width: 80px;
    border-radius: 50%;
    height:80px;
    overflow: hidden;
    border: 2px solid #d4a373;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #d4a373;
}
.stred{
    font-size: 50px;
}
.hodnoceni-image{
    width:100%;
    height:100%;
}
.hodnoceni-text {
    width: 100%;
}

.hodnoceni-h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; 
    margin: 0 0 5px 0;
    color: white;
}

.hodnoceni-para {
    line-height: 1.4;
    font-size: 22px; 
    font-style: italic;
    margin: 0;
    height:170px;
    color: #d0d0d0;
    font-family: 'Playfair Display', serif; /* Citáty v patkovém stylu */
}

.prev,
.next {
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev::after,
.next::after {
    font-size: 35px;
}

.hodnoceni-button{
    padding:15px 20px;
    border: 1px solid #d4a373;
    background-color: #d4a373; /* Sjednoceno na růžovou */
    font-size: 20px;
    color: #121212;
    border-radius: 15px;
    margin-top: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: all 400ms ease;
}
.hodnoceni-button:hover{
    border:1px solid #d4a373;
    background-color: black;
    color:#d4a373;
    cursor: pointer;
}
.stars{
    display:flex;
    gap:5px;
    align-items: center;
    justify-content: center;
}
.stars i{
    color: yellow; /* Hvězdičky ve sladěné růžové barvě */
    font-size: 20px;
}

/* SEKCE KONTAKTY */
#kontakty{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    min-height: 1300px;
    background-color: #121212;
}
.kontakty-container{
    width:100%;
    max-width: 1500px;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
iframe{
    width:100%;
    max-width: 1000px;
    border-radius: 20px;
    border: 2px solid #d4a373; /* Růžový rámeček mapy */
    margin-bottom: 70px;
    
}

.kontakty-h3{
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    margin-top:50px;
}

.kontakty-bloky{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:40px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.kontakty-blok{
    width:100%;
    max-width: 350px;
    height:320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    background-color: #1c1c1c; /* Elegantní kontrastní tmavá */
    border: 1px solid #333;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:20px;
    border-radius: 10px;
    transition: all 350ms ease;
}
.kontakty-blok:hover{
    border:3px solid #d4a373; /* Růžový hover border */
    transform: scale(0.85);
    cursor: pointer;

}
.blok-lokace{
    margin:20px 0;
}
.kontakty-h4{
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #d4a373;
}
.i{
    font-size: 35px;
    width:35px;
    height:35px;
    transition: all 350ms ease;
    
}
.sit{
    color:black;
}
.sitdva{
    color:white;
}
.stred{
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
    height:200px;

}
.kontakty-para{
    line-height: 1.5;
    font-size: 20px;
    height:76px;
    color: #e0e0e0;
    font-style: italic;
}
.site{
    display:flex;
    gap:5px;
}
.kruh{
    width:60px;
    min-height:60px;
    border-radius: 50%;
    background-color: #d4a373; /* Růžová ikonka */
    color: #121212;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:30px;
}
.kruh:hover .i{
    transform: scale(1.2);
    
}

/* Modrá u tohoto elementu zůstává netknutá podle zadání */
.dva{
    background-color: blue; 
    color: #121212;
}

.doba{
    width:100%;
    max-width: 400px;
    height:450px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    margin-top: 50px;
    border-radius: 15px;
    background-color: #1c1c1c;
    border: 1px solid #333;
    transition: all 350ms ease;
    cursor: pointer;
}
.doba:hover{
    border:3px solid #d4a373;
    transform: scale(0.85);
}
.radek{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.doba-span1{
    font-size: 25px;
    font-weight: bold;
    color: #d4a373;
}
.doba-span{
    font-size: 25px;
    color: #e0e0e0;
}
.casy{
    width:100%;
    max-width: 350px;
    display:flex;
    flex-direction: column;
    gap:20px;
}
#status-otevreno {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 8px 15px;
    background: rgba(255, 105, 180, 0.15); /* Podbarvení jemným růžovým tónem */
    border: 1px solid #d4a373;
    color: #d4a373;
    border-radius: 8px;
    width: fit-content;
    justify-content: center;
    margin:20px auto;
}

/* SEKCE OTÁZKY */

#faq {
    width: 100%;
    background-color: #1c1c1c; 
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-container {
    width: 100%;
    max-width: 900px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-list {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    width: 100%;
    background-color: #252525;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    border-color: #d4a373;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 22px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    color: white;
    font-family: 'Playfair Display', serif; /* Luxusnější dojem z nadpisu otázky */
    font-weight: 700;
    font-size: 22px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question i {
    font-size: 18px;
    color: #d4a373;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.2);
}

.faq-answer p {
    padding: 0 30px 25px 30px;
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    color: #b3b3b3;
}

.faq-item.active {
    border-color: #d4a373;
}

.faq-item.active .faq-question {
    color: #d4a373;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg); 
    color: white;
}


/*FOOTER*/

footer{
    width:100%;
    min-height: 550px;
    background-color: #0d0d0d; /* Ultra tmavý závěr webu */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #d4a373; /* Růžová dělící linka pro stylový závěr */
}
.footer-container{
    width:100%;
    max-width: 1500px;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}

.footer-blok{
    width:100%;
    max-width: 450px;
    height:400px;
    color:white;
}

.footer-figure{
    width:100%;
    max-width: 200px;
    height:200px
}
.footer-image{
    width:100%;
    height:100%;
    
}
.footer-text{
    width:100%;
    max-width: 370px;
    margin:0 auto;
    display:flex;
    flex-direction: column;
}
.footer-para{
    line-height: 1.7;
    font-size: 17px;
    margin-bottom: 20px;
    color: #b3b3b3;
}

.footer-links{
    width:100%;
    max-width: 300px;
    height:400px;
    color:white;
    display:flex;
    flex-direction: column;
    gap:5px;
}
.footer-h3{
    font-family: 'Playfair Display', serif;
    font-size: 35px;
    margin-bottom: 10px;
    color:#d4a373;
}
.footer-link{
    color:#e0e0e0;
    font-size: 20px;
    margin: 10px 0;
    transition: color 300ms ease;
    position: relative;
    width:100%;
    
}
.linkos{
max-width: 100px;
}
.linkos2{
    max-width: 200px;
}
.footer-link::after{
    content:"";
    position: absolute;
    width:0;
    height:3px;
    bottom:-3px;
    background-color: #d4a373;
    right:0;
    transition: all 350ms ease;
}
.footer-link:hover::after{
    left:0;
    width:100%;
}
.footer-link:hover {
    color: #d4a373;
}
.footer-radek{
    display:flex;
    align-items: center;
    gap:10px;
    margin: 30px 0;
}
.footer-span{
    font-size: 20px;
    color: #e0e0e0;
}

.blocekJedna{
    height:500px;
}
.a{
    font-size: 30px;
    transition: all 350ms ease;
    color: white;
}
.a:hover{
    transform: scale(1.2);
    color: #d4a373;
}

.caraDva{
    width:100%;
    height:3px;
    background-color: #d4a373; /* Růžové rozdělení v patičce */
}
.socials-menu{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:10px;
    margin-top: 10px;
}
.footer-last{
    font-size: 16px;
    margin-top: 10px;
    color:gray;
}
/*hamburger*/

.hamburgerInput{
    border:none;
    width:40px; 
    height:40px;
    font-size: 40px;
    position: absolute;
    top:28px;
    right:20px;
    background-color: transparent;
    display:none;
    color:white;
    transition: all 350ms ease;
}
.hamburgerInput:hover{
    
    cursor: pointer;
    
}
.zruseni{
    border:none;
    width:40px;
    height:40px;
    font-size: 40px;
    position: absolute;
    top:30px;
    right:20px;
    background-color: transparent;
    color: white;
    transition:all 350ms ease ;
}
.lincik:hover{
    color:#d4a373;
    transform: scale(1.1);
    cursor: pointer;
}
.scroll .lincik:hover{
    color:white;
}
.zruseni:hover{
    cursor: pointer;
    color:#d4a373;
    transform: rotate(90deg);
}
.hamburger-menu{
    width:100%;
    height:100vh;
    background-color: #1c1c1c; /* Prémiová tmavá */
    border-bottom: 2px solid #d4a373; /* Růžový spodní okraj */
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
    position: fixed;
    transform: translateY(-1000px);
    transition: all 650ms ease;
    z-index: 100;
}
.hamburger-menu.active{
    transform: translateY(0);
}
.hamburger-link{
    font-size: 20px;
    color: white;
    transition: color 300ms ease;
    position: relative;
}
.hamburger-link::after{
    content:"";
    position: absolute;
    width:0;
    height:3px;
    right:0;
    bottom: -3px;
    background-color: #d4a373;
    transition: all 350ms ease;
}
.hamburger-link:hover::after{
    left:0;
    width:100%;
}
.hamburger-link:hover{
    color:#d4a373;
}
.o{
    margin-top: 20px;
    
}
.sipka{
    position: absolute;
    

}

@keyframes skok{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);

    }

}
@keyframes objeveni{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes vyjeti{
    0%{
        transform: translateY(30px);
    }
    100%{
        transform: translateY(0);
    }
}
.domu-span,.domu-para,.domu-button,h1{
    opacity: 0;
    animation:skok 1s forwards ease
}
.domu-span{
    animation-delay: 500ms;
}
h1{
    animation-delay: 500ms;
}
.domu-para{
    animation-delay: 1000ms;
}
.domu-button{
    animation-delay: 1500ms;
}
.animation{
    animation: skok 4s ease;
}
.nahoru{
    position: fixed;
    font-size: 30px;
    color:#121212;
    background-color: #d4a373; /* Růžové tlačítko nahoru */
    height:50px;
    width:50px;
    border-radius: 50%;
    bottom:20px;
    display:flex;
    justify-content: center;
    align-items: center;
    right:20px;
    
    display:none;
    transition: all 450ms ease;
    z-index: 5;
}
.nahoru:hover{
    transform: scale(1.1) translateY(-20px);
    cursor: pointer;
    
}
.display{
    display:flex;
    transition: all 400ms ease;
    animation: skok 2s ease;
}
.black{
    color:black;
    transition: all 350ms ease;
}
.link-mensi{
    color:gray;
    font-size: 16px;
}
/* RESPONZIVITA - LAYOUT NEZMĚNĚN */

@media(max-width:1200px){
    .tym-container{
        flex-wrap: wrap;
    }
    .onas-container{
        flex-direction: column;
        align-items: center;
        height:100%;
    }
    .onas-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .osobni-kontakty-container{
        flex-wrap: wrap;
    }
}
@media(max-width:768px){
    .topbar{
        display:none;
    }
    .link-list{ display:none; }
    .lincik{ font-size: 22px; }
    .hamburgerInput{ display:block; }
    
    
    .osobni-logo-figure{ max-width: 150px; }
    
    .onas-container{
        flex-direction: column;
        gap:20px;
    }
    #onas{ min-height: 900px; }
    .onas-text{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .onas-h3{ text-align: center; font-size: 26px; }
    .onas-para{ max-width: 500px; }
    .onas-figure{ height:500px; }
    .onas-container{ height:100%; align-items: center; }
    #sluzby{
        min-height: 3300px;
    }
    .tym-container{
        flex-wrap: wrap;
    }
    .kontakty-bloky{
        flex-wrap: wrap;
        
    }
    #kontakty{
        min-height: 1500px;
    }
    iframe{
        max-width: 600px;
    }
    .footer-container{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .footer-text{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .footer-links{
        display:flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .footer-blok{
        text-align: center;
        display:flex;
        flex-direction: column;
        justify-content: center;
        
    }

}
@media(max-width:768px){
    .footer-blok {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
    }
   
    .topbar{
        display:none;
    }
    h1{
        font-size: 40px;
    }
    .domu-para{
        font-size: 18px;
        max-width: 350px;
    }
   
    .onas-h3{
        font-size: 22px;
    }
    .onas-para{
        text-align: center;
    }
    .sluzby-blok{
        max-width: 350px;
        min-height:550px;
    }
    .sluzby-figure{
        height:320px
    }
    .sluzby-text{
        text-align: center;
    }
    iframe{
        max-width: 350px;
        height:400px;
    }
    .kontakty-h3{
        text-align: center;
    }
    .kontakty-h4{
        text-align: center;
    }
    .doba{
        max-width: 370px;
        margin-bottom: 40px;
    }
    .casy{
        max-width: 320px;
    }
    .footer-blok{
        max-width: 330px;
        margin:0 auto;
    }
    .footer-span{
        font-size: 16px;
    }
    .onas-figure{
        height:320px;
    }
}
@media (max-width:440px){
    #sluzby{
        min-height: 3500px;
    }
    .nav-kontakty{
        display:none;
    }
    
    
    .osobni-logo-figure{
        margin-left: 10px;
    }
    
    .onas-figure{
        height:350px;
    }
    .onas-h3{
        font-size: 19px;
    }
    .onas-para{
        max-width: 280px;
        font-size: 15px;
        text-align: center;
    }
    .sluzby-blok{
        max-width: 320px;
        min-height:550px;
    }
    .sluzby-figure{
        height:300px;
    }
    .sluzby-text{
        text-align: center;
    }
    .banner-container img{
        max-width: 300px;
        height:280px;
    }
    .cenik-figure{
        max-width: 350px;
        height:450px;
    }
    .blocek{
        width:300px;
        
    }
    iframe{
        width:320px;
        height:350px;
    }
    .kontakty-h3{
        text-align: center;
    }
    .nahoru{
        display:none;
    }
    .kontakty-blok{
        max-width: 320px;
    }
    .doba{
        max-width: 320px;
        height:390px;
    }
    .doba-span1{
        font-size: 20px;
    }
    .doba-span{
        font-size: 20px;
    }
    .casy{
        max-width: 300px;
    }
    .footer-radek{
        max-width: 350px;
        
    }
    .footer-span{
        font-size: 17px;
    }
    .footer-blok{
        align-items: center;
    }
    .domu-button{
        width: 140px;
        font-size: 18px;
    }
    .sluzby-neviditelny{
        font-size: 16px;
    }
    
    .stars{
        margin-top: 30px;
    }
    .hodnoceni-figure{
        max-width: 150px;
    }
    .domu-button{ width:150px; font-size: 18px; color:#121212; background-color: #d4a373; }
    .onas-figure{
        max-width: 300px;
        height:300px;
    }
}

@media(max-width:440px){
    .tym-para{
        font-size: 16px;
    }
    .banner-container img{
        width:300px;
    }
    .galerie-figure{
        max-width: 300px;
        height:300px;
    }
    .sluzby-neviditelny{
        font-size: 16px;
    }
    .nahoru{
        display:none;
    }
    #background{
        height:880px;
        
    }
    #domu{
        height:700px;
    }
    h1{ font-size: 40px; }
    .domu-span{ font-size: 22px; }
    .domu-para{ font-size: 16px; max-width: 350px; }
    .domu-button{ width:220px; font-size: 16px; color:#121212; background-color: #d4a373; }
    .onas-para{ max-width: 330px; text-align: center; }

    .onas-h3{ font-size: 20px; }
    .onas-button{ width:200px; font-size: 16px; text-align: center; }    
    .sluzby-blok{ max-width: 300px; min-height:600px; }
    .sluzby-figure{ height:280px; }
    .sluzby-text{ max-width: 250px; min-height:170px; text-align: center; }
    .sluzby-para{ font-size: 17px; }
    .tym-container{ flex-direction: column; }
    .tym-h3{ font-size: 20px; }
    .swiper2{  max-width: 300px; }
    .stars{ margin-top: 30px; }
    .prev, .next { display: none; }
    iframe{ max-width: 300px; height:350px; }
    .kontakty-blok{ max-width: 300px; height:300px; margin-top: 20px; text-align: center; }
    .kontakty-h3{ text-align: center; }
    .kontakty-bloky{ flex-direction: column; flex-wrap: wrap; }
    .kontakty-para{ font-size: 20px; }
    .kontakty-h4{ text-align: center; font-size: 25px; }

    .doba{ max-width: 300px; height:400px;margin-bottom: 50px; }
    .doba-span{ font-size: 18px; }
    .doba-span1{ font-size: 22px; }
    .casy{ max-width: 250px; }
    .footer-container{ flex-direction: column; }
    .footer-blok{ text-align: center; display:flex; flex-direction: column; justify-content: center; align-items: center; height:300px }
    .footer-text{ display:flex; flex-direction: column; justify-content: center; align-items: center; }
    .footer-links{ display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    .footer-radek{ width: 300px; display:flex; justify-content: center; align-items: center; }
    .footer-span{ font-size: 14px; width:250px; display:flex; justify-content: flex-start; }
    .a{ font-size: 30px; display:flex; justify-content: center; align-items: center; }
    footer{ min-height: 1520px; }
    .cenik-figure{ max-width: 300px; height:400px; }
    .footer-para{ font-size: 16px; max-width: 300px; }
    .tym-blok{
        max-width: 320px;
        height:600px;
        
    }
    .tym-figure{
        max-width: 110px;
        height:110px;
        
    }
    .tym-para{
        font-size: 14px;
        max-width: 300px;
        
    }
    .hodnoceni-figure{
        max-width: 50px;
        max-height:50px;
    }
    .stred{
        font-size: 16px;
    }
    .hodnoceni-para{
        font-size: 18px;
        height:100px;
    }
    .swiper-button-next,.swiper-button-prev{
        display:none;
        opacity: 0;
    }
    .domu-span{
        font-size: 18px;
    }
    
    .footer-span{
        font-size: 13px;
    }
    .nadpis-h2{
        font-size: 30px;
    }
    .kontakty-h3{
        font-size: 26px;
    }

    
    
}


/* ==========================================
   HERO SWIPER (Úvodní banner na hlavní stránce)
   ========================================== */
   .hero-swiper {
    width: 100%;
    height: 80vh; /* Pokryje 80 % výšky obrazovky */
    min-height: 520px;
    max-height: 750px;
    position: relative;
}

.hero-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.hero-content {
    max-width: 700px;
    color: #ffffff;
    animation: fadeInUp 0.8s ease forwards;
}

.hero-badge {
    display: inline-block;
    background: rgba(226, 190, 170, 0.25);
    border: 1px solid #e2beaa;
    color: #f5ebe3;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-title {
    width:100%;
    max-width: 1000px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.hero-text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #f3e9e3;
    margin-bottom: 35px;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn-outline {
    display: inline-block;
    border: 2px solid #e2beaa;
    color: #ffffff !important;
    padding: 14px 36px;
    text-decoration: none;
    border-radius: 35px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.hero-btn-outline:hover {
    background: #e2beaa;
    color: #211a18 !important;
}

/* Úprava šipek a teček pro Hero slider */
.hero-swiper {
    --swiper-theme-color: #e2beaa; /* Růžovozlatá barva pro tečky a šipky */
    --swiper-navigation-size: 28px;
}

.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    background: rgba(33, 26, 24, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(226, 190, 170, 0.4);
    transition: all 0.3s ease;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    background: #e2beaa;
    color: #211a18;
}

.hero-swiper .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 28px;
    border-radius: 10px;
}

/* Responsivita pro mobilní zařízení */
@media (max-width: 768px) {
    
    .hero-swiper {
        height: 70vh;
    }
    .hero-title {
        font-size: 1.4rem;
        
    }
    .hero-text {
        font-size: 1rem;
    }
}



/* ==========================================
   SEKCE CENÍK (Včetně responzivity)
   ========================================== */

   #cenik {
    padding: 60px 20px;
    background-color: #242424;
}

.cenik-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0 auto;
}

.cenik-karta {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.cenik-nadpis {
    font-size: 1.25rem;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cenik-nadpis i {
    color: #48bb78; /* Vaše akcentová zelená (.text--green) */
}

.cenik-podsekce-titul {
    font-weight: 700;
    font-size: 0.95rem;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 18px 0 8px 0;
    padding-left: 5px;
    border-left: 3px solid #48bb78;
}

.cenik-seznam {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cenik-seznam li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.95rem;
}

.cenik-seznam li:last-child {
    border-bottom: none;
}

.cenik-seznam li span {
    color: #4a5568;
    padding-right: 15px;
}

.cenik-seznam li strong {
    color: #1a202c;
    white-space: nowrap;
    font-weight: 600;
}

.cenik-nota {
    font-size: 0.82rem;
    color: #718096;
    margin-top: 15px;
    line-height: 1.4;
    background-color: #f7fafc;
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid #cbd5e0;
}

.cenik-pota {
    text-align: center;
    margin-top: 40px;
}

/* --- RESPONZIVITA (Média queries) --- */

/* Tablet & menší obrazovky (do 768px) */
@media screen and (max-width: 768px) {
    #cenik {
        padding: 40px 15px;
    }

    .cenik-container {
        grid-template-columns: 1fr; /* Karty se seřadí do jednoho sloupce */
        gap: 20px;
        margin-top: 25px;
    }

    .cenik-karta {
        padding: 20px 15px;
    }
}

/* Mobilní telefony (do 480px) */
@media screen and (max-width: 480px) {
    .cenik-nadpis {
        font-size: 1.1rem;
    }

    .cenik-seznam li {
        font-size: 0.88rem; /* Mírně zmenšíme písmo pro malé displeje */
        padding: 8px 0;
    }

    /* Pokud je název služby moc dlouhý, cena se posune pod něj */
    .cenik-seznam li {
        flex-wrap: wrap;
        gap: 4px;
    }

    .cenik-seznam li strong {
        margin-left: auto; /* Doutáhne cenu doprava */
    }
}