@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}



html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background:#F9F9F9 ;
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: 16px Poppins;
    background: #F9F9F9;
    min-height: 100vh;

    
    }



article h1 {
  font-size: 1.8em;
  font-weight: bold;
  color: #000000;
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
  text-decoration-color: #40826D;
  text-align: center;
  text-transform: uppercase;
}

article h2 {
  font-size: 1.4em;
  color: #F9F9F9;
  text-align: center;
}

article h3 {
  font-size: 1.4em;
  color: #000000;
}



#sluzby, #mapka, #omne, #reference, #galerie {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 25px;
}



#mapka {
  padding-top: 25px;
  padding-bottom: 25px;
}

#kontakt {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: left;
}

.icon1, .icon2, .icon3, .icon4 {
vertical-align: middle;
padding-right: 25px;
text-align: left;
height: 24px;
} 


#s1 {
  padding-right: 25px;
  
}

strong {
  vertical-align: middle;
  margin-left: 3px
}


#kontakt a, #kontakt a:visited {
  color: #000000;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: normal;
  border-bottom: 2px solid #40826D;
}


#back {
  background-image: url('back.avif');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;

  background-position: center;
  min-height: 400px; 
}

#uvod h1 {
  color: #f9f9f9;
  font-weight: bold;
  text-decoration: none;
  font-size: 2.5em;
  text-align: center;
  border: 2px;
  padding: 5px;
  text-shadow: 2px 2px rgba(8, 143, 143);
  /*background-color: rgba(8, 143, 143,0.6); /* blur cerny */
}

#container-u {
  max-width: 600px;
  margin: 0 auto;
  
}

#omne {
  background-color: rgba(249, 249, 249, 0.8); /* alpha = blur  */
  max-width: 600px;
  margin: 0 auto;
  border-radius: 10px 10px 0px 0px;
}

#reference, #galerie {
  max-width: 600px;
  margin: 0 auto;
}

#omne, #reference, #galerie, #kontakt, #mapka {
  margin-bottom: 25px;
}


#reference p, #omne p {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  
}


.sluzby-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 25px;
    row-gap: 20px;
    padding-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
}

#sluzby .container {
    border: 2px;
    border-radius: 10px;
    text-align: center;
    background-color: rgba(8, 143, 143,0.8); /* blur  */
    color: #F9F9F9;
    font-size: 1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;

  }
  
  .div1 { grid-area: 1 / 1 / 3 / 2; }
  .div2 { grid-area: 1 / 2 / 2 / 3; }
  .div3 { grid-area: 2 / 2 / 3 / 3; }
  .div4 { grid-area: 3 / 1 / 4 / 2; }
  .div5 { grid-area: 4 / 1 / 5 / 2; }
  .div6 { grid-area: 3 / 2 / 4 / 3; }
  .div7 { grid-area: 4 / 2 / 5 / 3; }



.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.gal img:hover {
  transition: transform .2s;
  transform: scale(1.01);
 
}

#galerie {
  padding-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  #galerie {
    padding-left: 10px;
    padding-right: 10px;
  }
}



  /*nav*/
#logo {
    
    flex-direction: column;
    justify-content: center;
    display: flex;
    /*background: url('') no-repeat;*/
    /*background-size: 100px 100px ;*/
    vertical-align: text-bottom;
}


#logo > * {
    margin: 0 0 0 0px;
}

#logo h1, #logo h2 {
    text-align: left;
}



#logo h1 {
    font-size: 1.6em;
    line-height: 1.0em;
    font-weight: 500;

    margin: auto 0 auto 0;
    /*opacity: 0.9;*/
    color: #F9F9F9;
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
    text-decoration-color: #F9F9F9;
}


#logo h2 {
    font-size: 1.2em;
    text-transform: uppercase;
    color: #F9F9F9;
    font-weight: normal;
    padding-top: 5px;
    /*mix-blend-mode:luminosity;*/

    /*opacity: 0.9;*/
    
}


  nav {
    background-color: rgba(95, 158, 160, 0.8);
    color: #F9F9F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: auto;
   
  }  

  
  nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  nav ul li {
    margin-right: 20px;
  }
  
  nav ul li a {
    color: #F9F9F9;
    text-decoration: none;
    transition: color 0.3s;
    font-weight: normal;
  }
  
  nav ul li a:hover, .active a, .active {
    border-bottom: 5px solid #F9F9F9;;
  }
  
  .checkbtn {
    font-size: 25px;
    color: #F9F9F9;
    cursor: pointer;
    display: none;
  }

  .kontakt-tlacitko {
    background: #F9F9F9;
    padding: 10px 20px;
    border-radius: 15px;
    font-weight: bold;
    color: rgba(95, 158, 160, 0.8);
}

.kontakt-tlacitko:hover {
    filter: brightness(115%) contrast(50%);
    border: 0;
}
  
  #check {
    display: none;
  }
  
  @media (max-width: 768px) {
    .checkbtn {
      display: block;
      order: 1;
      margin-right: 20px;
    }
  
    nav ul {
      position: fixed;
      top: 80px;
      right: -100%;
      background-color: rgba(95, 158, 160, 0.9);
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      z-index: 2;
      
    }
  
    nav ul li {
      margin: 20px 0;
    }
  
    nav ul li a {
      font-size: 16px;
    }
  
    #check:checked ~ ul {
      right: 0;
    }
  }



  footer {
    
    box-sizing: border-box;
    text-align: center;
    height: 50px;
    background: #088F8F;
    padding-top: 15px;
    color: #000000;
    opacity: 0.7;
    

    position: sticky;
    top: 100vh;
}

  footer a, footer a:visited {
    text-decoration: none;
    color: #000000;
   
    
  }


footer .icon2 {
  vertical-align: middle;
  padding-right: 0px;
  padding-left: 10px;
  text-align: left;
  }