/* ====== Design systém (snadné přenastavení barev) ====== */

:root {

  --bg-start: #fadfb2;        /* světlé broskvové pozadí – jako v logu */

  --bg-end: #f9c585;          /* teplejší gradient směrem dolů */

  --surface: #fffaf6;         /* krémový papír */

  --ink: #1D1B1B;             /* tmavé obrysy */

  --accent: #73C64E;          /* hravá zelená z nápisu */

  --accent-dark: #4E9C2F;     

  --sun: #FFC83D;             /* žlutá slunce v logu */

  --sky: #6ECFF5;             /* modrá balonků/oblohy */

  --warning: #FF5349;         /* červená kontura – samolepkový efekt */

  --radius-xl: 50px;

  --radius-lg: 18px;

  --radius-md: 12px;

  --shadow-sticker: 0 10px 0 var(--ink), 0 18px 30px rgba(0,0,0,.25);

  --shadow-soft: 0 10px 24px rgba(0,0,0,.12);

  --max-w: 1200px;

}



/* ====== Reset + základ ====== */

*, *::before, *::after {

  box-sizing: border-box;

}



html {



}



body {

  margin: 0;

  color: var(--ink);

  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background-attachment: fixed;

  background-image: linear-gradient(to top, #fffad1 0%, #faf6e7 100%);

}







a {

  color: inherit;

  text-decoration: none;

}



/* ====== Globální layout ====== */





header.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 100;

  max-width: 1000px;

  margin-inline: auto;

  margin-top: 20px;

}



/* základní vzhled – čistý */

.nav {

  display: flex;

  align-items: center;

  gap: 16px;

  justify-content: space-between;

  padding: 10px 18px;

  border-radius: 20px;

  transition: all 0.4s ease, opacity 0.4s ease;

  opacity: 1;

    color: #ffffff; /* základní barva textu */

}



/* glass efekt – jen když je pod 50vh a scrolluje nahoru */

.nav.glass {

  background: rgba(255, 255, 255, .65);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  border: 2px solid #ffffffa8;

  backdrop-filter: blur(3px) saturate(150%);

  -webkit-backdrop-filter: blur(3px) saturate(150%);

  border-radius: var(--radius-xl);

  color: #000000; /* základní barva textu */

}



/* schovaná navigace */

.nav.hidden {

  display: none !important;

}











.dekration-img{

  position: absolute;

  z-index: -5;

}



.di-1{

  width: 400px;

  margin-left: -10%;

  margin-top: 15vh;

}



.di-2{

  right: 0;

}



.di-3{

  width: 250px;

  margin-left: 2%;

  margin-top: 50vh;

  rotate: -15deg;

}



.di-4{

  width: 300px;

  right: 15%;

  margin-top: 20vh;

}



.di-5{

  width: 400px;

  right: 5%;

  margin-top: 80vh;

}





.di-6{

  width: 250px;

  right: 3%;

  margin-top: 55vh;

}



.di-7{

  width: 250px;

  margin-left: 1%;

  margin-top: 20vh;

}



.di-8{

  width: 300px;

  margin-left: 2%;

  margin-top: 50vh;

}



.di-9{

  width: 300px;

  margin-left: 2%;

  margin-top: 50vh;

}



.di-10{

  width: 250px;

  right: 3%;

  margin-top: 55vh;

}



@media (max-width: 1580px) {

.di-1{

  opacity: 0.1;

}



.di-2{

  opacity: 0.1;

}



}



@media (max-width: 800px) {

.di-1{

  opacity: 0;

}



.di-2{

  opacity: 0.1;

}



}





@media (max-width: 1750px) {

.di-3{

  width: 200px;

opacity: 0.1;

}



.di-4{

  width: 250px;

opacity: 0.1;

}



.di-5{

  width: 350px;

opacity: 0.1;

}



}







@media (max-width: 1250px) {

.di-9{

  width: 200px;

  margin-left: 0%;

  margin-top: 65vh;

}



.di-10{

  width: 200px;

  right: 3%;

  margin-top: 65vh;

}



}





@media (max-width: 900px) {

.di-9{

 display: none;

}



.di-10{

 display: none;

}



}







@media (max-width: 1750px) {

.di-6{

opacity: 0;

}



.di-7{

opacity: 0;

}

.di-8{

opacity: 0;

}



}



@media (max-width: 500px) {

.di-1{

  display: none;

}







}













