@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap');

  html{
      scroll-behavior: smooth;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'DM Sans', sans-serif;
  }

  body {
      padding-top: 0px;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-direction: column;
      
  }


  /* NAVBAR */
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 10rem;

    background: none;
    backdrop-filter: blur(10px);

    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  /* Navbar po scrollovaní */
  .navbar.scrolled {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  /* LOGO */
  .ano{
    width: 60px;
  }

  .nie{
      width: 60px;
      display: none;
  }

  .navbar.scrolled .nie {
    color: #111;
    display: block;
  }

  .navbar.scrolled .ano{
      display: none;
  }

  /* NAV LINKS */
  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-links a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: #15a308;
  }


  .navbar.scrolled .nav-links a {
    color: #111;
  }

  .navbar.scrolled .nav-links a:hover {
    color: #15a308;
  }

  /* HAMBURGER (TVÔJ KÓD) */
  .icon-menu {
    --gap: 5px;
    --height-bar: 2.5px;
    --pos-y-bar-one: 0;
    --pos-y-bar-three: 0;
    --scale-bar: 1;
    --rotate-bar-one: 0;
    --rotate-bar-three: 0;

    width: 25px;
    display: none;
    flex-direction: column;
    gap: var(--gap);
    cursor: pointer;
  }

  .bar {
    height: var(--height-bar);
    width: 100%;
    border-radius: .5rem;
    background-color: #9941fc;
    transition: background-color 0.3s;
  }

  .navbar.scrolled .bar {
    background-color: #111;
  }

  .bar--1 {
    top: var(--pos-y-bar-one);
    transform: rotate(var(--rotate-bar-one));
    transition: top 200ms 100ms, transform 100ms;
  }

  .bar--2 {
    transform: scaleX(var(--scale-bar));
    transition: transform 150ms 100ms;
  }

  .bar--3 {
    bottom: var(--pos-y-bar-three);
    transform: rotate(var(--rotate-bar-three));
    transition: bottom 200ms 100ms, transform 100ms;
  }

  .check-icon:checked + .icon-menu {
    --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
    --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
    --scale-bar: 0;
    --rotate-bar-one: 45deg;
    --rotate-bar-three: -45deg;
  }

 .hero-sekcia{
    width: 100%;
    height: 100vh;
    
    background-image: url(tgnb.png);
    background-position: center;
    background-size: cover;
    
  }

  .hlavicka{
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    gap: 10px;
    position: relative;
  }

  .sezona{
      padding: 15px 25px;
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 10px;
      border-radius: 30px;
  }

  .sezona p{
      font-size: 14px;
      color: #ffffff;
      font-weight: 600;
  }

  .bodka{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #1dff09;
  }

  .nadpis{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
  }

  .nefarba{
      font-size: 100px;
      color: #ffffff;
      font-weight: bold;
  }

  .farba{
      color: #15a308;
      font-size: 100px;
      font-weight: bold;
  }

  .podnadpis{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
  }

  .podnadpis h2{
      font-size: 20px;
      color: #ffffffe5;
      font-weight: 200;
  }

  .buttony{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 10px;
  }

  .btn{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 17px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn:hover{
      background: none;
      color: #15a308;
  }

  .btn-2{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #ffffff;
      background-color: #ffffff;
      color: #000000;
      font-size: 17px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn-2:hover{
      background: none;
      color: #ffffff;
  }

  

  
     .scroll-down i{
    position: absolute;
    transform: translateX(-50%);
    font-size: 2rem;
    color: white;
    animation: bounce 1.5s infinite;
  }
 

  .onas-sekcia{
      width: 100%;
      min-height: 70vh;
      height: auto;
      background-color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 30px;
  }

  .onas-lava{
      width: 30%;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: column;
  }

  .onas-prava{
      width: 35%;
      padding: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
  }

  .onas{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
  }

  .onas h2{
      font-size: 16px;
      font-weight: 500;
      color: #0e310b;
  }

  .onas-nadpis{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 10px;
  }

  .nn{
      font-size: 50px;
      color: #000000;
      font-weight: 600;
  }

  .jj{
      font-size: 50px;
      color: #15a308;
      font-weight: 600;
  }

  .onas-text{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      line-height: 1.5;
  }

  .onas-text p{
      font-size: 17px;
      color: #000000b2;
    
  }

  .onas-btn{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
  }

  .onas-btn button{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .onas-btn button:hover{
      background: none;
      color: #15a308;
  }

  .talenty{
      width: 50%;
      height: 200px;
      padding: 20px 20px;
      background-color: #fcfcfc;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: column;
      gap: 15px;
      box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.08);
  }

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

  .ikona{

      padding: 10px 12px;
      background-color: #bae7e1;
      border-radius: 15px;
  }

  .ikona i{
      color: #15a308;
      font-size: 20px;
  }

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

  .talenty-nadpis h1{
      font-size: 18px;
  }

  .talenty-text{
      line-height: 1.5;
  }

  .talenty-text p{
      font-size: 14.5px;
      color: #000000b2;
  }

   .talenty-text .plis{
      font-size: 14.5px;
      color: #000000b2;
  }

  .tim-sekcia{
      width: 100%;
      min-height: 120vh;
      height: auto;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

  }

  .cele{
    flex-direction: column;
    height: 90%;
      padding: 20px 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 50px;
  }

  .cele-hlavicka{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 20px;
  }

  .nas-tim{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nas-tim h2{
    font-size: 16px;
      font-weight: 500;
      color: #15a308;
  }

  .tim-nadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tim-nadpis h1{
    font-size: 50px;
      color: #000000;
      font-weight: 600;
  }

  .tim-podnadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tim-podnadpis p{
    font-size: 17px;
      color: #000000b2;
  }

  .bloky{
      padding: 20px 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 50px;
  }

  .card {
    width: 400px;
    padding-bottom: 20px;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }


  .img-wrapper {
    width: 100%;
    height: 75%; /* 3/4 výšky */
    position: relative;
    overflow: hidden;
  }

  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .img-wrapper:hover img{
    transform: scale(1.1);
    cursor: pointer;
  }

  /* ikony */
  .icons {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
  
  }

  .img-wrapper:hover .icons {
    opacity: 1;
    cursor: pointer;
  }

  .icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #000;
    
  }

  .icons a{
    text-decoration: none;
  }

  /* text + button */
  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.5;
  }

  .text {
    margin: 0;
    font-size: 16px;
    color: #333;
    
  }

  .cidlo{
    padding-left: 20px;
  }


  .btn-card{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn-card:hover{
      background: none;
      color: #15a308;
  }

  .content-mini{
    font-size: 12px;
      font-weight: 500;
      color: #15a308;
  }

  .meno{
    font-size: 30px;
    color: #000;
  }

  .videa-sekcia{
    width: 100%;
    min-height: 145vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .videa-cele{
    padding: 20px 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
  }

  .videa-hore{
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .videa-dole{
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 17px;
  }

  .cele-vid{
    flex-direction: column;
    height: 90%;
      padding: 20px 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 20px;
  }

  .video-wrapper {
      position:relative;
      width:1000px;
      height:550px;
      border-radius:30px;
      overflow:hidden;
  }

  video {
      width:100%;
      height:100%;
      object-fit:cover;
  }

  /* Overlay */
  .overlay {
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.4);
      display:flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;
      transition:.3s;
  }

  .overlay.hidden {
      opacity:0;
      pointer-events:none;
  }

  /* Play button */
  .play-button {
      width:90px;
      height:90px;
      background:#15a308;
      border-radius:50%;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:40px;
      color:#fff;
  }

  /* Info */
  .video-info {
      position:absolute;
      bottom:60px;
      left:20px;
      color:white;
  }

  .video-title {
      font-weight:bold;
  }

  .video-duration {
      font-size:13px;
      opacity:.8;
  }

  /* Controls */
  .controls {
      position:absolute;
      bottom:15px;
      left:20px;
      right:20px;
      display:flex;
      align-items:center;
      gap:10px;
  }

  .play-pause {
      background:none;
      border:none;
      color:#fff;
      font-size:22px;
      cursor:pointer;
  }

  /* Progress bar */
  .progress {
      flex:1;
      height:6px;
      background:rgba(255,255,255,.3);
      border-radius:5px;
      cursor:pointer;
      position:relative;
  }

  .progress-filled {
      height:100%;
      width:0%;
      background:#15a308;
      border-radius:5px;
  }

  .time {
      color:white;
      font-size:12px;
      min-width:70px;
      text-align:right;
  }

  /* CONTAINER */

  /* GRID */
  .grid {
      display:flex;
      gap:20px;
      flex-wrap:wrap;
      justify-content:center;
  }

  /* CONTAINER */
  .media-box {
      position:relative;
      width:320px;
      height:210px;
      border-radius:18px;
      overflow:hidden;
      transition:all .45s ease;
      cursor: pointer;
  }

  /* EXPANDED */
  .media-box.is-open {
      width:700px;
      height:400px;
      border-radius:30px;
      z-index: 5;
  }

  /* VIDEO */
  .media-video {
      width:100%;
      height:100%;
      object-fit:cover;
  }

  /* HOVER LAYER */
  .action-layer {
      position:absolute;
      inset:0;
      display:flex;
      justify-content:center;
      align-items:center;
      background:rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:.3s;
  }

  /* show only on hover & paused */
  .media-box:hover .action-layer.is-visible {
      opacity:1;
      pointer-events:auto;
  }

  /* PLAY ICON */
  .action-play {
      width:48px;
      height:48px;
      background:#15a308;
      border-radius:50%;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:24px;
      color:#fff;
  }

  .media-box.is-open .action-play {
      width:90px;
      height:90px;
      font-size:40px;
  }

  /* PREVIEW TIME */
  .preview-time {
      position:absolute;
      bottom:6px;
      right:6px;
      background:rgba(0,0,0,.7);
      color:white;
      font-size:11px;
      padding:3px 6px;
      border-radius:6px;
      transition:.3s;
  }

  /* hide preview time when open */
  .media-box.is-open .preview-time {
      opacity:0;
  }

  /* PLAYER BAR */
  .player-bar {
      position:absolute;
      left:10px;
      right:10px;
      bottom:10px;
      display:flex;
      align-items:center;
      gap:8px;
      opacity:0;
      transition:.3s;
  }

  .media-box.is-open .player-bar {
      opacity:1;
  }

  /* PLAY / PAUSE BTN */
  .bar-toggle {
      background:none;
      border:none;
      color:#fff;
      font-size:20px;
      cursor:pointer;
  }

  /* SEEK BAR */
  .seek-track {
      flex:1;
      height:6px;
      background:rgba(255,255,255,.3);
      border-radius:4px;
      cursor:pointer;
  }

  .seek-fill {
      height:100%;
      width:0%;
      background:#15a308;
      border-radius:4px;
  }

  /* TIME LABEL */
  .time-label {
      color:white;
      font-size:12px;
      min-width:90px;
      text-align:right;
  }

  .kontakt-sekcia{
    width: 100%;
    min-height: 100vh;
    height: auto;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .cele-kontakt{
    height: 90%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
  }

  .lava-prava{
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 30px;
  }

  .kontakt-lava{
    padding: 10px 20px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    gap: 20px;
  }

  .kontakt-hlavicka{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    padding: 10px 10px;
    gap: 10px;
  }

  .kontakt-hlavicka h1{
    color: #000;
    font-size: 30px;
  }

  .kontakt-hlavicka p{
    font-size: 17px;
      color: #000000b2;
      line-height: 1.5;
  }

  .kontakt-prava{
    padding: 10px 20px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
  }

  .tea{
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .telefon, .email, .adresa{
    width: 100%;
    padding: 10px;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 20px;
  }

  .ikonka{
    padding: 10px 12px;
    background-color: #bae7e1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
  }

  .ikonka i{
      color: #15a308;
      font-size: 22px;
  }

  .konakt-text p{
    font-size: 17px;
      color: #000000b2;
  }

  .kontakt-text h3{
    font-size: 20px;
    color: #000;
    font-weight: bold;
  }

  .container{
    width: 500px;
    padding: 40px 0;
    background-color: #fff;
    border: 1px solid #49494927;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow:
      0 1px 9px rgba(0, 0, 0, 0.06),
      0 9px 29px rgba(0, 0, 0, 0.08);
  }

  form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
  }

  .meno-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 600;
  }



  .meeeno{
    height: 50px;
    border-radius: 10px;
    display: flex;
    text-align: start;
    padding: 8px;
    border: 1px solid #49494927;
    width: 100%;
    

  }

  .poziadavocky{
    height: 100px;
    border-radius: 10px;
    display: flex;
    text-align: start;
    padding: 8px;
    border: 1px solid #49494927;
    width: 100%;
  

  }

  .kontakt-btn{
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      
  }

  .kontakt-btn{
    padding: 20px 30px;
    border-radius: 20px;
    font-size: 15px;
    border: #15a308 1px solid;
    background-color: #15a308;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
  
  }

  .kontakt-btn i {
    font-size: 18px;
    transition: transform 0.3s ease-in-out;
    transform: rotate(45deg);
  }

  .kontakt-btn:hover i {
    transform:  rotate(5deg);

  }

  .kontakt-btn:hover{
      background:none;
      color: #15a308;
  }

  footer{
    width: 100%;
    height: auto;
    background-image: url(tgnb.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .ftr-cele{
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    gap: 20px;
  }

  .ftr-hore{
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 50px;
    background: none;
  }

  .hore-lava{
    width: 25%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .hore-ikony{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 10px;
    text-decoration: none;
  }

  .hore-ikony i{
    background: none;
    border: 1px solid #ffffffd7;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffffd7;
    cursor: pointer;
    
  }

  .hore-ikony i:hover{
    border: 1px solid #fff;
    color: #fff;
  }

  .hore-stred{
    width: 30%;
    padding: 0px 20px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: row;
    gap: 40px;
  }

  .stred-lava{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .stred-prava{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .hore-stred h1{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
  }

  .hore-stred a{
    font-size: 14px;
    text-decoration: none;
    color: #ffffffb2;
  }

  .hore-stred a:hover{
    color: #ffffffd3;
  }

  .hore-prava{
    width: 20%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .ftr-line{
    width: 100%;
    height: 1px;
    background-color: #ffffffb2;

  }

  .ftr-dole{
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }

  .dole-lava{
    width: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dole-lava p, .dole-prava a{
    font-size: 13px;
    color: #ffffffb2;
    cursor: pointer;
    text-decoration: none;
  }

  .dole-prava a:hover{
    color: #ffffffd3;
  
  }

  .dole-prava{
    width: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
  }

  .hore-logo{
    width: 100%;
    padding-left: 10px;
    display: flex;
    align-items: start;
    justify-content: start;
  }

  .logo-ftr img{
    width: 80px;
    height: auto;
  }

  .hore-prava button{
    padding: 10px 20px;
    border: none;
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .hore-prava button:hover{
    background-color: #e0e0e0;
  }



  @keyframes bounce {
    0% {
      transform: translate(-50%, 0);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, 15px);
      opacity: 0.6;
    }
    100% {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  /* MOBILE */
  @media (max-width: 768px) {
      .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;

   padding: 10px 20px;

    background: none;
    backdrop-filter: blur(10px);

    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  /* Navbar po scrollovaní */
  .navbar.scrolled {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  /* LOGO */
  .ano{
    width: 60px;
  }

  .nie{
      width: 60px;
      display: none;
  }

  .navbar.scrolled .nie {
    color: #111;
    display: block;
  }

  .navbar.scrolled .ano{
      display: none;
  }

  /* NAV LINKS */
  .nav-links {
    display: flex;
    gap: 2rem;
  }

  .nav-links a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: #15a308;
  }


  .navbar.scrolled .nav-links a {
    color: #111;
  }

  .navbar.scrolled .nav-links a:hover {
    color: #15a308;
  }

  /* HAMBURGER (TVÔJ KÓD) */
  .icon-menu {
    --gap: 5px;
    --height-bar: 2.5px;
    --pos-y-bar-one: 0;
    --pos-y-bar-three: 0;
    --scale-bar: 1;
    --rotate-bar-one: 0;
    --rotate-bar-three: 0;

    width: 25px;
    display: none;
    flex-direction: column;
    gap: var(--gap);
    cursor: pointer;
  }

  .bar {
    height: var(--height-bar);
    width: 100%;
    border-radius: .5rem;
    background-color: #fff;
    transition: background-color 0.3s;
  }

  .navbar.scrolled .bar {
    background-color: #111;
  }

  .bar--1 {
    top: var(--pos-y-bar-one);
    transform: rotate(var(--rotate-bar-one));
    transition: top 200ms 100ms, transform 100ms;
  }

  .bar--2 {
    transform: scaleX(var(--scale-bar));
    transition: transform 150ms 100ms;
  }

  .bar--3 {
    bottom: var(--pos-y-bar-three);
    transform: rotate(var(--rotate-bar-three));
    transition: bottom 200ms 100ms, transform 100ms;
  }

  .check-icon:checked + .icon-menu {
    --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
    --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
    --scale-bar: 0;
    --rotate-bar-one: 45deg;
    --rotate-bar-three: -45deg;
  }

  .hero-sekcia{
    width: 100%;
    height: 100vh;
    background-image: url(tgnb.png);
    background-position: center;
    background-size: cover;
    
  }

  .hlavicka{
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    gap: 10px;
    position: relative;
    padding: 0 ;
  }

.sezona{
    max-width: 80%;
      padding: 12px 23px;
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      gap: 10px;
      border-radius: 30px;
  }

  .sezona p{
      font-size: 12px;
      color: #ffffff;
      font-weight: 600;
  }

  .bodka{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #1dff09;
  }

  .nadpis{
    padding: 10px 20px;
  }

  .nefarba{
    color: #fff;
    font-size: 48px;
    font-weight: 700;
  }

  .farba{
    color: #15a308;
    font-size: 48px;
    font-weight: 700;
  }

  .podnadpis{
    padding: 10px 20px;
  }

  .podnadpis h2{
    color: #ffffffe5;
    font-size: 15px;
    font-weight: 400;
  }

  .buttony{
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .btn{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn:hover{
      background: none;
      color: #15a308;
  }

  .btn-2{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #ffffff;
      background-color: #ffffff;
      color: #000000;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn-2:hover{
      background: none;
      color: #ffffff;
  }

  .scroll-down i{
    position: absolute;
    transform: translateX(-50%);
    font-size: 2rem;
    color: white;
    animation: bounce 1.5s infinite;
  }

  .onas-sekcia{
    width: 100%;
      min-height: 130vh;
      height: auto;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 30px;
  }

  .onas-lava{
      width: 80%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: column;
      position: relative;
  }

  .onas-prava{
      width: 80%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
  }

  .onas{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
  }

  .onas h2{
      font-size: 14px;
      font-weight: 500;
      color: #15a308;
  }

  .onas-nadpis{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 10px;
  }

  .nn{
      font-size: 35px;
      color: #000000;
      font-weight: 600;
  }

  .jj{
      font-size: 35px;
      color: #15a308;
      font-weight: 600;
  }

  .onas-text{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      line-height: 1.5;
  }

  .onas-text p{
      font-size: 13px;
      color: #000000b2;
    
  }

  .onas-btn{
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
  }

  .onas-btn button{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .onas-btn button:hover{
      background: none;
      color: #15a308;
  }

   .talenty{
      width: 100%;
      height: 200px;
      padding: 20px 20px;
      background-color: #fcfcfc;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-direction: column;
      gap: 15px;
      box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.08);
  }

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

  .ikona{

      padding: 10px 12px;
      background-color: #bae7e1;
      border-radius: 15px;
  }

  .ikona i{
      color: #15a308;
      font-size: 20px;
  }

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

  .talenty-nadpis h1{
      font-size: 14px;
  }

  .talenty-text{
      line-height: 1.5;
  }

  .talenty-text p{
      font-size: 12px;
      color: #000000b2;
  }

   .talenty-text .plis{
      font-size: 11.5px;
      color: #000000b2;
  }

  .tim-sekcia{
      width: 100%;
      min-height: 120vh;
      height: auto;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

  }

  .cele{
    flex-direction: column;
    height: 90%;
      padding: 20px 20px;
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 50px;
  }

  .cele-hlavicka{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 20px;
    width: 100%;
  }

  .nas-tim{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nas-tim h2{
    font-size: 16px;
      font-weight: 500;
      color: #15a308;
  }

  .tim-nadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .tim-nadpis h1{
    font-size: 50px;
      color: #000000;
      font-weight: 600;
  }

  .tim-podnadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .tim-podnadpis p{
    font-size: 17px;
      color: #000000b2;
  }

   .bloky{
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 50px;
  }

  .card {
    width: 100%;
    padding-bottom: 20px;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }


  .img-wrapper {
    width: 100%;
    height: 75%; /* 3/4 výšky */
    position: relative;
    overflow: hidden;
  }

  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .img-wrapper:hover img{
    transform: scale(1.1);
    cursor: pointer;
  }

  /* ikony */
  .icons {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
  
  }

  .img-wrapper:hover .icons {
    opacity: 1;
    cursor: pointer;
  }

  .icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #000;
    
  }

  .icons a{
    text-decoration: none;
  }

  /* text + button */
  .content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.5;
  }

  .text {
    margin: 0;
    font-size: 13px;
    color: #333;
    
  }

  .cidlo{
    padding-left: 20px;
  }


  .btn-card{
      padding: 10px 20px;
      border-radius: 20px;
      border: 1px solid #15a308;
      background-color: #15a308;
      color: #ffffff;
      font-size: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .btn-card:hover{
      background: none;
      color: #15a308;
  }

  .content-mini{
    font-size: 10px;
      font-weight: 500;
      color: #15a308;
  }

  .meno{
    font-size: 25px;
    color: #000;
  }

   .videa-sekcia{
    width: 100%;
    min-height: 145vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .videa-cele{
    gap: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
     padding: 0 ;
  }

  .videa-hore{
    display: flex;
    align-items: center;
    justify-content: center;
     padding: 0 ;
  }

  .videa-dole{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 17px;
     padding: 0 ;
  }

  .cele-vid{
    flex-direction: column;
    height: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      max-width: 100%;
       padding: 0 ;
  }

  .video-wrapper {
      position:relative;
      width:300px;
      height:210px;
      border-radius:30px;
      overflow:hidden;
  }

  video {
      width:100%;
      height:100%;
      object-fit:cover;
  }

  /* Overlay */
  .overlay {
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.4);
      display:flex;
      justify-content:center;
      align-items:center;
      cursor:pointer;
      transition:.3s;
  }

  .overlay.hidden {
      opacity:0;
      pointer-events:none;
  }

  /* Play button */
  .play-button {
      width:50px;
      height:50px;
      background:#15a308;
      border-radius:50%;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:30px;
      color:#fff;
  }

  /* Info */
  .video-info {
      position:absolute;
      bottom:40px;
      left:20px;
      color:white;
      font-size: 13px;
  }

  .video-title {
      font-weight:bold;
  }

  .video-duration {
      font-size:13px;
      opacity:.8;
  }

  /* Controls */
  .controls {
      position:absolute;
      bottom:15px;
      left:20px;
      right:20px;
      display:flex;
      align-items:center;
      gap:10px;
  }

  .play-pause {
      background:none;
      border:none;
      color:#fff;
      font-size:18px;
      cursor:pointer;
  }

  /* Progress bar */
  .progress {
      flex:1;
      height:6px;
      background:rgba(255,255,255,.3);
      border-radius:5px;
      cursor:pointer;
      position:relative;
  }

  .progress-filled {
      height:100%;
      width:0%;
      background:#15a308;
      border-radius:5px;
  }

  .time {
      color:white;
      font-size:12px;
      min-width:70px;
      text-align:right;
  }

  /* CONTAINER */

  /* GRID */
  .grid {
      display:flex;
      gap:20px;
      flex-wrap:wrap;
      justify-content:center;
  }

  /* CONTAINER */
  .media-box {
      position:relative;
      width:300px;
      height:210px;
      border-radius:18px;
      overflow:hidden;
      transition:all .45s ease;
      cursor: pointer;
  }

  /* EXPANDED */
  .media-box.is-open {
      width:300px;
      height:210px;
      border-radius:30px;
      z-index: 5;
  }

  /* VIDEO */
  .media-video {
      width:100%;
      height:100%;
      object-fit:cover;
  }

  /* HOVER LAYER */
  .action-layer {
      position:absolute;
      inset:0;
      display:flex;
      justify-content:center;
      align-items:center;
      background:rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:.3s;
  }

  /* show only on hover & paused */
  .media-box:hover .action-layer.is-visible {
      opacity:1;
      pointer-events:auto;
  }

  /* PLAY ICON */
  .action-play {
      width:48px;
      height:48px;
      background:#15a308;
      border-radius:50%;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:24px;
      color:#fff;
  }

  .media-box.is-open .action-play {
      width:90px;
      height:90px;
      font-size:40px;
  }

  /* PREVIEW TIME */
  .preview-time {
      position:absolute;
      bottom:6px;
      right:6px;
      background:rgba(0,0,0,.7);
      color:white;
      font-size:11px;
      padding:3px 6px;
      border-radius:6px;
      transition:.3s;
  }

  /* hide preview time when open */
  .media-box.is-open .preview-time {
      opacity:0;
  }

  /* PLAYER BAR */
  .player-bar {
      position:absolute;
      left:10px;
      right:10px;
      bottom:10px;
      display:flex;
      align-items:center;
      gap:8px;
      opacity:0;
      transition:.3s;
  }

  .media-box.is-open .player-bar {
      opacity:1;
  }

  /* PLAY / PAUSE BTN */
  .bar-toggle {
      background:none;
      border:none;
      color:#fff;
      font-size:20px;
      cursor:pointer;
  }

  /* SEEK BAR */
  .seek-track {
      flex:1;
      height:6px;
      background:rgba(255,255,255,.3);
      border-radius:4px;
      cursor:pointer;
  }

  .seek-fill {
      height:100%;
      width:0%;
      background:#15a308;
      border-radius:4px;
  }

  /* TIME LABEL */
  .time-label {
      color:white;
      font-size:12px;
      min-width:90px;
      text-align:right;
  }

   .kontakt-sekcia{
    width: 100%;
    min-height: 100vh;
    height: auto;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .kontakt-tim{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kontakt-tim h2{
    font-size: 16px;
      font-weight: 500;
      color: #15a308;
  }

  .kontakt-nadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .kontakt-nadpis h1{
    font-size: 30px;
      color: #000000;
      font-weight: 600;
  }

  .kontakt-podnadpis{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .kontakt-podnadpis p{
    font-size: 13px;
      color: #000000b2;
  }

  .cele-kontakt{
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    max-width: 100%;
  }

  .lava-prava{
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    max-width: 100%;
  }

  .kontakt-lava{
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
  }

  .kontakt-hlavicka{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 10px;
    gap: 10px;
    text-align: center;
    
  }

  .kontakt-hlavicka h1{
    color: #000;
    font-size: 25px;
  }

  .kontakt-hlavicka p{
    font-size: 14px;
      color: #000000b2;
      line-height: 1.5;
  }

  .kontakt-prava{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
     padding: 0 ;
  }

  .tea{
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
 
  }

  .telefon, .email, .adresa{
    width: 100%;
    padding: 10px;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 20px;
  }

  .ikonka{
    padding: 10px 12px;
    background-color: #bae7e1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
  }

  .ikonka i{
      color: #15a308;
      font-size: 17px;
  }

  .kontakt-text p{
    font-size: 14px;
      color: #000000b2;
  }

  .kontakt-text h3{
    font-size: 15px;
    color: #000;
    font-weight: bold;
  }

  .container{
    width: 100%;
    padding: 40px 0;
    background-color: #fff;
    border: 1px solid #49494927;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow:
      0 1px 9px rgba(0, 0, 0, 0.06),
      0 9px 29px rgba(0, 0, 0, 0.08);
  }

  form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
  }

  .meno-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 600;
  }



  .meeeno{
    height: 50px;
    border-radius: 10px;
    display: flex;
    text-align: start;
    padding: 8px;
    border: 1px solid #49494927;
    width: 100%;
    

  }

  .poziadavocky{
    height: 100px;
    border-radius: 10px;
    display: flex;
    text-align: start;
    padding: 8px;
    border: 1px solid #49494927;
    width: 100%;
  

  }

  .kontakt-btn{
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      
  }

  .kontakt-btn{
    padding: 20px 20px;
    border-radius: 20px;
    font-size: 15px;
    border: #15a308 1px solid;
    background-color: #15a308;
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
  
  }

  .kontakt-btn i {
    font-size: 18px;
    transition: transform 0.3s ease-in-out;
    transform: rotate(45deg);
  }

  .kontakt-btn:hover i {
    transform:  rotate(5deg);

  }

  .kontakt-btn:hover{
      background:none;
      color: #15a308;
  }

  
  footer{
    width: 100%;
    min-height: 50vh;
    height: auto;
    background-image: url(tgnb.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ftr-cele{
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    gap: 20px;
  }

  .ftr-hore{
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
    background: none;
  }

  .hore-lava{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
     padding: 0 ;
  }

  .hore-ikony{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
     padding: 0 ;
  }

  .hore-ikony i{
    background: none;
    border: 1px solid #ffffffd7;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 20px;
    color: #ffffffd7;
    cursor: pointer;
    
  }

  .hore-ikony i:hover{
    border: 1px solid #fff;
    color: #fff;
  }

  .hore-stred{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
     padding: 0 ;
  }

  .hore-stred h1{
    color: #fff;
    font-size: 30px;
    font-weight: bold;
  }

  .hore-stred a{
    font-size: 14px;
    text-decoration: none;
    color: #ffffffb2;
  }

  .hore-stred a:hover{
    color: #ffffffd3;
  }

  .hore-prava{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
     padding: 0 ;
  }

  .ftr-line{
    width: 100%;
    height: 1px;
    background-color: #ffffffb2;

  }

  .ftr-dole{
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .dole-lava{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .dole-lava p, .dole-prava a{
    font-size: 13px;
    color: #ffffffb2;
    cursor: pointer;
    text-decoration: none;
  }

  .dole-prava a:hover{
    color: #ffffffd3;
  
  }

  .dole-prava{
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
  }

  .hore-logo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     padding-left: 0 ;
  }

  .logo-ftr img{
    width: 80px;
    height: auto;
  }

  .hore-prava button{
    padding: 10px 20px;
    border: none;
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .hore-prava button:hover{
    background-color: #e0e0e0;
  }


    .icon-menu {
      display: flex;
    }

    .nav-links {
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;

      background: white;
      flex-direction: column;
      align-items: center;

      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .nav-links a {
      padding: 1rem 0;
      color: #111;
    }

    .check-icon:checked ~ .nav-links {
      max-height: 300px;
    }
  }

  
  /* Responsive improvements: fluid layout, flexible media and typographic scale */

  /* Make images and videos scale to their containers */