@charset "UTF-8";
@import url("https://use.typekit.net/zbj2mmz.css");

:root {
  --color-primary: #0020ff;
  --color-secondary: #e900e7;
  --color-black-nadpis: #1b1f21;
  --color-text: #0e0f15;
  --color-w: #ffffff;
  --font-main-compact: "field-gothic-compact", sans-serif;
  --font-main-inter: "inter-18pt", sans-serif;
  --font-size-quote: 24px;
  --font-size-menu: 23px;
  --font-size-menu-mobile: 26px;
  --font-size-text: 20px;
  --font-size-nadpis: 30px;
  --container-width: 1180px;
  --scroll-menu: 83px;
  --font-size-urcene: 24px;
  --padding-1920: 60px; /* padding zhora, zdola medzi sekciami, optimal. 1920px */
  --link-color-blue-background: #e900e7;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--color-w);
  font-family: var(--font-main-compact);
  scroll-behavior: smooth;
}

body {
  padding-top: var(--scroll-menu);
  overflow-x: hidden;
}

#o-podujati,
#miesto,
#partneri,
#kontakty,
#registracia,
#benefits,
#program {
  scroll-margin-top: var(--scroll-menu);
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

#myBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 16px;
  /* Place the button at the bottom of the page */
  right: 40px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background: linear-gradient(45deg, #0020ff 0%, #e900e7 100%);
  /* Set a background color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 18px;
  /* Some padding */
}

.ar {
  height: 19px;
}

/* --- HEADER --- */
.main-header {
  background-color: var(--color-primary);
  width: 100%;

  position: fixed; /* Zafixuje hlavičku na obrazovke */
  top: 0; /* Prilepí ju úplne nahor */
  left: 0; /* Prilepí ju k ľavému okraju */
  width: 100%; /* Musí byť na celú šírku */
  z-index: 1000; /* Zabezpečí, že bude NAD všetkými ostatnými prvkami (aj nad FAQ) */

  /* Odporúčam pridať pozadie a jemný tieň, aby texty pod ňou nepresvitali */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

/*.logo {
  margin-left: 12px;
}*/
.logo img {
  width: 105px;
  display: block;
}

.main-nav {
  margin-left: auto;
  margin-right: 25px;
}

.mobile-nav-toggle {
  display: none;
}

.mobile-nav-reg {
  display: none;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-family: var(--font-main-compact);
  font-size: var(--font-size-menu);
  font-weight: 500;
  transition: color 0.3s;
}

.main-nav a:hover {
  color: var(--color-secondary);
}

.cursor:hover {
  cursor: pointer;
}

/* --- BUTTONS (Zjednotené) --- */
.btn-register,
.btn-partner {
  padding: 12px 24px;
  font-family: var(--font-main-compact);
  font-size: var(--font-size-menu);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
  /* Obe majú border 2px, aby mali rovnakú výšku */
}

.btn-komplet {
  padding: 12px 24px;
  font-family: var(--font-main-compact);
  font-size: var(--font-size-menu);
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
}

.btn-register {
  background-color: var(--color-secondary);
  color: white;
}

.btn-register:hover {
  background-color: white;
  color: var(--color-primary);
}

.partner-btnn {
  display: inline-block; /* Dôležité, aby transformácia fungovala */
  transform: translateY(-1.5px); /* Záporná hodnota posúva nahor */
}

.without-hover {
  /* VYPNUTIE SYSTÉMOVÉHO ZVÝRAZNENIA PRI KLIKNUTÍ */
  -webkit-tap-highlight-color: transparent !important; /* Pre Safari a Chrome */

  /* Pre istotu ošetríme aj focus stav v niektorých prehliadačoch */
  outline: none !important;
  /* 1. Vypnutie natívneho zvýraznenia (Safari/Chrome) */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-tap-highlight-color: transparent !important;

  /* 2. Zrušenie systémového obrysu pri kliknutí */
  outline: none !important;
  box-shadow: none !important; /* Ak máš vlastný tieň, prepíš ho na tvoj pôvodný, napr. tieň, čo sme robili, toto len ruší predvolený chrome tieň */

  /* 3. Zákaz označovania textu pri držaní prsta na tlačidle */
  -webkit-user-select: none !important; /* Safari */
  user-select: none !important; /* Štandard */

  /* 4. Vynútenie hardvérovej akcelerácie */
  /* Niekedy prehliadač nestíha prekresľovať zaoblenie počas animácie scale(0.95). 
       Tento riadok prinúti telefón renderovať animáciu dokonale plynulo: */
  transform: scale(1) translateZ(0);
  backface-visibility: hidden;
}

.without-hover:active {
  transform: none !important; /* Vypne zmenšovanie, tlačidlo pri kľuknutí "neblikne" */
  transition: none !important; /* Vypne prechodové efekty, ktoré by prehliadač mohol zmraziť */
  -webkit-tap-highlight-color: transparent !important; /* Pre Safari a Chrome */

  /* Pre istotu ošetríme aj focus stav v niektorých prehliadačoch */
  outline: none !important;
}

.without-hover:hover,
.without-hover:active,
.without-hover:focus {
  transition: none !important;
  transform: none !important;
  /* Ak sa ti menila farba pozadia pri hoveri, na mobile ju radšej nechaj statickú, 
           aby nezostala visieť "napoly zmenená" pri odchode zo stránky */
}

.wbg:hover {
  color: white;
  background-color: var(--color-primary);
}

.btn-partner {
  background-color: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-komplet {
  background-color: var(--color-secondary);
  color: white;
}

.btn-komplet:hover {
  background-color: var(--color-secondary);
  color: white;
}

.btn-partner:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.be_partner {
  margin-top: 25px;
}

.special-partner {
  border: 2px solid #fff;
  background-color: transparent;
  text-decoration: none !important;
}

.special-partner:hover {
  border: 2px solid #fff;
  background-color: transparent;
  text-decoration: none !important;
}

.btn-register.without-hover:hover,
.btn-register.without-hover:active,
.btn-register.without-hover:focus {
  background-color: var(--color-secondary) !important;
  color: white !important;
  transition: none !important;
  transform: none !important;
}

/* --- HERO SEKCIA --- */

.hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  background: #fff;
}

.hero-mobile-image,
.br_terms {
  display: none;
}

.hero-bg {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 34%,
      rgba(255, 255, 255, 0.96) 44%,
      rgba(255, 255, 255, 0.78) 54%,
      rgba(255, 255, 255, 0.4) 66%,
      rgba(255, 255, 255, 0) 82%
    ),
    url("../img/hero_banner.png") right center / cover no-repeat;
}

.hero-wrapper {
  position: relative;
  z-index: 2;
  min-height: 760px;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 70px;
}

.hero-content {
  width: 52%;
  max-width: 720px;
}

.hero-content h1 {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  font-size: 70px;
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  font-family: var(--font-main-compact);
  font-size: var(--font-size-nadpis);
  color: var(--color-black-nadpis);
  font-weight: 700;
  flex-wrap: wrap;
}

