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


/**** reusable ****/

.row {
   width: 1140px;
   margin: 0 auto;
}

h2 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 2rem;
   letter-spacing: 0.05rem;
}

h3 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 1.2rem;
}

p {
   font-family: Arial, Helvetica, sans-serif;
}

a {
   color: #007BFF;   
}


/****** header ******/

header {
   position: relative;
   height: 100vh;
   overflow: hidden;
}

.bg-home {
   width: 100%;
   height: 100%;   
}

.bg-home::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url(../img/bg1.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform 3s ease-in-out;
   filter: brightness(50%); 
}

.bg-home.zoomed::before {
   animation: zoomIn 3s forwards;
}


/* Navigace */
.nav-bar {
   position: absolute;
   top: 20px; 
   right: 20px; 
   /* background: rgba(0, 0, 0, 0.5);
   padding: 10px 20px;
   border-radius: 5px; */
}

.nav-bar ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
}

.nav-bar ul li {
   margin: 0 10px;
}

.nav-bar ul li a {
   color: #fff;
   text-decoration: none;
   font-family: Arial, sans-serif;
   font-size: 16px;
   font-weight: bold;
   transition: color 0.3s;
}

.nav-bar ul li a:hover {
   color: #00aaff;
}

/* Nadpis */
.bg-home h1 {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 5rem;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
   text-align: center;
}

/* Responzivita */
@media (max-width: 768px) {
   .nav-bar {
       top: 10px;
       right: 10px;
       padding: 5px 10px;
   }

   .nav-bar ul li a {
       font-size: 14px;
   }

   .bg-home h1 {
       font-size: 3rem;
   }
}
/************************************/


/*
.bg-home {   
   overflow: hidden;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.bg-home::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url(../img/bg1.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform 3s ease-in-out;
   filter: brightness(70%); 
}

.bg-home.zoomed::before {
   animation: zoomIn 3s forwards;
}

.bg-home h1 {
   position: absolute;
   z-index: 1;
   top: 35%;
   font-size: 5rem;
   font-family: Georgia, 'Times New Roman', Times, serif ;
   color: #fff;
   letter-spacing: 0.2rem;
   text-align: center;   
} 

*/


/****** main ******/

#container {
   max-width: 90rem;
   width: 100%;
   margin: 0 auto;   
}

.description {
   max-width: 75rem;
   margin: 0 auto;
}

.text {
   margin: 3rem;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.1rem;
   text-align: justify;
   line-height: 1.7rem;
}

.links {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;    
   gap: 1rem;
   margin-top: 5rem;
}

.image-link {
   position: relative;
   width: 23%;  
   max-width: 400px; 
   height: auto;
}

.image-link a {
   text-decoration: none;
}

.image-link img {    
   width: 100%; 
   height: auto;
   /* height: 100%;   */
   /* object-fit: cover; */
   /* display: block;  
   margin: 0 auto;   */
}

.pswp__img {
   object-fit: contain;  
   max-width: 100%;
   /* max-height: auto; */
}

/* .pswp__button--arrow--left, .pswp__button--arrow--right {
   z-index: 1000;   Zajistí, že budou nad ostatními prvky
 } */

.overlay {
   position: relative;
}

.overlay img {
   width: 100%;
   display: block;
   filter: brightness(50%); 
}

.overlay img:hover,
.overlay img:active {   
   filter: brightness(80%); 
   transition: filter 0.5s ease;   
}

.windows {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   color: white;
   font-size: 30px;
   font-weight: bold;
   letter-spacing: 0.3rem;
   text-align: center;
   padding: 10px;
}

.icons {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center; 
   margin-top: 2rem;
   text-align: center;
}

.icon img {
   max-width: 5rem;
   margin: 4rem 7rem 0.5rem 7rem;   
}


/****** footer *******/

footer {
   background-color: #221e1e;
   color: #34495e;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   padding: 40px 20px;
   text-align: center;
}
 
.footer-content {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;   
   max-width: 1200px;
   margin: 0 auto;
   /* gap: 10px; */
}
 
.footer-section {
   flex: 1 1 300px;
   margin-bottom: 20px;
}
 
.footer-section h3 {
   color: #34495e;
   font-weight: 300;
   border-bottom: 2px solid #34495e;
   padding-bottom: 5px;
}
 
.footer-section p {
   margin-top: 10px;
   font-size: 14px;
   color: #7f8c8d;
   /* line-height: 1.5; */
}

.footer-section a {
   text-decoration: none;
   display: inline-block;
   margin-top: 10px;
   font-size: 14px;
   color: #7f8c8d;   
}
 
.footer-section ul {
   list-style: none;
   padding: 0;
}
 
.footer-section ul li a {  
   text-decoration: none;
   margin-top: 10px;
   font-size: 14px;
   color: #7f8c8d;
}
 
.social-icons {
   display: flex;
   flex-direction: column;     
   list-style: none;
   padding: 0;
}
 
.social-icons li {
   display: inline-block;
   /* margin-right: 10px; */
}
 
.social-icons li img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
 
.footer-bottom {
   margin-top: 40px;
   font-size: 12px;
   color: #7f8c8d;
}




/****** okoli.html ******/

.bg-okoli {   
   overflow: hidden;
   min-height: 50vh;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.bg-okoli::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url(../img/trip/kravy.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   transition: transform 5s ease-in-out;
   /* filter: brightness(70%);  */
}

.bg-okoli.zoomed::before {
   animation: zoomIn 5s forwards;
}

.trips {
   max-width: 1140px;
   margin: 0 auto;
   position: relative;
   bottom: clamp(5rem, 40vh, 22rem);   
   margin-bottom: -10rem;      
}

.trip_text {
   margin-bottom: 2rem;
   padding: 1rem;
}

.trip_text h2 {
   margin-bottom: 1rem;
}

.trip_text p {
   font-size: 1.2rem;
   line-height: 1.6;
   text-align: justify;
   padding: 1rem;
}

.gallery {
   display: flex;
   flex-direction: column;
   /* gap: 2rem; */
   /* padding: 1.2rem; */
}

.row_trip {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   /* gap: 1rem;  */
}

.photo {
   margin: 1rem;
}

.photo img {
   width: 100%;
   height: auto;   
}   

.description {
   font-size: 1rem;
   line-height: 1.6;
   /* text-align: justify; */
   padding: 2rem 1rem 1rem 1rem;
}



/* Keyframes */

@keyframes zoomIn {
   from {
       transform: scale(1.4); /* Přiblížená velikost na začátku animace */
   }
   to {
       transform: scale(1); /* Nastavení původní velikosti na konci animace */
   }
}


/* @keyframes rotate {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(-360deg);
   }
} */