/* --------- ZÁKLADNÍ NASTAVENÍ --------- */

:root {

    --primary-color: #446f28;

    --primary-light: #71b238;

    --secondary-color: #2c3e50;

    --text-color: #333;

    --light-gray: #f9f9f9;

    --border-color: #f1f1f1;

    --shadow-light: 0 5px 15px rgba(0,0,0,0.08);

    --shadow-medium: 0 8px 16px rgba(0,0,0,0.1);

    --shadow-dark: 0 15px 30px rgba(0,0,0,0.1);

    --transition-default: all 0.3s ease;

    --border-radius: 8px;

    --font-main: 'Roboto', Arial, sans-serif;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: var(--font-main);

}



body {

    background-color: #ffffff;

    color: var(--text-color);

    font-size: 1.5rem;

    line-height: 1.6;

    padding: 3 rem;

}



.container {

    max-width: 75rem;

    margin: 0 auto;

    padding: 0 1rem;

}



/* --------- HLAVIČKA A NAVIGACE --------- */

/* Header */





.logo {

    max-width: 11.25rem;

}



/* Navigation */

.nav {

    text-align: center;

    padding: 0.625rem 0;

    background-color: white;

    width: 100%;

    top: 0;

    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.05);

}

.nav-logo {

    max-width: 11.25rem;

}

.nav-icon {

    display: none;  /* Ve výchozím stavu skryté pro desktop */

    cursor: pointer;

    margin-left: auto; /* Posune ikonu doprava */

}



.nav-icon i {

    font-size: 1.5rem;

    color: var(--primary-color);

}

.nav-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.nav-toggle {

    cursor: pointer;

}



.nav-menu {

    display: flex;

    flex-direction: row;

}

@media (min-width: 768px) {

    .nav ul {

        list-style: none;

        display: flex;

        justify-content: center;

    }

}

.nav ul{

    list-style: none;

}

.nav a {

    text-decoration: none;

    color: var(--primary-color);

    font-weight: 500;

    text-transform: uppercase;

    font-size: 1.2rem;

    padding: 0.3125rem 0.625rem;



}



.nav a:hover {

    color: var(--primary-light);

}







.nav-menu {



    flex-direction: row;

}



/* Dropdown menu */

.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: block;

    position: absolute;

    background-color: white;

    min-width: 12.5rem;

    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);

    z-index: 1;

    text-align: left;

    border-radius: 0.25rem;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-0.625rem);

    transition: all 0.3s ease;

}



.dropdown-content a {

    color: var(--primary-color);

    padding: 0.75rem 1rem;

    text-decoration: none;

    display: block;

    border-bottom: 1px solid var(--border-color);

}



.dropdown-content a:last-child {

    border-bottom: none;

}



.dropdown-content a:hover {

    background-color: var(--light-gray);

}



.dropdown:hover .dropdown-content {

    display: block;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* --------- HERO SEKCE --------- */

.hero {

    height: 37.5rem;

    background-size: cover;

    background-position: center;

    position: relative;



    overflow: hidden;

}



.background {

    width: 100%;

    height: 37.5rem;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}



.hero-text {

    color: white;

    font-size: 2.375rem;

    font-weight: 700;

    text-align: center;

    max-width: 50rem;

    margin-bottom: 1.25rem;

    text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.5);

}



/* --------- TLAČÍTKA --------- */

.btn {

    display: inline-block;

    padding: 8px 20px;

    background-color: #71b238;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-weight: 500;

    transition: all 0.3s ease;

}



.btn:hover {

    background-color: #446f28;

}



.btn-white {

    background-color: white;

    color: #71b238;

    font-weight: 600;

    padding: 12px 30px;

    font-size: 16px;

}



.btn-white:hover {

    background-color: #f1f1f1;

    color: #446f28;

}



/* --------- SLUŽBY --------- */

.services-section {

    padding: 1rem 0;

    text-align: center;

}



.section-header {

    margin-bottom: 3.125rem;

    text-align: center;

}







.service-grid {

    display: grid;

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

    gap: 1.875rem;

    margin: 0 auto;

    max-width: 75rem;

}



.service-item {

    background: white;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 5px 15px var(--shadow-light);

    transition: var(--transition-default);

}



.service-item:hover {

    transform: translateY(-0.625rem);

    box-shadow: 0 15px 30px var(--shadow-dark);

}



.service-image {

    height: 12.5rem;

    width: 100%;

    object-fit: cover;

}



.service-content {

    padding: 1.25rem;

}



.service-title {

    font-size: 1.125rem;

    color: var(--primary-color);

    margin-bottom: 0.625rem;

    font-weight: 600;

}



.service-description {

    font-size: 0.875rem;

    color: #666;

    margin-bottom: 0.9375rem;

}