.hero-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-info-row .location {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

.separator {
  width: 1px;
  height: 28px;
  background: rgba(25, 27, 67, 0.35);
}

.icon-location {
  height: 25px;
  width: auto;
}

.hero-line {
  width: 53px;
  height: 3px;
  background: #cfd5ff;
  margin: 36px 0 28px;
}

.hero-quote {
  position: relative;
  margin: 0;
  padding-left: 75px;
  font-family: var(--font-main-inter);
  color: var(--color-black-nadpis);
}

.hero-quote strong {
  display: block;
  line-height: 1.45;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: var(--font-size-quote);
}

.hero-quote em {
  color: #d90fc4;
  font-style: italic;
}

.quote-mark {
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 90px;
  line-height: 1;
  color: #d90fc4;
  font-family: Georgia, serif;
  font-weight: 700;
}

.quote-icon {
  transform: rotate(180deg);
  width: 48px;
  padding-top: 20px;
}

.quote-icon-smaller {
  transform: rotate(180deg);
  width: 30px;
  padding-top: 30px;
}

.hero-subtitle {
  margin: 50px 0 45px;
  font-size: var(--font-size-text);
  line-height: 1.45;
  padding-left: 75px;
  color: var(--color-black-text);
}

.hero-btns {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 44px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin-top: 50px;
  justify-items: center;
  text-align: center;
  border-top: 2px solid #cfd5ff;
  padding-top: 30px;
  font-size: 17px;
}

.hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-stats strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: var(--font-main-compact);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.icon-stats {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.stats-mobile {
  display: none !important;
}

.hero-bottom {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 2px solid #cfd5ff;
  font-size: var(--font-size-text);
  color: var(--color-black-text);
}

.blue_zs {
  color: var(--color-primary);
}

/* HERO RECENZIA / REFERENCIA */
.hero-wrapper {
  position: relative;
}

.hero-reference {
  position: absolute;
  right: clamp(35px, 5vw, 110px);
  bottom: clamp(70px, 10vh, 125px);
  z-index: 10;

  width: clamp(430px, 30vw, 520px);
  padding: 28px 26px;

  display: flex;
  align-items: flex-start;
  gap: 12px;

  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(42, 45, 88, 0.44);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero-reference-icon,
.quote-icon {
  color: #d90fc4;
  font-family: Georgia, serif;
  font-size: 70px;
  line-height: 0.8;
  font-weight: 400;
  flex: 0 0 auto;
  margin-top: 2px;
}

.hero-reference-content,
.reference-content {
  flex: 1;
}

.hero-reference-content p,
.reference-content p {
  margin: 0;
  color: #fff;
  font-family: var(--font-main-compact);
  font-size: 21px;
  line-height: 1.45;
  font-weight: 400;
}

.hero-reference-content span,
.reference-content span {
  display: block;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-main-compact);
  font-size: 17px;
  text-align: right;
}

.auth-bila {
  font-size: 19px;
  margin-top: 6px !important;
  font-weight: 500;
}

/* --- ABOUT SECTION --- */
.mobile-about-people,
.special_mobile {
  display: none;
}

.about {
  width: 100%;
  background-color: var(--color-primary);
  color: white;
  overflow: hidden;
  /* Odstránime spodný padding sekcie, aby sa obrázok dotýkal hrany */
  padding: var(--padding-1920) 0 0 0;
  padding-bottom: 50px;
}

.about-wrapper {
  display: flex;
  /* ZMENA: Toto prichytí text aj obrázok na spodnú hranu sekcie */
  align-items: center;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0px;
  position: relative;
}

.about-content {
  flex: 0 0 40%;
  z-index: 2;
  padding-right: 40px;
  /* Pridáme padding-bottom len textu, aby "neležal" na zemi, 
       zatiaľ čo obrázok sa bude dotýkať spodku */
  padding-bottom: 0;
}

.about-content h2 {
  font-family: var(--font-main-compact);
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  margin: 0 0 30px 0;
  text-transform: uppercase;
}

.about-content p {
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  margin-bottom: 25px;
  font-weight: 500;
}

.mobile-about-wrapper {
  display: none;
}

.spajanie {
  font-family: var("--font-main-inter");
  font-weight: 800 !important;
  padding: 10px 0;
}

.organizer_last p {
  padding-bottom: 0;
  margin-bottom: 0;
}

.quote {
  font-weight: 400 !important;
  font-family: var("--font-main-inter");
  font-style: italic;
}

/* --- OBRÁZOK (Zarovnaný na spodok) --- */
.about-image {
  flex: 0 0 60%;
  display: flex;

  justify-content: center; /* horizontálne */
  align-items: center; /* vertikálne */
  padding-left: 2%;
  line-height: 0;
}

.about-image iframe {
  width: 100%;
  max-width: 1160px;
  aspect-ratio: 16 / 9;
  display: block;

  border: 0;
  border-radius: 20px;
}

/* --- TOPICS --- */
.list-topics {
  background: linear-gradient(
    90.45deg,
    #e900e7 5.95%,
    #0020ff 30.99%,
    #141dfd 70.64%,
    #e900e7 111.07%
  );
  padding: 30px 0; /* Odsadenie sekcie zhora a zdola */
}

.topics {
  padding: var(--padding-1920) 0;
  background-color: #fff;
  overflow-x: hidden;
}

.topic-row {
  display: flex;
  align-items: center;
  /* justify-content: space-between rozptýli text a obrázok presne na okraje 1180px kontajnera */
  justify-content: space-between;
  margin-bottom: 90px; /* Väčšia medzera medzi blokmi pre lepšiu prehľadnosť */
}

/* Otočenie poradia pre druhý riadok */
.topic-row.reverse {
  flex-direction: row-reverse;
}

/* 1. KONTROLNÝ BOD: Šírka obrázka */
.topic-image {
  /* Fixná šírka boxu pre obrázok */
  flex: 0 0 528px;
}

.topic-image {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.topic-image::before {
  content: "";
  position: absolute;

  width: 150%;
  height: 130%;

  left: 50%;
  top: 52%;

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

  background: radial-gradient(
    ellipse at center,
    rgba(35, 75, 255, 0.96) 0%,
    rgba(80, 115, 255, 0.7) 22%,
    rgba(130, 155, 255, 0.4) 48%,
    rgba(214, 220, 255, 0.16) 70%,
    rgba(214, 220, 255, 0) 88%
  );

  filter: blur(18px);

  z-index: -1;
  pointer-events: none;
}

.topic-image img {
  position: relative;
  z-index: 1;
}

.topic-image img {
  width: 528px;
  height: auto;
  display: block;
}

/* 2. KONTROLNÝ BOD: Šírka textu 
   Výpočet: 1180px (kontajner) - 528px (obrázok) - 60px (požadovaná medzera) = 592px
*/
.topic-text {
  flex: 0 0 528px;
}

.topic-text h3 {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  /* Uisti sa, že máš premennú --font-size-nadpis definovanú v :root (napr. 28px) */
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  line-height: 1.2;
}

.topic-text p {
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  margin-bottom: 25px;
  color: var(--color-text);
}

/* Štýlovanie zoznamu (Diskusia o tom) */
.topic-text strong {
  display: block;
  font-family: var(--font-main-inter);
  margin-bottom: var(--font-size-text);
  font-size: var(--font-size-text);
  color: var(--color-black-nadpis);
}

.topic-text ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}

.topic-text li {
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  margin-bottom: 8px;
  color: var(--color-text);
}

/* Odstránenie marginu pri poslednom riadku, aby nevznikla diera nad footerom */
.topic-row:last-child {
  margin-bottom: 0;
}

.head-section {
  background: linear-gradient(90.8deg, #0020ff 75.75%, #e900e7 97.43%);
  padding: 30px 0; /* Odsadenie sekcie zhora a zdola */
}

/* --- AUDIENCE SECTION --- */
.audience {
  padding: var(--padding-1920) 0;
  background-color: #fff;
  text-align: center;
}

.audience-add {
  font-weight: 600;
  transform: translateY(25px);
  font-size: var(--font-size-urcene);
}

.audience-title {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  /* Uisti sa, že máš premennú --font-size-nadpis definovanú v :root (napr. 28px) */
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  padding-bottom: var(--padding-1920);
}

.smaller-h3 {
  font-size: var(--font-size-urcene);
}

.audience-grid {
  display: flex;
  align-items: center; /* Vycentruje ikony voči vysokému obrázku */
  justify-content: space-between;
  gap: 40px;
}

.audience-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 80px; /* Rozostup medzi ikonami nad sebou */
}

/* Položka s ikonou */
.audience-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.audience-icon {
  width: 70px;
  height: 70px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audience-icon img {
  width: 30px;
  /*height: auto;*/
  height: 30px !important;
  filter: brightness(0) invert(1); /* Ak sú ikony čierne, spraví ich bielymi */
}

.audience-item p {
  font-family: var(--font-main-compact);
  font-size: var(--font-size-urcene);
  font-weight: 600;
  color: var(--color-black-nadpis);
  max-width: 200px;
  line-height: 1.2;
}

/* Stredný obrázok */
.audience-main-img {
  flex: 0 0 350px; /* Fixná šírka obrázka */
}

.audience-main-img img {
  width: 100%;
  height: auto;
  display: block;
}

.audience-footer {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  /* Uisti sa, že máš premennú --font-size-nadpis definovanú v :root (napr. 28px) */
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  line-height: 1.2;
  margin-top: var(--padding-1920);
  margin-bottom: 0;
}

.smaller-h3 {
  font-size: var(--font-size-urcene);
  line-height: 1.2;
}

.speaker-mobile {
  display: none;
}

/* --- LOCATION --- */
.location-section {
  padding: var(--padding-1920) 0;
  background-color: #fff;
}

/* Horná časť - Flexbox */
.location-top {
  display: flex;
  gap: 40px;
  align-items: flex-end; /* Zarovnanie textu na spodok k obrázku */
  margin-bottom: 40px;
}

.location-text {
  flex: 1;
}

.location-image {
  flex: 1;
}

.location-image img {
  width: 100%;
  height: auto;
  display: block;
  /* Tu môžeš pridať ten jemný modrý shadow, ak ho tam chceš */
  box-shadow: 0 10px 40px rgba(214, 220, 255, 0.5);
}

/* Mapa na celú šírku */
.location-map {
  width: 100%;
  line-height: 0; /* Odstráni drobnú medzeru pod iframe */
}

.address-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-main-inter);
  color: var(--color-black-nadpis);
  font-weight: 700;
}

.icon-address {
  height: 28px;
  width: auto;
}

.adress_location {
  margin: 0 !important;
  line-height: 1;
}

.adress_location p {
  font-family: var(--font-main-compact);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-black-nadpis);
  margin-top: 0;
  margin: 0;
}

