:root {

    --primary: #8fd19e;      

    --primary-dark: #6fb785; 

    --secondary: #cfead4;    

    --accent: #a5e1b2;    

    --light: #f6fdf7;         

    --dark: #4a4a4a;          

    --gray: #dddddd;          

    --light-gray: #f8f8f8;    

    --transition: all 0.3s ease;



}





* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html, body {

    max-width: 100vw;

    overflow-x: hidden;

}



body {

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

    color: var(--dark);

    background-color: white;

    line-height: 1.6;

}



h1, h2, h3, h4 {

    font-family: 'Playfair Display', serif;

    font-weight: 700;

}



.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header */

.header {

    background-color: white;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    position: fixed;

    width: 100%;

    z-index: 1000;

    padding: 15px 0;

    width: 100vw;

    left: 0;

    right: 0;

    box-sizing: border-box;

}



.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 28px;

    font-weight: bold;

    color: var(--primary);

    font-family: 'Playfair Display', serif;

}



.nav ul {

    display: flex;

    list-style: none;

}



.nav li {

    margin-left: 30px;

}



.nav a {

    text-decoration: none;

    color: var(--dark);

    font-weight: 500;

    transition: var(--transition);

    position: relative;

}



.nav a:hover {

    color: var(--primary);

}



.nav a::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--primary);

    transition: var(--transition);

}



.nav a:hover::after {

    width: 100%;

}



.menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 24px;

    color: var(--primary);

    cursor: pointer;

}



/* Hero sekce */

.hero {

    background-image: url(../photos/2be5df89-c741-4449-98fd-a78a346a4231.jpg);

    background-size: cover;

    background-position: center;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center; 

    text-align: center;      

    padding-top: 80px;

    position: relative;



}





.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

}



.hero-content {

    position: relative;

    z-index: 1;

    color: white;

    max-width: 600px;

}



.hero h1 {

    font-size: 48px;

    margin-bottom: 20px;

    line-height: 1.2;

}



.hero p {

    font-size: 20px;

    margin-bottom: 30px;

}



/* Tlačítka */

.btn {

    display: inline-block;

    padding: 12px 30px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 600;

    transition: var(--transition);

    border: none;

    cursor: pointer;

    font-size: 16px;

}



.btn-primary {

    background-color: var(--primary);

    color: white;

}



.btn-primary:hover {

    background-color: var(--primary-dark);

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(232, 62, 140, 0.3);

}



.btn-secondary {

    background-color: white;

    color: var(--primary);

    border: 1px solid var(--primary);

}



.btn-secondary:hover {

    background-color: var(--primary);

    color: white;

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(232, 62, 140, 0.3);

}



/* Sekce */

.section-title {

    text-align: center;

    margin-bottom: 50px;

    font-size: 36px;

    color: var(--primary-dark);

    position: relative;

    padding-bottom: 15px;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 3px;

    background-color: var(--primary);

}



/* Galerie */

.gallery-section {

    padding: 80px 0;

    background-color: var(--light);

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    grid-auto-flow: dense;

}



.gallery-item {

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    transition: var(--transition);

    overflow: hidden;

    aspect-ratio: 1/1;

    margin: 10px;

}



.gallery-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s;

}



.gallery-item:hover .gallery-img {

    transform: scale(1.06) rotate(-2deg);

}



/* Rozházené varianty */

.gallery-item--wide {

    grid-column: span 2;

    aspect-ratio: 2/1;

}

.gallery-item--tall {

    grid-row: span 2;

    aspect-ratio: 1/2;

}

.gallery-item--small {

    aspect-ratio: 1/1;

    transform: translateY(18px) rotate(-2deg);

}



.gallery-item:nth-child(3n) {

    transform: translateY(-12px) rotate(2deg);

}

.gallery-item:nth-child(4n) {

    transform: translateY(10px) rotate(-1deg);

}



/* Responsivita */

@media (max-width: 992px) {

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .gallery-item--wide,

    .gallery-item--tall {

        grid-column: span 1;

        grid-row: span 1;

        aspect-ratio: 1/1;

    }

}

@media (max-width: 576px) {

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    

    .section-title {

        font-size: 28px;

    }

    

    .vouchers-grid {

        grid-template-columns: 1fr;

    }



    .contact-map iframe,

    .contact-map {

        height: 220px !important;

        min-height: 180px;

        max-height: 250px;

    }

}



/* Služby */

.services-section {

    padding: 80px 0;

    background-color: white;

}



.price-list {

    max-width: 800px;

    margin: 0 auto;

}