/* --------- DETAIL SLUŽBY --------- */

.service-detail-section {

    padding: 1rem 0;

    background-color: white;

}



.service-details {

    display: flex;

    gap: 2rem;

    margin-bottom: 3rem;

    flex-wrap: wrap;

}



.service-image {

    flex: 1;

    min-width: 300px;

}



.featured-image {

    width: 100%;

    height: auto;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-light);

    transition: var(--transition-default);

}



.featured-image:hover {

    transform: translateY(-0.3rem);

    box-shadow: var(--shadow-medium);

}



.service-info {

    flex: 1;

    min-width: 300px;

}



.service-info h3 {

    color: var(--primary-color);

    font-size: 1.5rem;

    margin-bottom: 1.5rem;

}



.service-list {

    list-style-type: none;

    padding: 0;

}



.service-list li {

    display: flex;

    align-items: flex-start;

    margin-bottom: 1rem;

    font-size: 1.1rem;

}



.service-list i {

    color: var(--primary-light);

    margin-right: 0.75rem;

    margin-top: 0.25rem;

}



/* --------- VÝHODY --------- */

.benefits-section {

    padding: 3rem 0;

    background-color: #f5f5f5;

}



.benefits-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}



.benefit-card {

    background-color: #fff;

    border-radius: 8px;

    padding: 1.5rem;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease;

    text-align: center;

}



.benefit-card:hover {

    transform: translateY(-5px);

}



.benefit-icon {

    font-size: 2.5rem;

    margin-bottom: 1rem;

    color: #2e7d32;

}



.benefit-card h3 {

    color: #333;

    margin-bottom: 0.75rem;

    font-size: 1.25rem;

}



.benefit-card p {

    color: #666;

}



/* --------- PROČ SI VYBRAT NÁS --------- */

.why-choose-us {

    padding: 80px 0;

    background-color: #f9f9f9;

    text-align: center;

}



.features-grid {

    display: grid;

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

    gap: 30px;

    margin: 0 auto;

    max-width: 1200px;

}



.feature-item {

    padding: 30px;

    text-align: center;

}



.feature-icon {

    font-size: 48px;

    color: #71b238;

    margin-bottom: 20px;

}



.feature-title {

    font-size: 20px;

    color: #446f28;

    margin-bottom: 10px;

    font-weight: 600;

}



.feature-description {

    font-size: 14px;

    color: #666;

}



/* --------- O NÁS --------- */

.about-section {

    padding: 80px 0;

}



.about-container {

    display: flex;

    max-width: 1200px;

    margin: 0 auto;

}



.about-content {

    flex: 1;

    padding-right: 40px;

}



.about-title {

    color: #446f28;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;

}



.about-text {

    margin-bottom: 30px;

    line-height: 1.8;

}



.about-image {

    flex: 1;

}



.about-img {

    width: 100%;

    height: 400px;

    object-fit: cover;

    border-radius: 8px;

}



/* --------- VÝZVA K AKCI (CTA) --------- */

.cta-section {

    margin-top: 10rem;

    background-color: #71b238;

    padding: 60px 0;

    text-align: center;

    color: white;

}



.cta-title {

    font-size: 32px;

    margin-bottom: 20px;

    font-weight: 700;

}



.cta-text {

    font-size: 18px;

    margin-bottom: 30px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



/* --------- PATIČKA --------- */

.footer {

    background-color: #2c3e50;

    color: white;

    padding: 60px 0 30px;

}



.footer-content {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

}



.footer-column {

    width: 30%;

    margin-bottom: 30px;

}



.footer-column h3 {

    font-size: 20px;

    margin-bottom: 20px;

    font-weight: 600;

    position: relative;

    padding-bottom: 10px;

}



.footer-column h3:after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 50px;

    height: 2px;

    background-color: #71b238;

}



.footer-column p {

    margin-bottom: 10px;

    font-size: 14px;

    color: #bdc3c7;

}



.footer-column a {

    color: #bdc3c7;

    text-decoration: none;

    transition: all 0.3s ease;

}



.footer-column a:hover {

    color: #71b238;

    text-decoration: none;

}



#map {

    width: 100%;

    height: 200px;

    border-radius: 4px;

}



.footer-bottom {

    text-align: center;

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

    font-size: 14px;

    color: #bdc3c7;

    max-width: 1200px;

    margin: 30px auto 0;

    padding: 30px 15px 0;

}



/* --------- ZÁHLAVÍ STRÁNKY --------- */

.page-header {

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

    color: white;

    padding: 3rem 0;

    margin-top: 3rem;

    text-align: center;

}



.page-header h1 {

    font-size: 2.5rem;

    margin: 0;

}