.pad-sm p {
  margin-bottom: 10px;
}

/*-- BENEFITS --*/
.benefits-section {
  padding-top: 30px;
  padding-bottom: 30px;
  background: linear-gradient(270deg, #707cfd 0%, #0120ff 100%);
}

.benefits-title {
  margin: 0 0 26px;
  color: #fff;
  font-family: var(--font-main-compact);
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.benefits-grid {
  padding-top: 30px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.benefit-card {
  min-height: 210px;
  padding: 24px 22px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  border: 2px solid #ffffff;
}

.benefit-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.benefit-card h3 {
  margin: 0 0 12px;
  color: #fff;

  font-family: var(--font-main-compact);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
}

.benefit-card p {
  max-width: 280px;
  margin: 0;

  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  font-weight: 400;
  line-height: 1.35;
  margin-top: 12px;
}

/*-- PROGRAM --*/
.harmonogram-section {
  padding: var(--padding-1920) 0;
  background-color: #fff;
}

.topte-text {
  display: flex;
  justify-content: center;
}

.harmonogram_title {
  font-weight: 600;
  font-size: var(--font-size-nadpis);
  text-align: center;
}

.mobile-time {
  display: none;
}

.program-section {
  background: #fff;
  overflow: hidden;
  padding-bottom: 40px;
}

.bott {
  padding-top: 40px;
}

.pdf-link-program {
  text-align: center;
  padding-bottom: 40px;
  font-size: var(--font-size-text);
}

.pdf-link-program a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-primary);
}

/* =========================================
   PREPÍNAČ BLOKOV
========================================= */

.program-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 46px;
}