.logo{

  font-family: "astounder-squared-bb", sans-serif;

  font-weight: 800;

  letter-spacing: 1px;

  font-size: clamp(25px, 2.6vw, 35px);

  margin-left: 20px;

  margin-top: 3px;

  cursor: pointer;

  color: #f9e82a;

    transition: color 0.3s ease, transform 0.3s ease;

  text-shadow: 

    -1px -1px 0 #000,  

     1px -1px 0 #000,

    -1px  1px 0 #000,

     1px  1px 0 #000;

     

}



.logo b {

  color: #90c166;

}

.logo:hover {

    transform: scale(1.02);

}



/* Výchozí stav – nad 1000px se .logo-mobile nezobrazí */

.logo-mobile {

  display: none;

  text-align: center;

  margin-top: 10px;

}



/* Pod 1000px – zobrazí se */

@media (max-width: 1000px) {

  .logo-mobile {

    display: block; /* nebo flex, podle potřeby */

  }

}



@media (max-width: 430px) {

  .logo-mobile{

    text-align: center;

    margin-top: 10px;

    margin-left: -50px;



  }

}



.nav__links {

  display: flex;

  gap: 18px;

  flex-wrap: wrap;

}



.nav__link {

  position: relative;

  padding: 15px 15px;

  text-decoration: none;

  transition: color 0.3s ease, transform 0.3s ease;

}



/* čárka pod textem */

.nav__link::after {

  content: "";

  position: absolute;

  left: 15px;   /* respektuje padding */

  bottom: 15px;

  width: 0%;

  height: 2px;

  background: #ff6b6b; /* barva čárky */

  transition: width 0.3s ease;

}



.nav__link:hover {

  color: #ff6b6b;       /* změna barvy textu */

  transform: scale(1.05); /* tvůj původní efekt */

}



.nav__link:hover::after {

  width: calc(100% - 30px); /* animovaná čárka pod textem */

}





















.hamburger-menu {

    width: 50px;

    height: 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    align-items: center;

    cursor: pointer;

    position: fixed;

    right: 20px;

    padding: 12px;

    padding-top: 14px;

    padding-bottom: 14px;

    border-radius: 50px;

  background: rgba(255, 255, 255, .65);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  border: 2px solid #ffffffa8;

  backdrop-filter: blur(3px) saturate(150%);

  -webkit-backdrop-filter: blur(3px) saturate(150%);

  border-radius: var(--radius-xl);

  color: #000000; /* základní barva textu */

}





.hamburger-menu:hover {

    transform: scale(1.02);

}



.hamburger-menu .line {

    width: 80%;

    height: 2px;

    background-color: #343131;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.nav-menu {

    position: fixed;

    top: 120px;

    right: -200px; /* Skryté mimo obrazovku */

    width: 200px;

    height: calc(100% - 60px);

  background: rgba(255, 255, 255, .65);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  border: 2px solid #ffffffa8;

  backdrop-filter: blur(5px) saturate(150%);

  -webkit-backdrop-filter: blur(5px) saturate(150%);



  color: #000000; /* základní barva textu */

    transition: right 0.3s ease;

    z-index: 9999;

}



.nav-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.nav-menu li {

    padding: 15px;

    border-bottom: 1px solid #444;

}



.nav-menu a {



    text-decoration: none;

    display: block;

}



.nav-menu.open {

    right: 0; /* Posune menu do viditelné oblasti */

}



.hamburger-menu.open .stredline {

    opacity: 0; /* Skryje prostřední čáru */

    transition: opacity 0.1s ease; /* Rychlejší zmizení prostřední čáry */

}



.hamburger-menu.open .horniline {

    transform: rotate(45deg) translate(5px, 4px); /* Otočí a posune horní čáru */

    transition: transform 0.3s ease 0.1s;

}



.hamburger-menu.open .dolniline {

    transform: rotate(-45deg) translate(5px, -4px); /* Otočí a posune dolní čáru */

    transition: transform 0.3s ease 0.1s;

}









/* 📱 Přepínání při šířce 1000px a méně */

@media (max-width: 1000px) {

  .nav {

    display: none;   /* schovat velkou navigaci */

  }



  .hamburger-menu {

    display: flex;   /* zobrazit hamburger */

  }

}



@media (min-width: 1000px) {

  .nav {

    display: flex;          /* schovat navigaci */

  }



  .hamburger-menu {

    display: none;          /* ukázat hamburger */

  }

}