.price-item {

    background: white;

    margin-bottom: 15px;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

    border: 1px solid var(--gray);

}





.price-header {

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

    transition: var(--transition);

    background-color: var(--light);

}



.price-info{

    display: flex;

    align-items: center;

    gap: 20px;

}



.price-header:hover {

    background-color: var(--secondary);

}



.price-title {

    font-weight: bold;

    font-size: 18px;

    color: var(--primary-dark);

}



.price-amount {

    color: var(--primary);

    font-weight: bold;

}



.price-toggle {

    transition: var(--transition);

    color: var(--primary);

}



.price-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

    padding: 0 20px;

}



.price-content.active {

    max-height: 1000px;

    padding: 20px;

}



.price-content ul {

    list-style-position: inside;

    margin-bottom: 15px;

    padding-left: 20px;

}



.price-content li {

    margin-bottom: 8px;

}



.price-duration {

    font-style: italic;

    color: var(--primary-dark);

    font-weight: 500;

}



.button-reserve {

    margin-top: 20px;

    background-color: var(--primary);

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

    margin-left: 40%;

}

/* Vouchery */

.vouchers-section {

    padding: 80px 0;

    background-color: var(--light);

}



.voucher-content {

    gap: 40px;

    align-items: center;

}



.voucher-intro {

    max-width: 600px;

    margin: 0 auto;



}



.voucher-lead {

    font-size: 18px;

    line-height: 1.6;

    margin-bottom: 30px;

    color: var(--dark);

}



.voucher-services h3 {

    color: var(--primary-dark);

    margin-bottom: 15px;

    font-size: 20px;

}



.voucher-services ul {

    list-style-type: none;

    margin-bottom: 30px;

}



.voucher-services li {

    position: relative;

    padding-left: 30px;

    margin-bottom: 10px;

    line-height: 1.5;

}



.voucher-services li:before {

    content: "•";

    color: var(--primary);

    font-size: 24px;

    position: absolute;

    left: 10px;

    top: -2px;

}



.voucher-note {

    font-style: italic;

    margin: 25px 0;

    color: var(--primary-dark);

}



.divider {

    text-align: center;

    margin: 30px 0;

    color: var(--primary);

    font-size: 24px;

}



.voucher-contact {

    background-color: white;

    padding: 25px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}



.voucher-contact h3 {

    color: var(--primary-dark);

    margin-bottom: 15px;

}



.voucher-contact p {

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.voucher-contact i {

    color: var(--primary);

    width: 20px;

    text-align: center;

}





.voucher-image  {

    width: 90%;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 50px;

    margin-bottom: 20px;



}







/* Responsive */

@media (max-width: 768px) {

    .voucher-content {

        grid-template-columns: 1fr;

    }

    

    .voucher-image {

        order: -1;

        margin-bottom: 30px;

    }

    

    .voucher-intro {

        max-width: 100%;

    }

    .button-reserve {

        margin-left: 20%;

    }

}

/* Kontakt */

.contact-section {

    padding: 80px 0;

    background-color: white;

}



.contact-container {

    margin-left: 0;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: 0.5fr 0.5fr;

    gap: 40px;

}



.contact-info {

    display: grid;

    gap: 30px;

}



.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

}



.contact-item i {

    color: var(--primary);

    font-size: 24px;

    margin-top: 5px;

}



/* Footer */

.footer {

    background-color: var(--primary-dark);

    color: white;

    padding: 40px 0 20px;

}



.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}



.footer-logo {

    font-size: 24px;

    font-weight: bold;

    font-family: 'Playfair Display', serif;

}



.social-links {

    display: flex;

    gap: 20px;

}



.social-links a {

    color: white;

    font-size: 20px;

    transition: var(--transition);

}



.social-links a:hover {

    color: var(--secondary);

    transform: translateY(-3px);

}



.copyright {

    text-align: center;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}





/* Responzivita */

@media (max-width: 992px) {

    .contact-container {

        grid-template-columns: 1fr;

    }

    

    .contact-info {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .nav {

        position: fixed;

        top: 80px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 80px);

        background-color: white;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        transition: left 0.3s;

        z-index: 2000;

    }

    .nav.open {

        left: 0;

    }

    .menu-toggle {

        display: block;

    }

    .nav ul {

        flex-direction: column;

        gap: 30px;

    }

}



@media (max-width: 576px) {

    .contact-container {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .contact-map,

    .contact-map iframe {

        height: 180px !important;

        min-height: 120px;

        max-height: 220px;

    }

}