.program-tab {
  min-width: 105px;
  padding: 10px 18px;

  border: 0;
  background: var(--color-primary);
  color: #fff;

  font-family: var(--font-main-compact);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.program-tab:hover {
  transform: translateY(-2px);
}

.program-tab.active {
  background: var(--color-secondary);
}

/* =========================================
   PANELY
========================================= */

.program-panel {
  display: none;
}

.program-panel.active {
  display: block;
}

/* =========================================
   HLAVIČKA BLOKU
========================================= */

.program-heading {
  margin-bottom: 40px;
  text-align: center;
}

.program-heading h2 {
  margin: 0;

  color: var(--color-primary);
  font-family: var(--font-main-compact);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.program-heading p {
  margin: 9px 0 0;

  color: var(--color-primary);
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  line-height: 1.3;
}

.duration {
  color: var(--color-text) !important;
}

.program-footer {
  margin-top: 40px;
}

/* =========================================
   TIMELINE
========================================= */

.program-timeline {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

/* zvislá os */

.program-timeline::before {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50%;

  width: 3px;
  background: #d6d6d6;

  transform: translateX(-50%);
}

.program-timeline-3blok {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}

/* zvislá os */

.program-timeline-3blok::before {
  content: "";
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 50%;

  width: 3px;
  background: #d6d6d6;

  transform: translateX(-50%);
}

/* =========================================
   JEDNA POLOŽKA
========================================= */

.program-item {
  position: relative;
  min-height: 150px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    170px
    minmax(0, 1fr);

  align-items: center;
}

/* =========================================
   KARTA
========================================= */

.program-card {
  position: relative;
  min-height: 70px;
  padding: 16px 22px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 2px solid var(--color-primary);
  background: #fff;
  text-align: center;
}

.program-card h3 {
  margin: 0;

  color: var(--color-primary);
  font-family: var(--font-main-compact);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.program-card p {
  margin: 8px 0 0;

  color: var(--color-text);
  font-family: var(--font-main-inter);
  font-size: 15px;
  line-height: 1.25;
}

/* karta naľavo */

.program-item.item-left .program-card {
  grid-column: 1;
}

/* karta napravo */

.program-item.item-right .program-card {
  grid-column: 3;
}

/* =========================================
   STREDOVÝ STĹPEC
========================================= */

.program-axis {
  position: relative;
  z-index: 2;

  grid-column: 2;
  grid-row: 1;

  width: 100%;
  height: 58px;
}

/* ikona presne na osi */

.program-node {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 58px;
  height: 58px;

  transform: translate(-50%, -50%);
  z-index: 3;
}

.program-node img {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* čas */

.program-axis time {
  position: absolute;
  top: 50%;

  color: var(--color-text);
  font-family: var(--font-main-compact);
  font-size: var(--font-size-text);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  transform: translateY(-50%);
}

/* ľavá karta = čas napravo od osi */

.program-item.item-left .program-axis time {
  left: calc(50% + 58px);
}

/* pravá karta = čas naľavo od osi */

.program-item.item-right .program-axis time {
  right: calc(50% + 58px);
}

/* =========================================
   SPOJOVACIE ČIARY
========================================= */

/* z ľavej karty po ikonu */

.program-item.item-left .program-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -85px;

  width: 85px;
  height: 2px;

  background: var(--color-primary);
  transform: translateY(-50%);
}

/* z ikony po pravú kartu */

.program-item.item-right .program-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -85px;

  width: 85px;
  height: 2px;

  background: var(--color-primary);
  transform: translateY(-50%);
}

/* =========================================
   RUŽOVÉ POLOŽKY
========================================= */

.program-item.color-pink .program-card {
  border-color: #8300c1;
}

.program-item.color-pink .program-card h3 {
  color: #8300c1;
}

.program-item.color-pink .program-card::before,
.program-item.color-pink .program-card::after {
  background: #8300c1;
}

/* =========================================
   ČIERNE POLOŽKY
========================================= */

.program-item.color-black .program-card {
  border-color: var(--color-text);
}

.program-item.color-black .program-card h3 {
  color: var(--color-text);
}

.program-item.color-black .program-card::before,
.program-item.color-black .program-card::after {
  background: var(--color-text);
}

/* =========================================
   SPODNÁ ČASŤ
========================================= */

.program-note {
  margin: 30px 0 14px;

  color: var(--color-text);
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  text-align: center;
}

.program-button {
  display: block;
  width: max-content;
  margin: 0 auto;
  padding: 13px 28px;

  background: var(--color-secondary);
  color: #fff;

  font-family: var(--font-main-compact);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

/*-- FEES --*/
.fees-section {
  padding: var(--padding-1920) 0;
  background-color: #fff;
}

.fees-container {
  max-width: 800px;
  border: 2px solid var(--color-primary); /* Modré ohraničenie */
  padding: 40px;
  position: relative;
  margin-top: var(--padding-1920);
  margin-left: auto; /* centrovanie pridané */
  margin-right: auto; /* centrovanie pridané */
}

.text-fees p {
  margin: 0 !important;
  font-size: var(--font-size-text);
  font-family: var(--font-main-inter);
  color: var(--color-text);
}

.move-to-center {
  text-align: center;
}

.fees-title {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  font-weight: 800;
  font-size: var(--font-size-nadpis);
  margin-bottom: 30px;
  padding-top: 0px;
  margin-top: 0px;
}

.fees-list {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.fees-list li {
  font-family: var(--font-main-inter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  gap: 20px;
}

/* Štvorčekové odrážky pri cenách */
.fees-list li.black::before {
  content: "■";
  color: var(--color-text);
  font-size: var(--font-size-text);
  margin-right: 8px;
}

.fees-list li.blue::before {
  content: "■";
  color: var(--color-primary);
  font-size: var(--font-size-text);
  margin-right: 8px;
}

.fee-name-black {
  flex: 1;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-text);
}

.fee-name-blue {
  flex: 1;
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--font-size-text);
}

/* Tabletky (Badges) */
.fee-badge {
  padding: 6px 20px 7px 20px;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
  font-size: var(--color-text);
}

.fee-badge.blue {
  background-color: var(--color-primary);
}
.fee-badge.black {
  background-color: var(--color-text);
}
.fee-badge.black-wide {
  background-color: var(--color-text);
  padding: 8px 25px;
}

.fees-info {
  font-family: var(--font-main-inter);
  font-weight: 600;
  margin-bottom: 30px;
  line-height: 1.5;
}

.fees-details h3 {
  color: var(--color-primary);
  font-size: var(--font-size-nadpis);
  margin: 40px 0 15px 0;
  font-family: var(--font-main-compact);
}

.fees-details ul {
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: var(--font-size-text);
  font-family: var(--font-main-inter);
}

.fees-details ul li {
  margin-bottom: 8px;
}

.mar-30 {
  margin-top: 30px;
}

/* partners*/
.partners-cta {
  position: relative;
  /* Cesta k tvojmu stiahnutému obrázku */
  background-image: url("../img/be-partner.png");
  background-size: cover;
  background-position: 100% center;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

/* MODRÝ GRADIENT CEZ OBRÁZOK */
.partners-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Gradient zľava doprava: sýta modrá -> priehľadná */
  background: linear-gradient(
    to right,
    rgba(0, 32, 255, 1) 0%,
    rgba(0, 32, 255, 0.8) 40%,
    rgba(0, 32, 255, 0.2) 100%
  );
  z-index: 1;
}

.partners-cta .container {
  position: relative;
  z-index: 2; /* Aby bol text nad gradientom */
}

.partners-content {
  max-width: 600px; /* Aby text nešiel cez celú šírku a nezakryl tváre vpravo */
  padding-top: 30px;
  padding-bottom: 30px;
}

.loga {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.loga img {
  max-width: 100%;
}

.partners-content h2 {
  font-family: var(--font-main-compact);
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  margin: 0 0 30px 0;
  text-transform: uppercase;
}

.partners-content p {
  font-family: var(--font-main-inter);
  font-size: var(--font-size-text);
  margin-bottom: 25px;
  font-weight: 500;
  margin-bottom: 0;
  padding-bottom: 0;
}

.partners-content a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

.partners-content a:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* -- FAQ --*/
.faq-section {
  padding: var(--padding-1920) 0;
}

.faq-item {
  border: 2px solid var(--color-primary);
  margin-bottom: 15px;
  background: #fff;
}

.faq-accordion {
  padding-top: 40px;
}

.faq-question {
  width: 100%;
  padding: 25px 30px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-main-compact);
  font-weight: 700;
  font-size: var(--font-size-nadpis);
  text-transform: uppercase;
  color: var(--color-black-nadpis);
}

/* Skrytá odpoveď - základ pre animáciu */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Toto robí ten plynulý pohyb */
}

.answer-content {
  padding: 0 30px 25px 30px;
  font-size: var(--font-size-text);
  font-family: var(--font-main-inter);
}

.answer-content p {
  padding: 0px;
  margin: 0px;
}

/* Kontajner pre ikonku */
.faq-icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  margin-left: 20px;
}

/* Samotná šípka vytvorená pomocou borderov */
.faq-icon::before {
  content: "";
  position: absolute;
  top: 40%; /* Pozícia, aby po rotácii sedela v strede */
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--color-text); /* Modrá farba šípky */
  border-bottom: 3px solid var(--color-text);
  transform: translate(-50%, -50%) rotate(45deg); /* Smeruje dole */
  transition: transform 0.3s ease;
}

/* Rotácia šípky, keď je položka aktívna (otvorená) */
.faq-item.active .faq-icon::before {
  transform: translate(-50%, 0%) rotate(-135deg); /* Smeruje hore */
}

/* -- CONTACT --*/
.contact-section {
  padding: var(--padding-1920) 0;
}

/* Horné boxy */
.contact-boxes {
  display: flex;
  gap: 50px;
  margin-bottom: var(--padding-1920);
  align-items: flex-start;
}

.contact-box {
  border: 2px solid var(--color-primary);
  padding: 30px;
  width: 350px;
}

.contact-box p {
  color: var(--color-text);
  font-size: var(--font-size-text);
  font-family: var(--font-main-inter);
}

.contact-box h3 {
  color: var(--color-primary);
  font-family: var(--font-main-compact);
  /* Uisti sa, že máš premennú --font-size-nadpis definovanú v :root (napr. 28px) */
  font-size: var(--font-size-nadpis);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.contact-email {
  width: 470px;
  min-height: 20px;
}

.org-logo {
  height: 40px;
  margin-bottom: 10px;
}

.main-email {
  font-family: var(--font-main-compact);
  font-weight: 700;
  font-size: var(--font-size-nadpis);
  color: var(--color-black-nadpis);
}

/* Tím Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.profile-img {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card h4 {
  font-size: var(--font-size-text);
  font-weight: 500;
  font-family: var(--font-main-inter);
  margin-bottom: 20px;
  color: var(--color-black-nadpis);
}

.team-email,
.team-phone {
  font-family: var(--font-main-inter);
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--font-size-text);
  margin-bottom: 5px;
  border-bottom: 2px solid var(--color-text); /* Linka pod mailom/tel ako v návrhu */
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.team-role {
  font-family: var(--font-main-inter);
  margin-top: 20px;
  font-size: var(--font-size-text);
  color: var(--color-text);
  line-height: 1.4;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* --- NEWSLETTER --- */
.newsletter {
  background: linear-gradient(90.8deg, #6172fe 75.75%, #e900e7 97.43%);
  padding: 35px 0; /* Odsadenie sekcie zhora a zdola */
}

.newsletter-wrapper {
  display: flex;
  justify-content: space-between; /* Text naľavo, tlačidlo napravo */
  align-items: center; /* Vycentruje ich vertikálne na stred */
}

.newsletter-text {
  color: var(--color-w);
  font-family: var(--font-main-compact);
  font-size: 30px; /* Podľa vizuálu je to dosť výrazné */
  font-weight: 500;
  text-transform: uppercase; /* Všetko veľkým písmom */
  max-width: 800px; /* Aby sa text neťahal až k tlačidlu */
  line-height: 1.2;
}

.black-har {
  color: var(--color-text);
}

/* --- FOOTER --- */
.main-footer {
  background-color: var(--color-primary);
  color: white;
  padding: 50px 0 100px 0; /* Odsadenie zhora a zdola */
  font-family: var(--font-main-compact); /* Použitie tvojho fontu */
}

.footer-wrapper {
  display: flex;
  justify-content: space-between; /* Rozdelí stĺpce rovnomerne */
  align-items: flex-start; /* Zarovná stĺpce na hornú hranu */
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Stĺpec - Logo a ikony */
.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center; /* Vycentruje logo (105px) a rad ikon na stred */
  gap: 15px; /* Medzera medzi logom a radom ikon */
  width: 105px; /* Fixná šírka celého bloku podľa loga */
}

.footer-logo {
  width: 150px; /* Uprav podľa potreby */
  height: auto;
  display: block;
}

.social-icons {
  display: flex;
  gap: 2px; /* Medzera medzi jednotlivými štvorčekmi */
  justify-content: center;
  margin-left: 16px;
}

.social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px; /* Presný rozmer štvorca */
  height: 37px;
  text-decoration: none;
}

.social-item img {
  width: 100%; /* Obrázok sa snaží vyplniť štvorec */
  height: auto;
  padding: 4px; /* Tvoj požadovaný padding vnútri štvorca */
  display: block;
}

.thre img {
  width: 100%; /* Obrázok sa snaží vyplniť štvorec */
  height: auto;
  padding: 8px; /* Tvoj požadovaný padding vnútri štvorca */
  display: block;
  margin-top: -3px;
}

/* 2. Stĺpec - Copyright */
.col-copyright {
  display: flex;
  align-items: center;
  margin-top: -5px; /* Doladenie výšky podľa vizuálu */
}

.col-copyright p {
  margin: 0;
  font-size: 14px;
  margin-top: 40px; /* Aby bol v úrovni spodku loga */
}

/* 3. Stĺpec - Linky */
.col-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.col-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
  font-family: var(--font-main-inter);
}

.col-links a:hover {
  color: var(--link-color-blue-background);
}

/* 4. Stĺpec - Partner */
.partner-logo {
  width: 125px;
  height: auto;
}

/* Prvý stĺpec (Logo + Social) */
.col-brand {
  flex: 0 0 105px; /* Fixná šírka presne podľa loga */
}

/* Druhý stĺpec (Copyright) */
.col-copyright {
  flex: 0 0 200px; /* Nastav viac, ak chceš viac miesta pre text */
  text-align: left;
}

/* Tretí stĺpec (Právne linky) */
.col-links {
  flex: 0 0 300px; /* Tento stĺpec je zvyčajne najširší kvôli dlhým názvom */
}

/* Štvrtý stĺpec (Partner) */
.col-partner {
  flex: 0 0 270px; /* Podľa šírky loga Farmiprofi */
  display: flex;
  justify-content: flex-end; /* Tlačí logo partnera úplne doprava */
}

/* wide 2000px*/

@media (max-width: 2000px) {
  .hero-wrapper {
    padding-top: 100px;
  }

  .hero-image img {
    width: 850px;
    margin-left: -70px;
  }
  .about-image img {
    width: 1085px;
    margin-left: -110px;
  }
  .about-content {
    flex: 0 0 40%;
  }
}

@media (max-width: 1920px) {
  .hero-reference {
    bottom: clamp(80px, 8vw, 170px);
  }
  .hero-wrapper {
    padding-top: 80px;
  }
}

@media (max-width: 1810px) {
  .hero-wrapper {
    padding-top: 80px;
  }
  .hero-image img {
    width: 800px;
    margin-left: -80px;
  }
  .about-image img {
    width: 960px;
    margin-left: -110px;
  }
  .about-content {
    flex: 0 0 40%;
  }
}

@media (max-width: 1650px) {
  .hero-wrapper {
    padding-top: 80px;
  }
  .hero-image img {
    width: clamp(300px, 50vw, 850px);
    margin-left: -5vw; /* Posun relatívny k šírke okna */
  }
  .about-image img {
    width: clamp(300px, 55vw, 850px);
    margin-left: -5vw; /* Posun relatívny k šírke okna */
    height: auto;
  }
  .benefit-card h3 {
    font-size: 26px;
  }
}

@media (max-width: 1366px) {
  .hero-wrapper {
    padding-bottom: 30px;
  }
}

@media (max-width: 1300px) {
  :root {
    --container-width: 90%;
    --font-size-menu: 21px;
    --font-size-text: 18px;
    --font-size-nadpis: 27px;
    --font-size-urcene: 20px;
  }
  .hero-wrapper {
    padding-top: 90px;
    padding-bottom: 50px;
  }
  .hero-image img {
    width: clamp(300px, 48vw, 850px);
    margin-left: -4vw; /* Posun relatívny k šírke okna */
  }
  .about-image img {
    width: clamp(300px, 55vw, 850px);
    margin-left: -7vw; /* Posun relatívny k šírke okna */
    height: auto;
  }
  .topic-image {
    /* Fixná šírka boxu pre obrázok */
    flex: 0 0 47%;
  }
  .topic-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .topic-text {
    flex: 0 0 47%;
  }
  .profile-img {
    width: 86px;
    height: 86px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
  }
  .hero-content h1 {
    font-size: 56px;
  }
  .hero-quote {
    font-size: 19px;
  }
  .col-partner {
    justify-content: center;
    align-items: center;
  }
  .audience-main-img {
    flex: 0 0 320px;
  }

  .newsletter-text {
    font-size: 28px;
  }
}

@media (max-width: 1250px) {
  .about-image {
    display: none;
  }
  .about-content {
    /* Zrušíme 45% šírku a povieme mu, nech zaberie všetko */
    flex: 0 0 100%;
    max-width: 100%;

    /* Zrušíme bočný padding, aby text nebol zbytočne odsadený od okraja mobilu */
    padding-right: 0;

    /* Upravíme padding-bottom pre mobil, aby tam nebola obrovská diera */
    padding-bottom: 0;
  }
  .about-container {
    /* Dopln si sem tvoj reálny názov rodiča */
    flex-direction: column;
  }

  .about {
    padding-bottom: 0px;
  }

  .newsletter-text {
    max-width: 70%;
  }
  .mobile-about-wrapper {
    width: 100%;
    background-color: var(--color-primary);

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

    padding: 50px 0;
    line-height: 0;
  }

  .mobile-about-wrapper iframe {
    width: 90%;
    aspect-ratio: 16 / 9;
    display: block;

    border: 0;
    border-radius: 20px;
  }
}

@media (max-width: 1050px) {
  :root {
    --container-width: 90%;
    --font-size-menu: 19px;
    --font-size-text: 17px;
    --font-size-nadpis: 25px;
    --font-size-urcene: 19px;
  }
  .main-nav ul {
    gap: 20px;
  }
  .main-nav {
    margin-right: 20px;
  }
  .faq-accordion {
    padding-top: 30px;
  }
  .col-copyright p {
    padding-right: 40px;
  }
  .newsletter-text {
    font-size: 25px;
  }
}

@media (max-width: 1125px) {
  .hero-reference {
    display: none;
  }

  .special_mobile {
    display: block;
  }
}
/* mobilna verzia */
@media (max-width: 1000px) {
  .main-nav,
  .header-actions {
    display: none;
  }

  .hero-content {
    width: 60%;
    max-width: 720px;
  }

  .hero-info {
    gap: 14px;
  }

  .logo img {
    width: 85px;
    display: block;
  }

  .hero-wrapper {
    padding-top: 90px;
    padding-bottom: 60px;
  }
  .hero-image img {
    width: clamp(300px, 50vw, 850px);
    margin-left: -4vw; /* Posun relatívny k šírke okna */
  }
  .contact-boxes {
    /* Zmení usporiadanie z riadku na stĺpec */
    flex-direction: column;
    /* Boxy sa teraz natiahnu na celú dostupnú šírku kontajnera */
    align-items: stretch;
    gap: 20px; /* Na mobile stačí menšia medzera medzi boxmi */
    text-align: center;
  }

  .contact-box {
    /* Zrušíme fixných 350px a dáme 100% šírku */
    width: 100%;
    /* Ak si predtým používal .contact-email s inou šírkou, 
           tento zápis ju prepíše na 100% */
  }

  .fees-container {
    max-width: 100%;
  }
  .team-grid {
    /* Vynútime jeden stĺpec za každú cenu */
    grid-template-columns: 1fr !important;

    /* Zrušíme fixné šírky, ak tam nejaké zostali */
    display: grid !important;
    width: 100% !important;
    gap: 50px !important;
  }

  .team-card {
    /* Zaistíme, aby karta zabrala celú šírku a centrovala sa */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .footer-wrapper {
    flex-direction: column;
    gap: 40px;
    text-align: center;
    align-items: center;
  }

  .col-copyright,
  .col-links,
  .col-partner {
    flex: 0 0 auto;
  }

  .col-partner {
    padding-bottom: 20px;
  }

  .col-copyright p {
    margin-top: 0;
    padding-right: 0px;
  }

  .newsletter {
    background: #6172fe;
  }

  #myBtn {
    right: 20px;
    /* Place the button 30px from the right */
  }

  .ar {
    height: 15px;
  }

  #cookie-settings-link {
    display: none;
  }

  .partner-logo {
    width: 110px;
    height: auto;
  }

  /*mobile menu*/
  .mobile-nav-reg {
    display: block !important;
  }
  /* 2. FIXNÝ HEADER - ostáva hore */
  .main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scroll-menu); /* Uprav podľa reálnej výšky tvojho loga */
    background-color: var(--color-primary) !important;
    z-index: +10001; /* Musí byť nad menu */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Voliteľné: jemný tieň pod lištou */
  }

  .header-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100%;
    padding: 0 20px !important;
  }

  /* 3. BURGER TLAČIDLO - Modré na bielom podklade */
  .mobile-nav-toggle {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    z-index: 10002;
  }

  .mobile-nav-toggle span {
    display: none !important; /* Skryje text "Menu" */
  }

  .hamburger,
  .hamburger::before,
  .hamburger::after {
    width: 30px;
    height: 3px;
    background-color: #fff !important; /* Tvoja modrá */
    display: block;
    transition: 0.3s;
    position: relative;
    margin-right: -20px;
  }

  .hamburger::before,
  .hamburger::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .hamburger::before {
    transform: translateY(-10px);
  }
  .hamburger::after {
    transform: translateY(10px);
  }

  /* Animácia na krížik (ostáva modrý v bielom pruhu) */
  .mobile-nav-toggle[aria-expanded="true"] .hamburger {
    background-color: transparent !important;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
    transform: rotate(45deg);
    top: 0;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
  }

  /* 4. MOBILNÉ MENU - začína pod headerom */
  .main-nav {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: center; /* Horizontálne na stred */

    position: fixed !important;
    top: 80px !important; /* Presne výška headeru */
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 80px) !important; /* Zvyšok obrazovky */

    background-color: var(--color-primary) !important;
    z-index: 99999;
    /* Pridáme padding navrch aj naspodok */
    padding-top: 60px !important;
    padding-bottom: 60px !important; /* Toto vytvorí ten „vzduch“ pod registráciou */

    /* Povolenie scrollu, ak je obsah vyšší ako displej */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Hladký scroll na iPhone */
    padding-left: 0%;

    /* Animácia vysúvania sprava */
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    visibility: hidden;
    overflow-y: auto; /* Ak je veľa položiek, menu sa scrolluje */
    text-align: center; /* Zabezpečí centrovanie textu */
  }

  .main-nav[data-visible="true"] {
    transform: translateX(0) !important;
    visibility: visible;
  }

  /* 5. POLOŽKY V MENU */
  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 50px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-nav ul li a {
    color: #fff !important;
    font-size: var(--font-size-menu-mobile);
    text-decoration: none;
    font-weight: 400;
    font-family: inherit;
    /* --- GLOBÁLNA OPRAVA PRE BLIKAJÚCE ZAOBLENIE PRI KLIKNUTÍ --- */
    -webkit-tap-highlight-color: transparent !important; /* Pre Safari a Chrome na mobile */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

    /* Zrušenie systémového outline (obrysu) pri zameraní/kliknutí */
    outline: none !important;

    /* Zákaz označovania textu pri dlhšom podržaní prsta */
    -webkit-user-select: none !important;
    user-select: none !important;
    /* 1. ZÁKAZ NATÍVNEHO KONTEXTOVÉHO MENU V SAFARI (Kľúčový riadok) */
    -webkit-touch-callout: none !important;

    /* 2. Zákaz označovania a výberu textu */
    -webkit-user-select: none !important;
    user-select: none !important;

    /* 3. Poistka pre stálu farbu textu */
    color: #fff !important;
  }

  /* Prebitie všetkých dotykových a klikacích medzistavov */
  .main-nav ul li a:hover,
  .main-nav ul li a:focus,
  .main-nav ul li a:active {
    -webkit-touch-callout: none !important;
    color: #fff !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* 6. SKRYTIE REGISTRÁCIE NA MOBILE */
  .header-actions {
    display: none !important;
  }
  a,
  button,
  .btn-register,
  .btn-register-alt,
  [role="button"] {
    /* 1. Úplný zákaz vyskakovacieho okna a preview v Safari (iOS) */
    -webkit-touch-callout: none !important;

    /* 2. Zákaz modrastého/sivého blikania pri ťuknutí prstom (Chrome/Safari) */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;

    /* 3. Zákaz označovania textu pri dlhom podržaní */
    -webkit-user-select: none !important;
    user-select: none !important;

    /* 4. Odstránenie systémového obrysu (focus ring) */
    outline: none !important;
  }

  /* Poistka pre všetky interaktívne stavy na mobile */
  a:active,
  a:focus,
  button:active,
  button:focus {
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  :root {
    --font-size-quote: 20px;
  }
  .hero-bg {
    background:
      linear-gradient(
        90deg,
        #fff 0%,
        #fff 34%,
        rgba(255, 255, 255, 0.96) 44%,
        rgba(255, 255, 255, 0.78) 54%,
        rgba(255, 255, 255, 0.4) 66%,
        rgba(255, 255, 255, 0) 82%
      ),
      url("../img/hero_banner.png") right center / cover no-repeat;
  }
}

@media (max-width: 880px) {
  .hero-wrapper {
    padding-top: 80px;
  }

  .hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 0px;
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;

    width: 760px;
    height: 760px;

    top: -340px;
    right: -390px;

    background: radial-gradient(
      circle,
      rgba(120, 150, 255, 1) 0%,
      rgba(150, 175, 255, 0.78) 22%,
      rgba(180, 195, 255, 0.42) 48%,
      rgba(214, 220, 255, 0.12) 68%,
      rgba(214, 220, 255, 0) 82%
    );

    filter: blur(28px);

    z-index: 0;
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-image {
    display: none;
  }

  .hero-content {
    flex: 0 0 75%; /* Text zaberie 55% šírky kontajnera */
    z-index: 2;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-card h3 {
    font-size: 25px;
  }
  .topics {
    /* Zmenšenie paddingu pre mobil, aby tam nebola obrovská diera */
    padding: 60px 0;
  }

  .topic-row {
    /* Prepnutie do stĺpca */
    flex-direction: column !important;
    align-items: flex-start;
    gap: 30px; /* Medzera medzi obrázkom a textom */
    margin-bottom: 60px; /* Medzera medzi jednotlivými blokmi */
  }

  /* Zrušenie otočeného poradia pri druhom riadku */
  .topic-row.reverse {
    flex-direction: column !important;
  }

  .topic-image,
  .topic-text {
    /* Zrušenie fixnej šírky 528px a roztiahnutie na 100% */
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .topic-image img {
    /* Obrázok sa prispôsobí šírke displeja */
    width: 100%;
    height: auto;
  }

  .topic-image::before {
    width: 148%;
    height: 126%;

    background: radial-gradient(
      ellipse at center,
      rgba(25, 65, 255, 0.94) 0%,
      rgba(70, 105, 255, 0.72) 20%,
      rgba(125, 150, 255, 0.42) 46%,
      rgba(214, 220, 255, 0.14) 68%,
      rgba(214, 220, 255, 0) 88%
    );

    filter: blur(16px);
  }

  .topic-text h3 {
    /* Prípadné mierne zmenšenie písma pre mobilné displeje */
    font-size: 24px;
    margin-bottom: 15px;
  }

  .topic-text p,
  .topic-text li,
  .topic-text strong {
    /* Uistíme sa, že písmo na mobile je dobre čitateľné */
    font-size: 16px;
  }

  .topic-text ul {
    /* Lepšie odsadenie zoznamu na mobile */
    padding-left: 20px;
  }

  /* 1. Celkový padding sekcie na mobile */
  .audience {
    padding: 60px 0;
  }

  /* 2. Nadpisy */
  .audience-title,
  .audience-footer {
    padding-bottom: 40px;
  }

  .audience-footer {
    margin-top: 40px;
  }

  /* 3. GRID -> ZMENA NA STĹPEC */
  .audience-grid {
    flex-direction: column !important;
    gap: 50px; /* Medzera medzi blokmi ikon */
    padding: 30px 0;
  }

  /* 4. SKRYTIE OBRÁZKA */
  .audience-main-img {
    display: none !important;
  }

  /* 5. ÚPRAVA STĹPCOV S IKONAMI */
  .audience-col {
    width: 100%;
    gap: 50px; /* Zmenšenie vertikálnej medzery z 80px na 40px */
  }

  /* 6. POLOŽKA S IKONOU */
  .audience-item {
    max-width: 100%;
  }

  .audience-item p {
    max-width: 280px; /* Umožníme textu viac miesta na šírku */
  }

  .speaker-mobile {
    display: block;
    padding-top: 5px;
  }

  .speaker-mobile img {
    width: 100%;
  }

  .location-section {
    padding: 60px 0;
  }

  /* OTOČENIE PORADIA: Obrázok bude prvý, text druhý */
  .location-top {
    display: flex !important;
    flex-direction: column-reverse !important; /* Toto je kľúčový riadok */
    align-items: flex-start !important;
    gap: 50px; /* Medzera medzi obrázkom a textom */
    margin-bottom: 30px;
  }

  /* Nastavenie obrázka tržnice */
  .location-image {
    width: 100%;
    margin-top: 10px; /* Drobný presah pre vizuálnu plynulosť */
  }

  .location-image img {
    width: 100%;
    height: auto;
    display: block;

    /* Zjemnenie tieňov pre mobil, aby to na malej ploche nevyzeralo "špinavo" */
    filter: drop-shadow(0 0 30px rgba(71, 107, 255, 0.22));
  }

  /* Textová časť nasleduje pod obrázkom */
  .location-top .topic-text {
    width: 100%;
    text-align: left; /* Zabezpečíme zarovnanie textu na ľavo */
  }

  .location-top h3 {
    font-size: 24px;
    margin-bottom: 15px;
    margin-top: 0; /* Zrušíme margin na vrchu, lebo teraz nadväzuje na obrázok */
  }

  /* Zmena výšky mapy pre mobil */
  .location-map iframe {
    height: 350px !important;
  }

  /* Cielime na wrapper so špeciálnou triedou */
  .newsletter-wrapper.special-newsl {
    flex-direction: column !important; /* Položí text a akciu pod seba */
    text-align: center; /* Vycentruje text */
    gap: 25px; /* Vytvorí medzeru medzi textom a tlačidlom */
  }

  .special-newsl .newsletter-text {
    /* Zmenšíme písmo, aby sa na mobile nelámalo škaredo */
    max-width: 100%; /* Povolíme textu využiť celú šírku */
    line-height: 1.3;
  }

  .special-newsl .newsletter-action {
    width: 100%; /* Tlačidlo môže byť na mobile výraznejšie */
  }

  .special-newsl .btn-register,
  .btn-komplet {
    display: block;
    width: 100%;
    max-width: 60%; /* Rovnaká šírka ako pri hero buttons */
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content h1 {
    font-size: 48px;
  }
  .icon-location {
    margin-right: -7px;
  }
  :root {
    --font-size-menu-mobile: 20px;
  }
  .hero-subtitle {
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-width: 90%;
    --font-size-menu: 19px;
    --font-size-text: 16px;
    --font-size-nadpis: 25px;
    --font-size-urcene: 18px;
  }

  .hero-content {
    flex: 0 0 100%; /* Text zaberie 55% šírky kontajnera */
    z-index: 2;
  }

  .hide_br {
    display: none;
  }

  .hero-quote {
    max-width: 85%;
  }

  .hero-content h1 {
    font-size: 50px;
  }

  .hero-btns {
    display: flex;
    flex-direction: column; /* Pod seba */
    gap: 15px;

    /* CENTROVANIE */
    align-items: center; /* Vycentruje celý blok tlačidiel na stred */
    width: 100%;
  }

  .hero-btns a {
    /* ROVNAKÁ ŠÍRKA */
    /* display: block zabezpečí, že berú šírku rodiča */
    display: block;

    /* Nastavíme im rovnakú šírku (napr. 280px alebo 100% kontajnera) */
    width: 100%;
    max-width: 60%; /* Toto zabezpečí, že budú mať rovnakú šírku a nebudú príliš dlhé */

    text-align: center; /* Text vnútri tlačidiel bude v strede */
    box-sizing: border-box; /* Aby padding nepredlžoval tlačidlo */
  }

  /*hero sekcia*/
  .hero {
    min-height: auto;
    background: #fff;
  }

  .hero-bg {
    display: none;
  }

  .hero-wrapper {
    display: block;
    min-height: auto;
    padding-top: 80px;
    padding-bottom: 0;
  }

  .hero-content {
    width: 100%;
    max-width: none;
  }

  .hero-mobile-image {
    display: block;
    position: relative;
    margin-left: calc(50% - 50vw);
    width: 100vw;
    height: 465px;
    overflow: hidden;
  }

  .stats-mobile {
    display: flex !important;
  }

  .hero-mobile-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .hero-mobile-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.96) 10%,
      rgba(255, 255, 255, 0.7) 18%,
      rgba(255, 255, 255, 0.28) 28%,
      rgba(255, 255, 255, 0) 38%
    );
  }

  .hero-bottom {
    display: none !important;
  }

  .partners-content {
    max-width: 100%; /* Aby text nešiel cez celú šírku a nezakryl tváre vpravo */
  }

  .fees-container {
    border: none;
    padding: 20px 0px;
    margin-top: 35px;
  }

  .cta-tegister {
    display: flex;
    justify-content: center; /* Vycentruje tlačidlo horizontálne */
    width: 100%;
    padding: 0 20px; /* Jemná rezerva po bokoch */
  }

  .cta-tegister .btn-register,
  .special-partner {
    display: block;
    width: 100%;
    max-width: 60%; /* Rovnaká šírka ako pri hero buttons */
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .partners-cta {
    position: relative;
    /* Cesta k tvojmu stiahnutému obrázku */
    background-image: none;
    display: flex;
    background: linear-gradient(92.4deg, #0020ff 80.9%, #e900e7 102.74%);
    align-items: center;
    color: #fff;
    overflow: hidden;
  }

  .newsletter-text {
    font-size: 25px;
    max-width: 100%;
  }

  .move-to-center {
    text-align: left;
  }

  .icon-location {
    margin-right: -7px;
  }
  .head-section {
    background: linear-gradient(92.4deg, #0020ff 80.9%, #e900e7 102.74%);
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 24px;
    margin-top: 50px;
  }

  .hero-stats > div {
    gap: 7px;
  }

  .hero-stats strong {
    font-size: 34px;
    gap: 10px;
  }

  .icon-stats {
    width: 46px;
    height: 46px;
  }

  .hero-stats span {
    font-size: 17px;
    line-height: 1.2;
  }

  .be_partner {
    text-align: center;
  }

  /**== PROGRAM **/
  /* =========================================
   PROGRAM – TABLET A MOBIL POD 768 PX
========================================= */

  /* ===== CELÁ SEKCIA ===== */

  .program-section {
    padding-bottom: 20px;
  }

  /* ===== PREPÍNAČE BLOKOV ===== */

  .program-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 40px;
  }

  .program-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;

    font-size: 15px;
    white-space: nowrap;
  }

  .bott {
    padding-bottom: 20px;
  }

  /* ===== HLAVIČKA BLOKU ===== */

  .program-heading {
    margin-bottom: 50px;
  }

  .program-heading h2 {
    font-size: 22px;
    line-height: 1.05;
  }

  .program-heading p {
    font-size: 15px;
  }

  /* ===== CELÁ TIMELINE ===== */

  .program-timeline,
  .program-timeline-3blok {
    position: relative;

    width: 100%;
    max-width: 400px;
    margin: 0 auto 50px;

    padding-bottom: 0;
  }

  /* Zvislá os – ide stredom 40 px ikoniek */

  .program-timeline::before,
  .program-timeline-3blok::before {
    content: "";
    position: absolute;

    top: 20px;
    bottom: 20px;
    left: 20px;

    width: 2px;

    transform: none;
    z-index: 1;
  }

  /* ===== JEDNA POLOŽKA ===== */

  .program-item {
    position: relative;
    display: block;

    min-height: 0;
    margin-bottom: 40px;
    padding-left: 60px;
  }

  .program-item:last-child {
    margin-bottom: 40px;
  }

  /* ===== IKONA NA ZVISLEJ OSI ===== */

  .program-axis,
  .program-item.item-left .program-axis,
  .program-item.item-right .program-axis {
    position: absolute;

    top: 50%;
    left: 0;

    width: 40px;
    height: 40px;

    grid-column: auto;
    grid-row: auto;

    transform: translateY(-50%);
    z-index: 3;
  }

  .program-node {
    position: static;

    width: 40px;
    height: 40px;
    margin: 0;

    transform: none;
  }

  .program-node img {
    display: block;

    width: 40px;
    height: 40px;

    object-fit: contain;
  }

  /* Desktopový čas pri osi sa na mobile nepoužíva */

  .program-axis time {
    display: none;
  }

  /* ===== KARTA ===== */

  .program-card,
  .program-item.item-left .program-card,
  .program-item.item-right .program-card {
    position: relative;

    grid-column: auto;
    grid-row: auto;

    width: 100%;
    min-height: 74px;
    padding: 15px 18px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background: #fff;
    text-align: left;
  }

  .program-card h3 {
    margin: 0;

    font-family: var(--font-main-compact);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }

  .program-card p {
    margin: 4px 0 0;

    font-size: 15px;
    line-height: 1.25;
  }

  /* ===== ZRUŠENIE DESKTOPOVÝCH SPOJNÍC ===== */

  /* Ľavé aj pravé položky majú na mobile rovnakú spojnicu */
  .program-item.item-left .program-card::before,
  .program-item.item-right .program-card::before {
    content: "";
    display: block;

    position: absolute;
    top: 50%;
    left: -40px;

    width: 40px;
    height: 2px;

    background: var(--color-primary);
    transform: translateY(-50%);
    z-index: 0;
  }

  /* Pravý pseudo-element sa na mobile nepoužíva */
  .program-item.item-left .program-card::after,
  .program-item.item-right .program-card::after {
    content: none;
    display: none;
  }

  /* Ružová spojnica */
  .program-item.color-pink.item-left .program-card::before,
  .program-item.color-pink.item-right .program-card::before {
    background: #8300c1;
  }

  /* Čierna spojnica */
  .program-item.color-black.item-left .program-card::before,
  .program-item.color-black.item-right .program-card::before {
    background: var(--color-text);
  }

  /* ===== NOVÁ MOBILNÁ VODOROVNÁ SPOJNICA ===== */

  .program-item .program-card::before {
    content: "";
    display: block;

    position: absolute;

    top: 50%;
    left: -20px;

    width: 20px;
    height: 2px;

    background: var(--color-primary);

    transform: translateY(-50%);
    z-index: 1;
  }

  .program-item .program-card::after {
    content: none;
    display: none;
  }

  /* Farebné spojnice */

  .program-item.color-pink .program-card::before {
    background: #8300c1;
  }

  .program-item.color-black .program-card::before {
    background: var(--color-text);
  }

  /* ===== ČAS VNÚTRI KARTY ===== */

  .program-card .mobile-time {
    display: block;
    margin-bottom: 5px;

    color: inherit;

    font-family: var(--font-main-compact);
    font-weight: 700;
    line-height: 1;
  }

  /* ===== SPODNÁ ČASŤ ===== */

  .program-footer {
    margin-top: 0;
    text-align: center;
  }

  .program-tabs-bottom {
    margin-bottom: 28px;
  }

  .program-note {
    margin: 0 0 16px;
  }
  /* Každý blok má rovnakú geometriu */
  .program-timeline,
  .program-timeline-3blok {
    position: relative;

    width: 100%;
    max-width: 400px;
    margin: 0 auto 50px;

    padding-bottom: 0;

    /* JS tieto hodnoty následne prepíše */
    --axis-top: 20px;
    --axis-bottom: 20px;
  }

  /* Jedna spoločná zvislá os */
  .program-timeline::before,
  .program-timeline-3blok::before {
    content: "";
    display: block;

    position: absolute;
    top: var(--axis-top);
    bottom: var(--axis-bottom);
    left: 20px;

    width: 2px;

    transform: none;
    z-index: 1;
    pointer-events: none;
  }

  .program-item,
  .program-item.item-left,
  .program-item.item-right {
    position: relative;
    display: block;

    min-height: 0;
    margin-bottom: 40px;
    padding-left: 60px;
  }

  .program-item:last-child {
    margin-bottom: 40px;
  }

  /* Ikonka vždy vľavo na osi */
  .program-axis,
  .program-item.item-left .program-axis,
  .program-item.item-right .program-axis {
    position: absolute;

    top: 50%;
    left: 0 !important;
    right: auto !important;

    width: 40px;
    height: 40px;

    grid-column: auto;
    grid-row: auto;

    transform: translateY(-50%);
    z-index: 4;
  }

  .program-node {
    position: static;

    width: 40px;
    height: 40px;
    margin: 0;

    transform: none;
  }

  .program-node img {
    position: relative;
    z-index: 5;

    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .program-axis time {
    display: none;
  }

  /* Karta vždy napravo */
  .program-card,
  .program-item.item-left .program-card,
  .program-item.item-right .program-card {
    position: relative;

    grid-column: auto;
    grid-row: auto;

    width: 100%;
    min-height: 74px;
    padding: 15px 18px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background: #fff;
    text-align: left;
    z-index: 2;
  }

  .program-card h3 {
    margin: 0;

    font-family: var(--font-main-compact);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
  }

  .program-card p {
    margin: 4px 0 0;

    font-size: 14px;
    line-height: 1.25;
  }

  /* Vodorovná spojnica – rovnaká pre left aj right položky */
  .program-item.item-left .program-card::before,
  .program-item.item-right .program-card::before {
    content: "";
    display: block;

    position: absolute;
    top: 50%;
    left: -40px;

    width: 40px;
    height: 2px;

    background: var(--color-primary);

    transform: translateY(-50%);
    z-index: 1;
  }

  /* Desktopový druhý pseudo-element vypnúť */
  .program-item.item-left .program-card::after,
  .program-item.item-right .program-card::after {
    content: none;
    display: none;
  }

  /* Farebné spojnice */
  .program-item.color-pink.item-left .program-card::before,
  .program-item.color-pink.item-right .program-card::before {
    background: #8300c1;
  }

  .program-item.color-black.item-left .program-card::before,
  .program-item.color-black.item-right .program-card::before {
    background: var(--color-text);
  }

  .program-card .mobile-time {
    display: block;
    margin-bottom: 5px;

    color: inherit;
    font-family: var(--font-main-compact);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }
}

@media (max-width: 568px) {
  .cta-tegister .btn-register,
  .special-partner,
  .btn-komplet {
    max-width: 75%; /* Rovnaká šírka ako pri hero buttons */
  }

  .hero-subtitle {
    margin-top: 30px;
  }

  .quote-icon {
    transform: rotate(180deg);
    width: 38px;
    padding-top: 20px;
  }

  .hero-quote {
    padding-left: 50px;
  }

  .hero-subtitle {
    padding-left: 50px;
  }

  .hero-mobile-image img {
    object-position: 100% bottom;
  }

  :root {
    --font-size-quote: 18px;
  }

  .hide_br {
    display: none;
  }

  .hero-quote {
    max-width: 96%;
  }
  .hero-btns a {
    max-width: 75%;
  }

  .special-newsl .btn-register,
  .special-partner {
    max-width: 75%; /* Rovnaká šírka ako pri hero buttons */
  }
  .hero-wrapper {
    padding-top: 50px;
  }
  .hero-quote {
    padding-bottom: 40px;
  }
  .hero-content h1 {
    font-size: 45px;
  }

  :root {
    --font-size-menu-mobile: 18px;
  }

  .main-nav ul {
    gap: 40px;
  }

  .main-nav {
    padding-top: 50px !important;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .benefit-card h3 {
    font-size: 22px;
  }

  .benefit-card {
    min-height: auto;
    padding: 26px 22px;
  }

  .benefit-card p {
    max-width: 360px;
  }

  .benefit-icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 490px) {
  .cta-tegister .btn-register,
  .special-partner,
  .btn-komplet {
    max-width: 75%; /* Rovnaká šírka ako pri hero buttons */
  }

  .hero-subtitle {
    padding-left: 0px;
    text-align: center;
  }

  .hero-btns a {
    max-width: 75%;
  }

  .special-newsl .btn-register {
    max-width: 75%; /* Rovnaká šírka ako pri hero buttons */
  }
  .hero-wrapper {
    padding-top: 50px;
  }
  :root {
    --container-width: 90%;
    --font-size-text: 16px;
    --font-size-nadpis: 22px;
  }
  .newsletter-text {
    font-size: 22px;
  }
  .hero-content h1 {
    font-size: 40px;
  }
}

@media (max-width: 460px) {
  .separator {
    display: none;
  }

  .hero-info::before {
    content: "";
    flex-basis: 100%;
    order: 3;
    height: 0;
  }

  .hero-info img:nth-of-type(1) {
    order: 1;
  }

  .date {
    order: 2;
  }

  .hero-info img:nth-of-type(2) {
    order: 4;
  }

  .location {
    order: 5;
    white-space: nowrap;
  }
}

@media (max-width: 437px) {
  .br_last {
    display: none;
  }

  .br_terms {
    display: inline;
    flex-basis: 100%;
    height: 0;
  }
}

@media (max-width: 435px) {
  .icon-location {
    margin-right: -2px;
  }
  .cta-tegister .btn-register {
    max-width: 80%; /* Rovnaká šírka ako pri hero buttons */
  }

  .hero-btns a {
    max-width: 80%;
  }

  .special-newsl .btn-register,
  .special-partner,
  .btn-komplet {
    max-width: 80%; /* Rovnaká šírka ako pri hero buttons */
  }
}

@media (max-width: 430px) {
  .hero-stats {
    gap: 35px 18px;
  }

  .hero-stats strong {
    font-size: 30px;
  }

  .icon-stats {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 410px) {
  .hero-content h1 {
    font-size: 36px;
  }

  .hero-quote {
    font-size: 17px;
  }

  .main-email {
    font-size: 18px;
  }
  .cta-tegister .btn-register {
    max-width: 85%; /* Rovnaká šírka ako pri hero buttons */
  }

  .hero-btns a {
    max-width: 85%;
  }

  .special-newsl .btn-register,
  .special-partner,
  .btn-komplet {
    max-width: 85%; /* Rovnaká šírka ako pri hero buttons */
  }
}