/* ====== hero ====== */

.hero{

  width: 100%;

  height: 100vh;

  position: relative; 

  overflow: hidden;

  background-image: url("img/uvodAmerika.webp");

  background-size: cover;      /* roztáhne přes celý blok, zachová poměr stran */

  background-position: center; /* vystředí obrázek */

  background-repeat: no-repeat; /* zabrání opakování obrázku */

}



.Logo-hero {

  position: absolute;       /* ať se může volně hýbat */

  left: 15%;

  top: 30%;                 /* výchozí vertikální umístění */

  width: 16%;

  transform: translate(-10%, -50%);

  will-change: transform;   /* výkon */

  pointer-events: none;     /* volitelné: neklikatelný */

}



@media (max-width: 1000px) {

  .Logo-hero {

    left: 50%;

    top: 30%;

    transform: translate(-50%, -50%);

    width: 40%; /* můžeš si doladit – na mobilu větší */

  }

}



@media (max-width: 600px) {

  .Logo-hero {

    left: 50%;

    top: 45%;

    transform: translate(-50%, -50%);

    width: 70%; /* můžeš si doladit – na mobilu větší */



  }

}





.city{

  position: absolute;



  width: 100%;

    bottom: 0; 

}





.hero-img{

  position: absolute;

  bottom: 0; 

  width: 20%;

  height: auto;

    opacity: 0; /* start */

  transition: all 1.5s ease-in-out;

      margin-bottom: -10px;

}





.hero-1{

    width: 29%;

    z-index: 5;

}



.hero-2{

  width: 38%;

  z-index: 6;

}



.hero-3{

  width: 27%;

  margin-left: 24%;

}



.hero-4{

  width: 24%;

  margin-left: 28.5%;

}



.hero-5{

  width: 18%;

  margin-left: 48%;

}



.hero-6{

  width: 18%;

  margin-left: 61%;

}



.hero-7{

  width: 16%;

  margin-left: 73%;

   z-index: 5;

}



.hero-8{

  width: 22.5%;

  margin-left: 79%;

}



.hero-9{

  width: 18%;

  margin-left: 28.5%;

}



















/* ====== O projektu ====== */



#o-projektu {

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  color: #0b1b2b;

  padding: 56px 20px;

  position: relative;

  padding-top: 120px;

}



/* ====== Layout wrapper ====== */

#o-projektu .wrap {

  max-width: 1100px;

  margin: 0 auto;

}



/* ====== Úvod (eyebrow, nadpis, lead) ====== */

#o-projektu .eyebrow {

  display: inline-block;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

  background: #000000;

  color: #ffffff;

  padding: 6px 12px;

  border-radius: 999px;

}



#o-projektu h2 {

  font-size: clamp(28px, 4vw, 40px);

  line-height: 1.15;

  margin: 12px 0 16px;

}



#o-projektu p.lead {

  font-size: clamp(16px, 2.2vw, 18px);

  color: #35506b;

  max-width: 70ch;

}



/* ====== Karty – Naše přednosti ====== */

#o-projektu .grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 18px;

  margin-top: 28px;

}



#o-projektu .card {

  background: #ffffff;

  border: 2px solid #90c166;

  border-radius: 18px;

  box-shadow: 0 6px 18px rgba(9,31,61,.06);

  padding: 18px;

  display: flex;

  gap: 14px;

  align-items: flex-start;

  transition: transform .2s ease, box-shadow .2s ease;

}



#o-projektu .card:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(9,31,61,.10);

}



#o-projektu .ic {

  flex: 0 0 44px;

  width: 44px;

  height: 44px;

  border-radius: 12px;

  background: #000000;

  display: grid;

  place-items: center;

}



#o-projektu .ic svg {

  width: 24px;

  height: 24px;

  stroke: #ffffff;

  stroke-width: 1.7;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

}



#o-projektu .card h3 {

  margin: 4px 0 6px;

  font-size: 18px;

}



#o-projektu .card p {

  margin: 0;

  color: #4a6887;

  font-size: 15px;

}



/* ====== Co nabízíme (offer) ====== */

#o-projektu .offer {

  margin-top: 34px;

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

  align-items: center;

}



#o-projektu .offer-copy h3 {

  font-size: 22px;

  margin: 0 0 8px;

}



