body {

  margin: 0;

  font-family: Arial, sans-serif;

  background-color: #f5f5f5;

  color: #333;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



.wrapper {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}



header.sticky-header {

  background-color: #000;

  color: #fff;

  padding: 1em 0;

  width: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1000;

}



.header-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  height: 40px;

}



nav a {

  color: #fff;

  text-decoration: none;

  margin-left: 1em;

}



main {

  padding: 6em 0 2em 0;

  flex: 1;

}



.hero, .contact {

  background-color: #fff;

  padding: 2em;

  border-radius: 8px;

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

  margin-bottom: 2em;

}



.gallery {

  background-color: #fff;

  padding: 2em;

  border-radius: 8px;

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

}



.gallery-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 1em;

  justify-content: flex-start;

}



.gallery-item {

  flex: 1 1 auto;

  max-width: calc(33% - 1em);

  transition: transform 0.3s ease;

  display: flex;

}



.gallery-item.large {

  flex-basis: calc(66% - 1em);

  max-width: calc(66% - 1em);

}



.navbar{

  display:flex;

  justify-content: space-between;

  align-items:center;

  padding:15px 40px;

}



.menu{

  list-style:none;

  display:flex;

  align-items:center;

  gap:25px;

}



.menu a{

  text-decoration:none;

  font-size:18px;

}

.gallery-item img {

  display: block;

  max-width: 100%;

  height: auto;

  object-fit: contain;

  border-radius: 6px;

  width: 100%;

}



.gallery-item:hover {

  transform: scale(1.05);

  z-index: 1;

}



.contact-content {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 2em;

}



.contact-image-right {

  width: 100%;

  max-width: 400px;

  border-radius: 8px;

}



.contact-info {

  flex: 1;

  min-width: 250px;

}



.contact-info p {

  margin: 0.5em 0;

}



footer {

  background-color: #eee;

  padding: 1em 0;

  text-align: center;

  font-size: 0.9em;

  color: #666;

  margin-top: auto;

}



/* Responzivita */

@media (max-width: 768px) {

  .gallery-item {

    max-width: 100%;

    flex-basis: 100%;

  }

  .gallery-item.large {

    max-width: 100%;

    flex-basis: 100%;

  }



  .header-content {

    flex-direction: column;

    align-items: flex-start;

  }



  nav a {

    margin-left: 0;

    margin-top: 0.5em;

  }



  .contact-content {

    flex-direction: column;

    align-items: center;

  }



  .contact-info {

    text-align: center;

  }



}