/* Základní barvy */
        :root {
            --hneda: #634e42;
            --bezova: #f9e3ca;
            --zelena: #616e2f;
            --svetle-zelena: #ecf4cb;
            --svetle-seda: #ebebeb;
            --tmave-seda: #424241;
        }
        
        /* Základní styly */
        body {
            font-family: 'basic-sans', Arial, sans-serif;
            color: var(--tmave-seda);
            margin: 0;
            padding: 0;
        }
                strong {
            font-weight: 900;
        }
                        i {
            font-style: italic;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'loslana-niu-pro', serif;
            font-weight: 700;
            color: var(--hneda);
        }
         .marg50 {
            margin-top: 50px;
        }
        
        /* Navigace */

.contact {
	width: 100%;
    font-family: 'basic-sans', Arial, sans-serif;
    height: 25px;
	line-height: 25px;
	margin-top: 0px;
    background: var(--svetle-seda);
	position: fixed;
	z-index: 998;
	font-size: 12px;
	font-weight: 500;
	color: #92908f;
}
.contact a{
	color: #92908f;
	text-decoration: underline;
}
.contact a:hover, .contact a.active{
	color: var(--zelena);
	text-decoration: none;
}
.contact img{
	height: 12px;
	margin-top: 5px;
	margin-left: 1em;
}

.eu-img img{
	max-width: 150px;
	margin-top: 25px;
	margin-left: 0px;
}
.eu-img a{
	text-decoration: underline;
	font-weight: 100;
}

        nav {
            background-color: white;
            box-shadow: none;
            height: 80px;
            margin-top: 25px;
        }
        
        nav .brand-logo {
            color: var(--zelena);
            padding: 10px 0;
        }
        
        nav ul a {
            color: var(--hneda);
            font-size: 16px;
            line-height: 20px;
            height: 80px;
            text-align: center;
            padding: 21px 30px;
            text-transform: uppercase;
            font-weight: 500;
        }
nav ul a.jedno {
            padding: 30px 30px;
        }
        
        nav ul a:hover {
            background-color: transparent;
            color: var(--zelena);
        }