#o-projektu .offer-copy ul {

  padding-left: 18px;

  margin: 0;

  color: #35506b;

}



#o-projektu .offer-copy li {

  margin: 6px 0;

}



/* Ilustrační media 16:9 (placeholder/fotka/video) */

#o-projektu .offer-media-wrap{



  text-align: center;

}



#o-projektu .offer-media {

  border-radius: 16px;

  place-items: center;

}



/* ====== CTA tlačítka ====== */

#o-projektu .cta {

  margin-top: 24px;

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



    #partner .btn {

      display: inline-block;

      padding: 10px 18px;

      border-radius: 999px;

      font-size: 15px;

      cursor: pointer;

      border: 2px solid #0a5db3;

      background: transparent;

      color: #0a5db3;

      transition: all 0.2s ease;

      text-decoration: none;

      width: fit-content;

    }



    #partner .btn:hover {

      background: #0a5db3;

      color: #fff;

    }



#o-projektu .btn {

      display: inline-block;

      padding: 10px 18px;

      border-radius: 999px;

      font-size: 16px;

      cursor: pointer;

      border: 2px solid #000000;

      background: transparent;

      color: #0a5db3;

      transition: all 0.2s ease;

      text-decoration: none;

      width: fit-content;

}

#o-projektu .btn.primary {

  background: #000000;

  color: #ffffff;

  font-weight: 700;

  text-transform: uppercase;

}

#o-projektu .btn.primary:hover {

  background: #00000000;

  color: #000000;

}

#o-projektu .btn.ghost{

  background: #00000000;

  color: #000000;

    font-weight: 500;



}

#o-projektu .btn.ghost:hover {

  background: #000000;

  color: #fff;

}



/* ====== Badges ====== */

#o-projektu .badges {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 12px;

}



#o-projektu .badge {

  background: #ffffff;

  border: 2px solid #90c166;

  color: #000000;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;

}



/* ====== Responsivita ====== */

@media (min-width: 1200px) {

  #o-projektu .grid {

    grid-template-columns: repeat(3, 1fr);

  }

  #o-projektu .offer {

    grid-template-columns: 1.2fr 1fr;

  }



}



/* Pod 1200px */

@media (max-width: 1199px) {

  .offer-media {

    width: 70%;

    margin: 0 auto;   /* vycentrování */

    display: block;   /* aby margin:auto fungoval */

    margin-top: 50px;

  }

}

































/* ====== program====== */

#program {

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  color: #0b1b2b;

  padding: 56px 20px;

}



/* Layout wrapper */

#program .wrap {

  max-width: 1100px;

  margin: 0 auto;

}



/* Úvod (eyebrow, nadpis, lead) */

#program .eyebrow {

  display: inline-block;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

  background: #000000;

  color: #ffffff;

  padding: 6px 12px;

  border-radius: 999px;

}



#program h2 {

  font-size: clamp(28px, 4vw, 40px);

  line-height: 1.15;

  margin: 12px 0 16px;

}



#program p.lead {

  font-size: clamp(16px, 2.2vw, 18px);

  color: #444444;

  max-width: 70ch;

}



/* Timeline */

#program .timeline {

  margin-top: 32px;

  border-left: 3px solid #e6f3ff;

  padding-left: 20px;

  display: grid;

  gap: 22px;

}



#program .step {

  position: relative;

}



#program .step::before {

  content: "";

  position: absolute;

  left: -29px;

  top: 6px;

  width: 15px;

  height: 15px;

  background: #0a5db3;

  border-radius: 50%;

}



#program .time {

  font-size: 14px;

  color: #0a5db3;

  font-weight: 600;

}



#program .info h3 {

  margin: 2px 0 4px;

  font-size: 18px;

}



#program .info p {

  margin: 0;

  color: #35506b;

  font-size: 15px;

}



/* Extras (průřezové aktivity, pomůcky) */

#program .extras {

  margin-top: 40px;

}



#program .extras h3 {

  font-size: 20px;

  margin: 0 0 10px;

}



#program .extras p {

  margin: 0 0 6px;

  color: #35506b;

  font-size: 15px;

}



#program .extras ul {

  padding-left: 18px;

  margin: 0;

  color: #35506b;

  font-size: 15px;

}



#program .extras li {

  margin: 6px 0;

}



/* Responsivita – zatím není potřeba nic speciálního */