/* --------- GALERIE --------- */

.gallery-section {

    padding: 4rem 0;

}



.bg-light {

    background-color: var(--light-gray);

}



.gallery-section .section-title {

    text-align: center;

    margin-bottom: 2rem;

    font-size: 1.75rem;

}



.gallery-slider {

    position: relative;

    margin-bottom: 2rem;

}



.gallery-slide {

    margin-top : 2rem;

    display: none;

}



.gallery-slide.active {

    display: block;

}



.gallery-grid {

    display: grid;

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

    gap: 1.5rem;

}



.gallery-item {

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: var(--shadow-light);

    transition: var(--transition-default);

}



.gallery-item:hover {

    transform: translateY(-0.3rem);

    box-shadow: var(--shadow-medium);

}



.gallery-item img {

    width: 100%;

    height: 15rem;

    object-fit: cover;

    display: block;

}



.gallery-navigation {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-top: 2rem;

}



.gallery-nav {

    width: 1rem;

    height: 1rem;

    border-radius: 50%;

    background-color: #ddd;

    border: none;

    cursor: pointer;

    transition: var(--transition-default);

    padding: 0;

}



.gallery-nav.active {

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

}



.gallery-nav:hover {

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

}



/* Styl pro kurzor na obrázcích */

.gallery-image {

    cursor: pointer;

}



/* --------- MODAL GALERIE --------- */

/* Modal (pozadí) */

.modal {

    display: none;

    position: fixed;

    z-index: 2000;

    padding-top: 3.125rem;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

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

}



/* Modal obsah */

.modal-content {

    position: relative;

    margin: auto;

    padding: 0;

    width: 90%;

    max-width: 75rem;

    height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Tlačítko pro zavření */

.modal-close {

    color: white;

    position: absolute;

    top: 0.625rem;

    right: 1.25rem;

    font-size: 2.25rem;

    font-weight: bold;

    cursor: pointer;

    z-index: 2001;

}



/* Slidy v modalu */

.modal-slides {

    width: 100%;

    height: 100%;

    position: relative;

}



.modal-slide {

    display: none;

    width: 100%;

    height: 100%;

    justify-content: center;

    align-items: center;

}



.modal-slide img {

    max-width: 100%;

    max-height: 90%;

    object-fit: contain;

}



/* Tlačítka pro navigaci */

.modal-prev, .modal-next {

    cursor: pointer;

    position: absolute;

    top: 50%;

    width: auto;

    padding: 1rem;

    margin-top: -3rem;

    color: white;

    font-weight: bold;

    font-size: 1.125rem;

    transition: 0.6s ease;

    user-select: none;

    -webkit-user-select: none;

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

    border-radius: 0.25rem;

}



.modal-next {

    right: 0;

    border-radius: 0.25rem;

}



.modal-prev {

    left: 0;

    border-radius: 0.25rem;

}



.modal-prev:hover, .modal-next:hover {

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

}



/* --------- KONTAKT --------- */

.contact-section {

    padding: 5rem 0;

    background-color: white;

}



.contact-container {

    display: flex;

    flex-wrap: wrap;

    gap: 3rem;

}



.contact-info, .contact-map {

    flex: 1;

    min-width: 18.75rem;

}



.contact-map {

    height: 25rem;

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: var(--shadow-light);

}



.contact-info h2 {

    color: var(--primary-color);

    margin-bottom: 2rem;

    font-size: 1.75rem;

}

.container > p {

    font-size: 1.5rem; /* Zvýšení velikosti písma */

    font-weight: bold; /* Tučné písmo */

    color: var(--primary-color); /* Použití primární barvy */

    margin-bottom: 1rem; /* Odsazení od galerie */

    text-align: center; /* Zarovnání na střed */

}

.contact-item {

    display: flex;

    margin-bottom: 1.5rem;

    align-items: flex-start;

}



.contact-item i {

    color: var(--primary-light);

    font-size: 1.25rem;

    margin-right: 1rem;

    margin-top: 0.25rem;

}



.contact-item h3 {

    font-size: 1.125rem;

    margin-bottom: 0.5rem;

    color: var(--secondary-color);

}



.contact-item p {

    margin: 0;

    font-size: 1rem;

    color: var(--text-color);

}



.contact-item a {

    color: var(--text-color);

    text-decoration: none;

    transition: var(--transition-default);

}



.contact-item a:hover {

    color: var(--primary-light);

}



.legal-info {

    margin-top: 2rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--border-color);

    font-size: 0.9rem;

    color: #666;

}



/* --------- DOPLŇKOVÁ SEKCE --------- */

.additional-section {

    padding: 4rem 0;

    background-color: var(--light-gray);

}



.additional-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

    gap: 2rem;

}