nav ul li.active {
background: #FFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(97, 110, 47, 1) 90%, rgba(97, 110, 47, 1) 100%);
}
nav ul li.active a {
    color: var(--zelena);
    font-weight: 900;
}
        section a {
            color: var(--tmave-seda);
            font-weight: 900;
            text-decoration: underline;
        }
        
        section a:hover {
            color: var(--zelena);
        }
        a.sidenav-trigger img {
            width: 50px;
            margin-top: 20px;
        }
        .sac-hneda{
            background-color: var(--hneda) !important;
        }
        .sac-zelena{
            background-color: var(--zelena) !important;
        }
        .sac-bezova{
            background-color: var(--bezova) !important;
        }
        .sac-sv-seda{
            background-color: var(--svetle-seda) !important;
        }
        .sac-tm-seda{
            background-color: var(--tmave-seda) !important;
        }
        
        /* Hero sekce - parallax */
        .parallax-container {
            position: relative;
        }
        
        .hero-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 1;
        }
        
        .hero-overlay h1 {
            color: white;
            font-size: 48px;
            line-height: 66px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        /* Kategorie karty */
        .category-cards {
            margin-top: -50px;
            position: relative;
            z-index: 10;
        }
        .bg-category {
            background-image: url("../img/bg-aktivity.svg");
            background-size: auto 100%;
            background-position: bottom;
         }
        .category-card {
            padding: 30px;
            text-align: center;
            margin: 0 10px;
        }
        
        .category-card .circle-img img {
           width: 165px;
            height: 200px;
        }
        
        .category-card h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .category-card p {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        .card-blog {
    padding: 1em 2em;
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: left;
	background: rgba(255,255,255,0.85);
}
.card-blog.hoverable {
    padding: 1em 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: left;
    background: rgba(255, 255, 255, 0.85);
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
}
.card-blog.hoverable:hover{
    background: rgba(255,255,255,1);
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    	transition: all 0.5s ease;
}
.card-blog h3, .card-blog h3 a{
    color: var(--zelena);
	text-decoration: none;
}
.card-blog h2, .card-blog h2 a{
	color: var(--zelena);
	text-decoration: none;
}

.datum{
	color: #8C97A5;
}
.card-blog p {
    text-decoration: none;
	color: #4C5560;
	font-size: 120%;
}
.card-blog a {
    text-decoration: underline;
	color: var(--zelena);
}
        
        /* Tlačítka */
        .btn-brown {
            background-color: var(--hneda);
            color: white;
            padding: 10px 30px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        
        .btn-brown:hover {
            background-color: var(--svetle-seda);
            color: var(--tmave-seda);
        }

        .btn-green {
            background-color: var(--zelena);
            color: white;
            padding: 10px 30px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        
        .btn-green:hover {
            background-color: var(--svetle-seda);
            color: var(--tmave-seda);
        }

        .btn-dark {
            background-color: var(--tmave-seda);
            color: white;
            padding: 10px 30px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        
        .btn-dark:hover {
            background-color: var(--svetle-seda);
            color: var(--tmave-seda);
        }
        .btn-brown,
.btn-dark,
.btn-green,
.btn-dark,
.btn-brown {
  /* Přidáme plynulý přechod pro barvu pozadí a případně barvu textu */
  transition: background-color 0.5s ease, color 0.5s ease;
}
        
        /* O nás sekce */
        .about-section {
            background-color: var(--svetle-seda);
            background-image: url("../img/white-grey.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 80px 0;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-text h2 {
            font-size: 36px;
            margin-bottom: 30px;
        }
        
        .about-text p {
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .about-image {
            flex: 1;
        }
        
        .about-image img {
            width: 100%;
            border-radius: 10px;
        }
 
/* Video ovládací prvky */
.about-image {
    position: relative;
}

.video-controls {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.video-controls a {
    display: block;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.video-controls a:hover {
    background-color: rgba(255, 255, 255, 1);
}

.video-controls img {
    width: 24px;
    height: 24px;
    display: block;
}
        /* Aktivity sekce */
        .activities-section {
            background-color: var(--zelena);
            background-image: url("../img/grey-green.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 80px 0;
            position: relative;
            margin-top: -50px;
        }
        
        .activities-section h2 {
            color: white;
            text-align: center;
            font-size: 42px;
            margin-bottom: 20px;
        }
        
        .activities-section .subtitle {
            color: rgba(255,255,255,0.8);
            text-align: center;
            margin-bottom: 60px;
        }
        
        /* Ikony aktivit */
        .activity-icons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .activity-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .activity-icon:hover {
            transform: scale(1.1);
        }
        
        .activity-icon svg {
            width: 30px;
            height: 30px;
        }
        
        /* Slider aktivit */
        .activities-slider {
            position: relative;
            overflow: hidden;
            margin: 0 -60px;
            padding: 0 60px;
        }
        
        .activities-track {
            display: flex;
            transition: transform 0.3s ease;
        }
        
        .activity-card {
            min-width: 350px;
            margin: 0 20px;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .activity-card-image {
            position: relative;
            height: 200px;
        }
        
        .activity-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .activity-card-icon {
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .activity-card-content {
            padding: 50px 30px 30px;
            text-align: center;
        }
        
        .activity-card h4 {
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .activity-card p {
            font-size: 14px;
            line-height: 1.6;
            color: var(--tmave-seda);
            margin-bottom: 20px;
        }
        
        .activity-card .more-link {
            color: var(--zelena);
            text-decoration: none;
            font-weight: 600;
        }
        
        /* Slider navigace */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 10;
        }
        
        .slider-nav.prev {
            left: 20px;
        }
        
        .slider-nav.next {
            right: 20px;
        }

        /* Strelnice sekce */
        .strelnice-section {
            background-color: var(--bezova);
            background-image: url("../img/green-beige.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 80px 0;
        }
        
        .strelnice-section h2 {
            text-align: center;
            font-size: 42px;
            margin-bottom: 50px;
        }
.strelnice-section h3 {
            text-align: left;
            font-size: 25px;
        }
.strelnice-section h4 {
            text-align: left;
            font-size: 22px;
        }
.strelnice-section ul {
  list-style: none;
  padding-left: 0;
}

.strelnice-section ul li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.4em;
}

.strelnice-section ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--zelena);
  font-weight: bold;
}
        


        /* Novinky sekce */
        .news-section {
            background-color: var(--svetle-seda);
            background-image: url("../img/beige-light.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 80px 0;
        }
        
        .news-section h2 {
            text-align: center;
            font-size: 42px;
            margin-bottom: 50px;
        }
        
        .news-card {
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .news-card h3 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .news-date {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .news-card p {
            line-height: 1.8;
            margin-bottom: 20px;
        }

 /* Bar sekce */
        .bar-section {
            background-color: var(--hneda);
            background-image: url("../img/beige-brown.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            color: var(--svetle-seda);
            padding: 80px 0;
        }
        
        .bar-section h2 {
            text-align: center;
            font-size: 42px;
            margin-bottom: 50px;
             color: var(--svetle-seda);
        }


        /* Galerie sekce */
        .gallery-section {
            background-color: var(--tmave-seda);
            background-image: url("../img/brown-dark.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 80px 0;
        }
        
        .gallery-section h2 {
            text-align: center;
            font-size: 42px;
            margin-bottom: 50px;
            color:  var(--svetle-seda);
        }
.cards-container .card {background: transparent;}
        
        /* Footer */
        footer {
            background-color: var(--hneda);
            color: white;
            padding: 50px 0;
        }
        
        footer h5 {
            color: white;
            font-size: 18px;
            margin-bottom: 20px;
        }
        
        footer p, footer a {
            color: rgba(255,255,255,0.8);
            font-size: 14px;
            line-height: 1.8;
        }
        
        footer a:hover {
            color: white;
        }
.up {
    width: 50px;
    height: 50px;
    display: block;
    background: url(../img/up.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-left: -10px;
    position: absolute;
}
	.up:hover {
		filter: blur(1px);
}
/* Inline styly převedené do CSS tříd */

/* Logo v navigaci */
.brand-logo img {
    height: 60px;
}

/* Centrované odsazení - různé velikosti */
.center-margin-50 {
    margin-top: 50px;
}

.center-margin-40 {
    margin-top: 40px;
}

.center-margin-30 {
    margin-top: 30px;
}

/* Více link v novinkách */
.more-link {
    color: var(--zelena);
    font-weight: 600;
}

/* Footer text */
.footer-powered {
    font-size: 12px;
}

/* Footer logo */
.footer-powered img {
    height: 40px;
    vertical-align: middle;
    margin-left: 10px;
}

        /* Univerzalni sekce */
        .white-grey {
            background-color: var(--svetle-seda);
            background-image: url("../img/white-grey.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
        .white-dark {
            background-color: var(--tmave-seda);
            background-image: url("../img/white-dark.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
        .dark-grey {
            background-color: var(--svetle-seda);
            background-image: url("../img/dark-grey.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
        .grey-green {
            background-color: var(--zelena);
            background-image: url("../img/grey-green.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
        .grey-green h2, .grey-green h3, .grey-green h4 {
            color:  var(--svetle-zelena);
        }
        .grey-green p {
            color: white;
        }
        .grey-green .event-card h2, .grey-green .event-card h3 {
            color:  var(--zelena);
        }
        .grey-green .event-card p {
            color: var(--tmave-seda);
        }
        .green-beige {
            background-color: var(--bezova);
            background-image: url("../img/green-beige.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
                .beige-dark {
            background-color: var(--tmave-seda);
            background-image: url("../img/beige-dark.svg");
            background-size: 100% auto;
            background-position: top;
            background-repeat: no-repeat;
            padding: 60px 0;
        }
                        .perex {
            padding-top: 2em;
        }
                .perex p {
            font-size: 120%;
        }
        .subpage h2 {
            font-size: 3em;
        }
        .subpage h3 {
            font-size: 2em;
        }
                .subpage h4 {
            font-size: 1.5em;
        }
        .activity-block {
  margin-bottom: 30px;
    padding-top: 30px;
  border-bottom: 1px dotted var(--svetle-zelena);
}

.activity-image {
  text-align: center;
  padding: 20px;
}

.activity-block h3 {
  font-size: 2em;
  margin-top: 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-block h3 img.icon {
  width: 40px;
  height: 40px;
}
        .event-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            padding: 1em;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 2em;
        }
        .event-card ul li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.5em;
}

.event-card ul li::before {
  content: "—";
  position: absolute;
  left: 1em;
  color: var(--hneda);
}
.event-card ul ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
}

.event-card ul ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--svetle-seda);
}


                /* Responzivní design */
        @media (max-width: 1600px) {
        nav ul a {
            font-size: 16px;
            line-height: 20px;
            padding: 21px 20px;
        }
nav ul a.jedno {
            padding: 30px 20px;
        }
}
        @media (max-width: 1400px) {
        nav ul a {
            font-size: 15px;
            line-height: 20px;
            padding: 21px 20px;
        }
nav ul a.jedno {
            padding: 30px 20px;
        }
                    .hero-overlay h1 {
            font-size: 40px;
            line-height: 55px;
        }
}
        @media (max-width: 1300px) {
        nav ul a {
            font-size: 14px;
            line-height: 18px;
            padding: 23px 15px;
        }
nav ul a.jedno {
            padding: 30px 15px;
        }
}
        @media (max-width: 1150px) {
        nav ul a {
            font-size: 13px;
            line-height: 16px;
            padding: 25px 15px;
        }
nav ul a.jedno {
            padding: 33px 15px;
        }
                                .hero-overlay h1 {
            font-size: 33px;
            line-height: 50px;
        }
}
        @media (max-width: 1100px) {
        nav ul a {
            font-size: 13px;
            line-height: 16px;
            padding: 25px 13px;
        }
nav ul a.jedno {
            padding: 33px 13px;
        }
}
        @media (max-width: 1050px) {
        nav ul a {
            font-size: 13px;
            line-height: 16px;
            padding: 25px 10px;
        }
nav ul a.jedno {
            padding: 33px 10px;
        }
}
        @media (max-width: 992px) {
        nav {
            margin-top: 0;
        }
}
        @media (max-width: 768px) {
            .category-cards {
                margin-top: -30px;
            }
            
            .category-card {
                margin-bottom: 20px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .activity-card {
                min-width: 280px;
            }
                .video-controls {
        bottom: 10px;
        right: 10px;
        gap: 8px;
    }
    
    .video-control-btn {
        width: 40px;
        height: 40px;
    }
    
    .video-control-btn i {
        font-size: 20px;
    }
            .activities-slider {
            position: relative;
            overflow: hidden;
            margin: 0 -15px;
            padding: 0 15px;
        }
        }
        @media (max-width: 600px) {
            .up {
    margin-top: 60px;
    margin-left: 0px;
}   
        }