@media (min-width: 720px) {

  /* Rezervováno pro případné rozšíření (dvousloupcový layout apod.) */

}































































/* ================================

   Hravé kontinenty – Galerie

   Scopované CSS (jen pro #galerie)

=================================== */

#galerie {

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  color: #0b1b2b;

  padding: 56px 20px;

}



/* Layout wrapper */

#galerie .wrap {

  max-width: 1100px;

  margin: 0 auto;

}



/* Úvod (eyebrow, nadpis, lead) */

#galerie .eyebrow {

  display: inline-block;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

  background: #000000;

  color: #ffffff;

  padding: 6px 12px;

  border-radius: 999px;

}



#galerie h2 {

  font-size: clamp(28px, 4vw, 40px);

  margin: 12px 0 16px;

}



#galerie .lead {

  font-size: clamp(16px, 2.2vw, 18px);

  color: #35506b;

  max-width: 70ch;

}



/* Grid */

#galerie .grid {

  margin-top: 22px;

  display: grid;

  grid-template-columns: 1fr;



}



@media (min-width: 680px) {

  #galerie .grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (min-width: 980px) {

  #galerie .grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* Tile 16:9 s hover efektem */

#galerie .tile {

  position: relative;

  background: #eef6ff;

  border: 1px solid #e4edf7;

  border-radius: 16px;

  overflow: hidden;

  cursor: pointer;

}



#galerie .tile::after {

  content: "";

  display: block;

  aspect-ratio: 16 / 9;

}



#galerie .tile img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .25s ease;

}



#galerie .tile:hover img {

  transform: scale(1.04);

}



#galerie .tile figcaption {

  position: absolute;

  left: 10px;

  bottom: 10px;

  background: rgba(255, 255, 255, .9);

  padding: 6px 10px;

  border-radius: 10px;

  font-size: 13px;

  color: #0b1b2b;

}



/* CTA tlačítko */

#galerie .cta {

  margin-top: 18px;

}



#galerie .btn {

  display: inline-block;

  text-decoration: none;

  border-radius: 12px;

  padding: 12px 16px;

  font-weight: 600;

}



#galerie .btn.ghost {

  background: #e6f3ff;

  color: #0a5db3;

}



/* Lightbox */

#galerie .lightbox {

  position: fixed;

  inset: 0;

  background: rgba(9, 31, 61, .72);

  display: grid;

  place-items: center;

  z-index: 150;

  padding: 20px;

}



/* 💡 Oprava: schovat lightbox při hidden */

#galerie .lightbox[hidden] {

  display: none !important;

}



#galerie .lightbox img {

  max-width: min(1100px, 95vw);

  max-height: 80vh;

  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);

}



#galerie .lightbox .caption {

  margin-top: 10px;

  color: #fff;

  text-align: center;

  font-size: 14px;

}



#galerie .lightbox .close {

  position: absolute;

  top: 15px;

  right: 14px;

  width: 42px;

  height: 42px;

  border: none;

  border-radius: 999px;

  background: #ffffff;

  color: #0b1b2b;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

}





/* Telefony <= 400px */

@media (max-width: 500px) {





#galerie .lightbox img {

  max-width: min(1100px, 80vw);

  max-height: 80vh;

  border-radius: 12px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);

}



}































/* ===== Základní vzhled sekce (zachováno, jen id sjednoceno) ===== */

/* ===== Sekce – základ ===== */

#aktivity {



  --text: #0b1b2b;

  --muted: #35506b;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  color: var(--text);

  background: var(--bg);

  padding: 72px 20px;

}



#aktivity .wrap { max-width: 1100px; margin: 0 auto; text-align: center; }

#aktivity .eyebrow {

  display:inline-block; font:600 12px/1.2 system-ui, sans-serif; letter-spacing:.14em;

  text-transform:uppercase; background:#000000; color:#ffffff; padding:6px 12px; border-radius:999px;

}

#aktivity h2 { font-size: clamp(28px, 4vw, 42px); line-height:1.15; margin:12px 0 16px; }

#aktivity .lead { font-size: clamp(16px, 2.2vw, 18px); color: var(--muted); max-width: 68ch; margin: 0 auto; }



/* ===== Schovej zbylé inputy v sekci (prevence "políčka") ===== */

#aktivity input[type="radio"],

#aktivity input[type="checkbox"] {

  position: absolute !important;

  left: -9999px !important;

  width: 1px; height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

}