.additional-item {

    background-color: white;

    padding: 2rem;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-light);

    text-align: center;

    transition: var(--transition-default);

}



.additional-item:hover {

    transform: translateY(-0.3rem);

    box-shadow: var(--shadow-medium);

}



.additional-icon {

    font-size: 2.5rem;

    color: var(--primary-light);

    margin-bottom: 1rem;

}



.additional-item h3 {

    color: var(--primary-color);

    font-size: 1.25rem;

    margin-bottom: 1rem;

}



.additional-item p {

    margin-bottom: 0.5rem;

    font-size: 1rem;

}



.additional-item a {

    color: var(--primary-light);

    text-decoration: none;

    transition: var(--transition-default);

}



.additional-item a:hover {

    color: var(--primary-color);

    text-decoration: underline;

}

.additional-item img {



    height: 200px; /* Pevná výška obrázku */

    object-fit: cover; /* Zachování poměru stran a oříznutí přebytečných částí */

    border-radius: var(--border-radius); /* Volitelně zaoblení rohů */

}

/* --------- STRÁNKOVÁNÍ --------- */

.pagination {

    display: flex;

    justify-content: center;

    margin-top: 40px;

}



.page-dot {

    width: 12px;

    height: 12px;

    background-color: #ddd;

    border-radius: 50%;

    margin: 0 5px;

    cursor: pointer;

    transition: all 0.3s ease;

.gallery-info{

        font-size: 100px;

}

}

.page-dot.active {

    background-color: #71b238;

}

.section-title {

    color: var(--primary-color);

    font-size: 3rem;

    font-weight: 700;

    margin-bottom: 0.9375rem;

    text-align: center;

}

/* --------- RESPONSIVNÍ DESIGN --------- */

@media (max-width: 1200px) {

    .service-grid {

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

    }

}



@media (max-width: 992px) {

    .service-grid, .features-grid {

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

    }



    .about-container {

        flex-direction: column;

    }



    .about-content {

        padding-right: 0;

        margin-bottom: 30px;

    }

}



@media (max-width: 768px) {



    .hero-text {

        font-size: 28px;

    }



    .service-details {

        flex-direction: column;

    }



    .service-image, .service-info {

        width: 100%;

    }



    .service-grid, .features-grid {

        grid-template-columns: 1fr;

    }



    .footer-column {

        width: 100%;

    }



    .nav {

        position: relative;

    }



    .nav-icon {

        display: block;  /* Zobrazí se pouze na mobilních zařízeních */

    }



    .nav-menu {

        display: block;

        flex-direction: column;

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background-color: var(--light-gray);

        box-shadow: var(--shadow-light);

        text-align: left;

        z-index: 999;



        /* Výchozí stav - skryté menu */

        opacity: 0;

        transform: translateY(-20px);

        max-height: 0;

        overflow: hidden;

        padding: 0;

        pointer-events: none;

        transition: all 0.35s ease-out;

    }



    .nav-menu.nav-menu-active {

        opacity: 1;

        transform: translateY(0);

        max-height: 300px; /* Dostatečná výška pro zobrazení všech položek */

        padding: 1rem;

        pointer-events: all;

        transition: all 0.35s ease-in;

    }



    .nav li {

        opacity: 0;

        transform: translateY(-10px);

        transition: all 0.25s ease;

    }



    .nav-menu.nav-menu-active li {

        opacity: 1;

        transform: translateY(0);

    }



    /* Postupné zpoždění animace pro položky menu */

    .nav-menu.nav-menu-active li:nth-child(1) { transition-delay: 0.1s; }

    .nav-menu.nav-menu-active li:nth-child(2) { transition-delay: 0.15s; }

    .nav-menu.nav-menu-active li:nth-child(3) { transition-delay: 0.2s; }

    .nav-menu.nav-menu-active li:nth-child(4) { transition-delay: 0.25s; }







    .nav-menu-active {

        display: flex; /* Zobrazení při aktivaci */

    }



    .nav-toggle {

        display: block;



    }

    .nav-container {

        display: flex;

        justify-content: space-between;

        align-items: center;

        width: 100%;

    }

    .dropdown-content {

        position: static;

        width: 100%;

        box-shadow: none;

    }



    .hero {

        height: 400px;

    }



    .background {

        height: 400px;

    }

}



@media (max-width: 480px) {

    .service-detail-section,

    .benefits-section {

        padding: 2rem 0;

    }



    .service-info h3 {

        font-size: 1.3rem;

        margin-bottom: 1rem;

    }



    .service-list li {

        margin-bottom: 0.75rem;

    }



    .benefit-icon {

        font-size: 2rem;

    }



    .benefit-card h3 {

        font-size: 1.1rem;

    }

}