@charset "UTF-8";
.burger {
  display: none;
  /* Position the content inside the overlay */
  /* The navigation links inside the overlay */
  /* When you mouse over the navigation links, change their color */
  /* Position the close button (top right corner) */
  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
}
.burger .overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 3;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: black;
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.97);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.burger .overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  z-index: 3;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.burger .overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}
.burger .overlay a:hover, .burger .overlay a:focus {
  color: orange;
}
.burger .overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
@media screen and (max-height: 450px) {
  .burger .overlay a {
    font-size: 20px;
  }
  .burger .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

body {
  font-family: "Miriam Libre", sans-serif;
  background-color: #C5D6D2;
  margin: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

header {
  height: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 40px 80px 0 8%;
}
header span {
  z-index: 2;
  margin-right: auto;
  margin-top: 20px;
  font-weight: normal;
  font-size: x-large;
}
header nav a {
  font-weight: bold;
  color: #5E887E;
  margin: 0 40px 0 40px;
  text-decoration: none;
  color: black;
  font-size: larger;
}
header nav a:hover {
  color: #caba9a;
}

.index {
  max-width: 100vw;
  height: 100vh;
}

.texty {
  width: 92%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin: 8%;
  color: black;
}
.texty h1 {
  font-size: 50px;
  font-weight: 700;
}
.texty ul {
  list-style: none;
  padding: 0;
}
.texty ul li {
  font-weight: 700;
  font-size: 20px;
}
.texty p {
  font-size: 20px;
}

.kvet {
  height: 100%;
  position: absolute;
  right: 0;
}

.kvet2 {
  height: 200%;
  position: absolute;
  left: 0;
  z-index: -1;
  transform: rotate(70deg);
}

.hnedapodklad img {
  width: 80vw;
  position: absolute;
  z-index: 1;
  top: -350px;
  left: -350px;
}

.sluzby .balicky, .ponuka .balicky {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.sluzby .balicky .b1, .sluzby .balicky .b2, .sluzby .balicky .b3, .sluzby .balicky .b4, .ponuka .balicky .b1, .ponuka .balicky .b2, .ponuka .balicky .b3, .ponuka .balicky .b4 {
  width: 280px;
  height: 380px;
  background-color: #5E887E;
  border-radius: 30px;
}
.sluzby .balicky .b1 h1, .sluzby .balicky .b2 h1, .sluzby .balicky .b3 h1, .sluzby .balicky .b4 h1, .ponuka .balicky .b1 h1, .ponuka .balicky .b2 h1, .ponuka .balicky .b3 h1, .ponuka .balicky .b4 h1 {
  margin: 30px auto auto auto;
  text-align: center;
  color: white;
}
.sluzby .balicky .b1 li, .sluzby .balicky .b2 li, .sluzby .balicky .b3 li, .sluzby .balicky .b4 li, .ponuka .balicky .b1 li, .ponuka .balicky .b2 li, .ponuka .balicky .b3 li, .ponuka .balicky .b4 li {
  max-width: 80%;
  font-size: 12px;
  margin-left: 15px;
  color: white;
}
.sluzby .b11, .sluzby .b22, .sluzby .b33, .sluzby .b44, .ponuka .b11, .ponuka .b22, .ponuka .b33, .ponuka .b44 {
  width: 150px;
  height: 60px;
  background-color: #465754;
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
}
.sluzby .b11 span, .sluzby .b22 span, .sluzby .b33 span, .sluzby .b44 span, .ponuka .b11 span, .ponuka .b22 span, .ponuka .b33 span, .ponuka .b44 span {
  color: white;
  font-size: 12px;
}
.sluzby .b11 h2, .sluzby .b22 h2, .sluzby .b33 h2, .sluzby .b44 h2, .ponuka .b11 h2, .ponuka .b22 h2, .ponuka .b33 h2, .ponuka .b44 h2 {
  padding-top: 15px;
  text-align: center;
  font-size: 20px;
  color: white;
  line-height: 15px;
}
.sluzby .b11, .ponuka .b11 {
  margin-top: 100px;
}
.sluzby .b22, .ponuka .b22 {
  margin-top: 100px;
}
.sluzby .b33, .ponuka .b33 {
  margin-top: 65px;
}
.sluzby .b44, .ponuka .b44 {
  margin-top: 65px;
}
.sluzby .b11ô, .sluzby .b22ô, .sluzby .b33ô, .sluzby .b44ô, .ponuka .b11ô, .ponuka .b22ô, .ponuka .b33ô, .ponuka .b44ô {
  width: 150px;
  height: 60px;
  background-color: #465754;
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
}
.sluzby .b11ô span, .sluzby .b22ô span, .sluzby .b33ô span, .sluzby .b44ô span, .ponuka .b11ô span, .ponuka .b22ô span, .ponuka .b33ô span, .ponuka .b44ô span {
  color: white;
  font-size: 10px;
}
.sluzby .b11ô h3, .sluzby .b22ô h3, .sluzby .b33ô h3, .sluzby .b44ô h3, .ponuka .b11ô h3, .ponuka .b22ô h3, .ponuka .b33ô h3, .ponuka .b44ô h3 {
  padding-top: 15px;
  text-align: center;
  font-size: 15px;
  color: white;
  line-height: 15px;
}
.sluzby .b11ô, .ponuka .b11ô {
  margin-top: 150px;
}
.sluzby .b22ô, .ponuka .b22ô {
  margin-top: 55px;
}
.sluzby .b33ô, .ponuka .b33ô {
  margin-top: 93px;
}
.sluzby .b44ô, .ponuka .b44ô {
  margin-top: 110px;
}
@media screen and (max-width: 1200px) {
  .sluzby .b1, .sluzby .b2, .sluzby .b3, .sluzby .b4, .ponuka .b1, .ponuka .b2, .ponuka .b3, .ponuka .b4 {
    margin-top: 30px;
  }
}

.txtpolicko {
  height: 40px;
  width: fit-content;
  background-color: #5E887E;
  margin: 30px;
  border-radius: 30px;
  text-align: center;
  color: white;
  padding: 20px 10px 10px 10px;
}

.acko {
  text-align: center;
}

.txtflex {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kontaktpolicko {
  height: 40px;
  width: fit-content;
  background-color: #465754;
  margin: 20px;
  padding: 15px;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.kontakt .kontaktpole {
  width: 50vw;
  height: fit-content;
  border-radius: 30px;
  background-color: #5E887E;
  margin: 100px;
  float: right;
  color: white;
  padding: 30px 0 0 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.kontakt .kontaktpole h1, .kontakt .kontaktpole a {
  margin-top: 15px;
  margin-bottom: 0;
  text-decoration: none;
  color: white;
}

@media screen and (max-width: 975px) {
  .burger {
    display: block;
    position: absolute;
    right: 0;
    margin-right: 50px;
  }

  nav {
    display: none;
  }

  .kvet, .kvet2 {
    display: none;
  }

  .kontakt .kontaktpole {
    width: 60vw;
    margin: 0 auto;
    float: none;
    margin-bottom: 20px;
  }
}
.swiper {
  margin-top: 80px;
  margin-bottom: 80px;
  width: 65%;
}

.myworks {
  display: flex;
  align-items: center;
  position: relative;
}

.swiper-slide img:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.ikonky a svg {
  color: white;
  margin: 20px 20px 20px 0px;
}
.ikonky a svg :hover {
  color: black;
  transition: color 0.5s;
}

/*# sourceMappingURL=index.css.map */