/* ===== Tabs (buttony) ===== */

#aktivity [role="tablist"] { margin-top: 28px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

#aktivity [role="tab"] {

  appearance:none; border:1px solid #dce9f7; background:#f4f9ff; color:#0a5db3;

  padding:10px 16px; border-radius:999px; font-weight:700; cursor:pointer;

  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;

}

#aktivity [role="tab"]:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }

#aktivity [role="tab"][aria-selected="true"] { background:#0a5db3; color:#fff; border-color:#0a5db3; }



/* ===== Panely ===== */

#aktivity .panel { margin-top: 8px; }

#aktivity .panel[hidden] { display:none !important; }



/* ===== GRID: 3 nahoře + 2 dole uprostřed ===== */

#aktivity .grid {

  margin-top: 20px;

  display: grid;

  gap: 24px;

  grid-template-columns: 1fr;  /* mobil – pod sebou */

  max-width: 1100px;

  margin-inline: auto;

}



/* Desktop/Tablet layout */

@media (min-width: 720px) {

  #aktivity .grid {

    grid-template-columns: repeat(6, minmax(0, 1fr));

    grid-auto-flow: row dense;

  }

  /* výchozí: každá karta 2 sloupce (→ 3 vedle sebe) */

  #aktivity .grid > * { grid-column: span 2; }

  /* poslední dvě karty vycentrovat: 2–3 a 4–5 */

  #aktivity .grid > :nth-last-child(2) { grid-column: 2 / span 2; }

  #aktivity .grid > :last-child        { grid-column: 4 / span 2; }

}



/* ===== Karty ===== */

#aktivity .card {

  position: relative;

  border-radius: 16px;

  padding: 24px 22px;

  color: #fff;

  display: grid;

  grid-template-columns: 1fr;

  justify-items: start;

  row-gap: 10px;

  box-shadow: 0 6px 20px rgba(15, 23, 42, .1);

  transition: transform .2s ease, box-shadow .2s ease;

  isolation: isolate;

}

#aktivity .card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, .15); }

#aktivity .card h3 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: .2px; }

#aktivity .card p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 60ch; }

#aktivity .card .note {

  font-size: 14.5px; font-weight: 600; opacity: .95; margin-top: 6px; padding-top: 8px;

  border-top: 1px solid rgba(255,255,255,.15);

}

#aktivity .card::after {

  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;

  border:1px solid rgba(255,255,255,.08);

}



/* ===== Barvy kontinentů ===== */

#aktivity .evropa { background: linear-gradient(135deg, #1f75d0 0%, #2681e1 100%); }

#aktivity .asie { background: linear-gradient(135deg, #ffd500 0%, #ffbd00 100%); color:#111; }

#aktivity .afrika { background: linear-gradient(135deg, #0a0a0a 0%, #1e1e1e 100%); }

#aktivity .amerika { background: linear-gradient(135deg, #d40000 0%, #b00000 100%); }

#aktivity .australie { background: linear-gradient(135deg, #009b3a 0%, #008030 100%); }



















































    /* ================================

       Partner sekce

    =================================== */

    #partner {

      font-family: system-ui, sans-serif;

      padding: 56px 20px;

      color: #0b1b2b;

      display: none;

    }



    #partner .wrap {

      max-width: 1100px;

      margin: 0 auto;

    }



    #partner .eyebrow {

      display: inline-block;

      font-size: 12px;

      letter-spacing: .12em;

      text-transform: uppercase;

      background: #000000;

      color: #ffffff;

      padding: 6px 12px;

      border-radius: 999px;

    }



    #partner h2 {

      font-size: clamp(28px, 4vw, 40px);

      margin: 12px 0 24px;

    }



    #partner .partner-grid {

      display: grid;

      gap: 32px;

      align-items: center;

    }



    @media (min-width: 900px) {

      #partner .partner-grid {

        grid-template-columns: 1fr 1fr;

      }

    }



    #partner .partner-copy {

      display: flex;

      flex-direction: column;

      gap: 16px;

    }



    #partner .partner-copy .lead {

      font-size: clamp(16px, 2vw, 18px);

      line-height: 1.6;

      color: #35506b;

    }



    #partner ul {

      list-style: disc;

      padding-left: 20px;

      text-align: left;

    }



    #partner .btn {

      display: inline-block;

      padding: 10px 18px;

      border-radius: 999px;

      font-size: 15px;

      cursor: pointer;

      border: 2px solid #0a5db3;

      background: transparent;

      color: #0a5db3;

      transition: all 0.2s ease;

      text-decoration: none;

      width: fit-content;

    }



    #partner .btn:hover {

      background: #0a5db3;

      color: #fff;

    }



    #partner .partner-media img {

      width: 100%;

      aspect-ratio: 16/9;

      object-fit: contain;

      border-radius: 12px;

      background: #fff;

      padding: 20px;

      box-shadow: 0 4px 12px rgba(0,0,0,.08);

    }



















.reviews-section {



  padding: 60px 20px;

  text-align: center;

  border-radius: 16px;

  max-width: 1000px;

  margin: 50px auto;



  position: relative;

}



.reviews-section h2 {

  font-size: clamp(28px, 4vw, 40px);

  margin-bottom: 30px;

  color: #000000;

}



.review-slider {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  min-height: 280px;

}



.review {

  display: none;

  width: 100%;

  transition: opacity 0.5s ease;

}



.review.active {

  display: block;

}



.review-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding: 0 70px;

}



.review-textbox {

  flex: 2;

  text-align: left;

}



.review-text {

  font-size: 1.1rem;

  font-style: italic;

  color: #333;

  margin-bottom: 20px;

}



.review-author {

  color: #004c91;

  font-size: 1rem;

}



.review-image {

  flex: 1;

  text-align: right;

}



.review-image img {

  width: 300px;

  height: auto;

  border-radius: 16px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  object-fit: cover;

}



.nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 45px;

  height: 45px;

  border: none;

  border-radius: 50%;

  background-color: transparent;

  font-size: 1.5rem;

  cursor: pointer;

  transition: all 0.3s ease;



}



.nav-btn:hover {

  transform: translateY(-50%) scale(1.5);

}



.prev {

  left: 0px;

}



.next {

  right: 0px;

}





/* TABLETY A MENŠÍ (<= 768px) */

@media (max-width: 768px) {

  .reviews-section {



    margin: 30px auto;

    border-radius: 14px;

  }



  .review-slider {

    min-height: 0; /* výška se přizpůsobí obsahu */

  }



  .review-content {

    padding: 0 24px;

    gap: 20px;

    flex-direction: column;   /* text nad obrázek */

    align-items: center;

  }



  .review-textbox {

    flex: none;

    width: 100%;

    text-align: center;       /* na střed */

  }



  .review-text {

    font-size: clamp(16px, 2.5vw, 18px);

    margin-bottom: 14px;

  }



  .review-author {

    font-size: clamp(14px, 2.3vw, 16px);

  }



  .review-image {

    flex: none;

    text-align: center;

    width: 100%;

  }



  .review-image img {

    width: min(85%, 340px);

    border-radius: 14px;

  }



  /* šipky – větší tap zóna a více dovnitř */

  .nav-btn {

    width: 52px;

    height: 52px;

    font-size: 1.6rem;

    top: 50%;

    transform: translateY(-50%);

    /* lehké pozadí kvůli kontrastu nad obsahem (volitelné) */

  }



  .prev { left: 0px; }

  .next { right: 0px; }



  /* méně “skákavý” hover na dotykových zařízeních */

  .nav-btn:hover { transform: translateY(-50%) scale(1.1); }

}



/* TELEFONY (<= 480px) */

@media (max-width: 480px) {

  .reviews-section h2 {

    margin-bottom: 20px;

  }



  .review-content {

    padding: 0 12px;

    gap: 14px;

  }



  .review-text {

    font-size: clamp(15px, 4vw, 17px);

    line-height: 1.5;

  }



  .review-author {

    font-size: clamp(13px, 3.5vw, 15px);

  }



  .review-image img {

    width: min(80%, 250px);

    border-radius: 12px;

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

  }



  /* šipky posuneme lehce níž, ať nepřekrývají nadpisy */

  .nav-btn {

    top: 55%;

    width: 48px;

    height: 48px;

    font-size: 1.5rem;

  }



  .prev { left: 00px; }

  .next { right: 0px; }

}

















    /* ================================

   Kontakt – více středově založené

=================================== */

#kontakt {

  font-family: system-ui, sans-serif;

  padding: 56px 20px;

  color: #0b1b2b;

  padding-bottom: 200px;

}



#kontakt .wrap {

  max-width: 900px;

  margin: 0 auto;

  text-align: center;                /* nadpisy + lead na střed */

}



#kontakt .eyebrow {

  display: inline-block;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

  background: #e6f3ff;

  color: #0a5db3;

  padding: 6px 12px;

  border-radius: 999px;

}



#kontakt h2 {

  font-size: clamp(28px, 4vw, 40px);

  margin: 12px 0 16px;

}



#kontakt .lead {

  font-size: clamp(16px, 2vw, 18px);

  color: #35506b;

  max-width: 60ch;

  margin: 0 auto 32px;               /* text na střed + mezera dolů */

}



/* Formulář vycentrovaný, pevná max šířka */

#kontakt .contact-form {

  display: flex;

  flex-direction: column;

  align-items: center;                /* celé tělo formuláře na střed */

  gap: 20px;

}



#kontakt .contact-form .form-grid {

  display: grid;

  gap: 20px;

  width: 100%;

  max-width: 720px;                   /* příjemná šířka pro čtení */

  margin: 0 auto;                     /* vycentrovat grid */

  justify-items: stretch;

}



@media (min-width: 700px) {

  #kontakt .contact-form .form-grid {

    grid-template-columns: 1fr 1fr;

  }

  #kontakt .contact-form .form-group.full {

    grid-column: span 2;

  }

}



/* Položky: text vlevo kvůli čitelnosti, ale celek je na středu */

#kontakt .form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

  text-align: left;                   /* labely a vstupy zarovnat vlevo */

}



#kontakt .form-group label {

  font-size: 14px;

  font-weight: 600;

  color: #0b1b2b;

}



#kontakt .form-group input,

#kontakt .form-group textarea {

  padding: 12px 14px;

  border: 1px solid #cdd9e3;

  border-radius: 8px;

  font-size: 15px;

  font-family: inherit;

  width: 100%;                        /* vstupy přes celou šířku gridu */

  transition: border-color .2s ease, box-shadow .2s ease;

}



#kontakt .form-group input:focus,

#kontakt .form-group textarea:focus {

  outline: none;

  border-color: #0a5db3;

  box-shadow: 0 0 0 3px rgba(10,93,179,.15);

}



/* Tlačítko na střed */

#kontakt .btn.primary {

  background: #35c554;

  color: #fff;

  border: none;

  border-radius: 999px;

  padding: 14px 28px;

  font-size: 16px;

  cursor: pointer;

  transition: background .2s ease;

  align-self: center;                 /* vycentrovat tlačítko */

}



#kontakt .btn.primary:hover {

  background: #08498c;

}













































    /* ================================

       Moderní footer – Hravé kontinenty

    =================================== */



footer {

    background-color: #b9a36594;

    border-top: 3px solid #000000; /* white border */ 



}

.foter-div{

    display: flex;

    justify-content: space-between;

    padding: 20px;

    text-align: center;

    padding-top: 30px;

    padding-left: 10%;

    padding-right: 10%;

}

.footer-section {

    flex-basis: 267px; 

}

.logo-foter{

    width:200px ;

}

.footer-section h3 {

    font-size: 18px;

    margin-bottom: 10px;

    color: #000000;

    text-transform: uppercase;

}

.footer-section p {

    font-size: 16px;

    color: #000000;

}

#foter-down{

    margin-top: 50px;

}

.media-icons{

    text-align: center;

    margin-top: -30px;

}

.media{

    margin: 6px;

    width: 40px;

    transition: transform 0.3s ease-in-out;

    cursor: pointer;

    user-select: none;

}

.media:hover{

    transform: scale(0.92);

    opacity: 50%;

}

.end{

    color: #000000;

    text-align: center;

    width: 100%;



    position: absolute;

       background-color: #b9a36594;

}

.WebStavitel{



    font-size: 12px;

}



@media(max-width:1800px){

    .foter-div{

        padding-left: 2%;

        padding-right: 2%;

    }

}

@media(max-width:1500px){

    .foter-div{

        padding-left: 0%;

        padding-right: 0%;

    }

}





@media(max-width:1400px){

    .foter-div{

        display: block;

        justify-content: space-between;

        padding: 20px;

        text-align: center;

        padding-top: 30px;

        padding-left: 10%;

        padding-right: 10%;

    }

    .footer-section{

        margin-top: 55px;

    }

    .media-icons{

        margin-top: 35px;

    }

}