:root {
  /* nastavenie medzier a veľkostí pre HOW TO ORDER */
  --hto-gap-number-icon: 2rem;    /* medzera medzi číslom a ikonou */
  --hto-icon-w: 32px;            /* šírka/výška ikonky otáznik */
  --hto-gap-icon-question: 15rem; /* medzera medzi ikonou a textom otázky */
  --hto-indent: calc(
    var(--hto-gap-number-icon)
    + var(--hto-icon-w)
    + var(--hto-gap-icon-question)
  ); /* celkové ľavé odsadenie textu */
}

/* =========================================================== */
/*                    GLOBAL & FONT SETTINGS                   */
/* =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Involve';
  src: url('/assets/fonts/Involve/Involve-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('/assets/fonts/Helvetica.ttf') format('truetype'),
       url('/assets/fonts/helvetica-compressed-5871d14b6903a.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica';
  src: url('/assets/fonts/Helvetica-Bold.ttf') format('truetype'),
       url('/assets/fonts/helvetica-rounded-bold-5871d05ead8de.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Globálne alebo na konkrétnom elemente */
body {
  /* pre WebKit (Chrome, Safari) */
  -webkit-font-smoothing: antialiased;
  /* pre FireFox */
  -moz-osx-font-smoothing: grayscale;
  /* optimalizácia kreslenia textu */
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* =========================================================== */
/*                        MENU WRAPPER                         */
/* =========================================================== */
.menu-wrapper {
  position: absolute;
  top: 37px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
}

/* =========================================================== */
/*                       MENU CONTAINER                        */
/* =========================================================== */
.menu-container {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 50px;
  height: 85px;
  width: 100%;
  max-width: 1300px;
  padding: 0 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  position: relative;
}

/* =========================================================== */
/*                            LOGO                             */
/* =========================================================== */
.logo img {
  height: 40px;
  width: auto;
}

/* =========================================================== */
/*                       MENU CONTENT                          */
/* =========================================================== */
.menu-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-grow: 1;
  position: relative;

  /* zabrániť zalomeniu riadku a umožniť sciteľné zmenšovanie položiek */
  flex-wrap: nowrap;
}

.menu-nav .nav-link {
  white-space: nowrap; /* žiadne lámanie textu v odkaze */
}

.menu-container {
  padding: 0 2rem;
}


/* =========================================================== */
/*                       MENU DIVIDER                          */
/* =========================================================== */
.menu-divider {
  width: 2px;
  height: 50px;
  background-color: #E0E0E0;
  margin-left: 60px;
  margin-right: 2rem;
}

/* =========================================================== */
/*                         SEKCE MENU                          */
/* =========================================================== */
.menu-nav {
  display: flex;
  gap: 2rem;
  flex-grow: 1;
}

/* ------------------ Bežné odkazy ---------------------------- */
.menu-nav .nav-link {
  position: relative;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}
.menu-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #FAB005;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.menu-nav .nav-link:hover::after,
.menu-nav .nav-link.active::after {
  left: 0;
  width: 100%;
  transform: none;
}
.menu-nav .nav-link:hover,
.menu-nav .nav-link.active {
  color: #FAB005;
}

/* =========================================================== */
/*                 MEGA-DROPDOWN (Domov)                       */
/* =========================================================== */
.mega-dropdown {
  /* zrušíme relatifne pozicionovanie, aby rodičom bola .menu-container */
  position: relative;
}
.mega-dropdown .dropdown-text {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}
.mega-dropdown .dropdown-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: #FAB005;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.mega-dropdown:hover .dropdown-text {
  color: #FAB005;
}
.mega-dropdown:hover .dropdown-text::after {
  left: 0;
  width: 100%;
  transform: none;
}
.mega-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  color: #FAB005;
}
/* Táto trieda zablokuje otváranie megamenu na hover */
.mega-dropdown.no-hover .mega-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* =========================================================== */
/*                  MEGA-MENU (VNÚTRI .mega-dropdown)          */
/* =========================================================== */
.mega-dropdown .mega-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  /* position:absolute;  pôvodne */
  position: fixed;
  top: calc(37px + 56px + 32px);
  left: 50%;
  transform: translateX(-50%);
  width: 1300px;
  background-color: #1b1f12;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 200;
  transition: opacity 0.2s, visibility 0.2s;
}
.mega-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 32px;         /* rovnaké ako medzera medzi container a menu */
  pointer-events: auto; /* aby sa tu hover zachytil */
}
.mega-dropdown:hover .mega-menu {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Flex layout pre karty */

.mega-dropdown .mega-item {
  background: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  /* odstránime padding z obrázka, pridáme ho sem, ak treba */
  padding: 0.5rem;

  /* zrušíme podčiarknutie linku */
  text-decoration: none;

  /* zachovanie hover efektu */
  transition: transform 0.2s ease;
}

.mega-dropdown .mega-item:hover {
  transform: translateY(-4px);
}

/* obrázok s rounded corner a object-fit */
.mega-dropdown .mega-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

/* text pod obrázkom, bez podčiarknutia */
.mega-dropdown .mega-item-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  text-decoration: none;
}

/* =========================================================== */
/*                 Klasický Dropdown (Naše služby)            */
/* =========================================================== */
.dropdown {
  position: relative;
}
.dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 42px;
  pointer-events: auto;
}
.dropdown-toggle.nav-link::after {
  content: none !important;
}
.dropdown-text {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}
.dropdown-text::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: #FAB005;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.dropdown-arrow {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 32px);
  left: 0;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 100;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown:hover .dropdown-text {
  color: #FAB005;
}
.dropdown:hover .dropdown-text::after {
  left: 0;
  width: 100%;
  transform: none;
}
.dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  color: #FAB005;
}

/* Dropdown položky */
.dropdown-item {
  position: relative;
  padding: 0.6rem 1.5rem;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
  background: none;
}
.dropdown-item-text {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-weight: 600;
}
.dropdown-item-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: #FAB005;
  transition: width 0.3s ease;
}
.dropdown-item:hover {
  color: #FAB005;
}
.dropdown-item:hover .dropdown-item-text::after {
  width: 100%;
}
.menu-nav .dropdown-item:hover {
  background-color: transparent !important;
}
.menu-nav .dropdown-text::after {
  bottom: 0 !important;
}
.menu-nav .dropdown-item-text::after {
  bottom: -3px !important;
}

/* =========================================================== */
/*                    Kontakt / Hamburger                     */
/* =========================================================== */
.menu-contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;        /* zabráni zalomeniu celej .phone kontajnera */
}

.phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FAB005;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.phone-icon i {
  color: #000 !important;
  font-size: 1rem;
}
.phone a {
  position: relative;
  color: #000;
  text-decoration: none;
  padding-bottom: 2px;
  white-space: nowrap;  
}
.phone a::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 0;
  height: 2px;
  width: 75%;
  background-color: #FAB005;
  transition: all 0.3s ease;
}
.phone a:hover::after {
  left: 0;
  width: 100%;
}
.btn-menu {
  background-color: #FAB005;
  color: #fff;
  border-radius: 50px;
  padding: 0.6rem 1.8rem;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
}
.btn-menu:hover {
  background-color: #000;
}
.hamburger {
  display: none;
  border: none;
  background: #FAB005;
  width: 48px;
  height: 48px;
  border-radius: 30%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.2s;
}
.hamburger i {
  color: #000 !important;
  font-size: 1.25rem;
}
@media (max-width: 991px) {
  .menu-nav { display: none; }
  .hamburger { display: inline-flex; }
}

/* =========================================================== */
/*                        MOBILNÉ MENU                         */
/* =========================================================== */

/* Skryjeme mobilné menu na desktop (≥ 992px) */
@media (min-width: 992px) {
  .mobile-menu,
  .mobile-menu-overlay {
    display: none;
  }
}

/* Štýly pre mobilné menu (≤ 991px) */
@media (max-width: 991px) {
  /* overlay */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    display: none;
  }
  .mobile-menu-overlay.open {
    display: block;
  }

  /* panel */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    max-width: 90%;
    height: 100%;
    background: #fff;
    border-right: 1px solid #FAB005;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 2000;
    overflow-y: auto;
    font-family: 'DM Sans', sans-serif;
    display: block;
  }
  .mobile-menu.open {
    transform: translateX(0);
  }

  /* header */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
  }
  .mobile-logo img {
    height: 40px;
    width: auto;
  }
  .mobile-menu-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
  }
  .mobile-menu-close i {
    color: #FAB005;
  }

  /* menu list */
  .mobile-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* default položky */
  .mobile-menu-list > li:not(.mobile-menu-contact):not(.mobile-menu-policy) > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #eee;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
    font-family: inherit;
  }
  .mobile-menu-list > li:not(.mobile-menu-contact):not(.mobile-menu-policy) > a:hover {
    color: #FAB005;
  }

  /* dropdown šípka */
  .dropdown-arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s;
  }
  .has-dropdown.open > a .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* vnorené položky */
  .mobile-menu-list .dropdown {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .has-dropdown.open > .dropdown {
    max-height: 500px;
  }
  .mobile-menu-list .dropdown li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
    font-family: inherit;
  }
  .mobile-menu-list .dropdown li a:hover {
    color: #FAB005;
  }

  /* medzera pod Kontakt */
  .mobile-menu-spacer {
    height: 2rem;
    pointer-events: none;
  }

  /* kontakty a policy – špecifické položky */
  .mobile-menu-list > li.mobile-menu-contact > a,
  .mobile-menu-list > li.mobile-menu-contact.mail > a,
  .mobile-menu-list > li.mobile-menu-policy > a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: none !important;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
    font-family: inherit;
  }
  .mobile-menu-list > li.mobile-menu-contact > a i,
  .mobile-menu-list > li.mobile-menu-contact.mail > a i,
  .mobile-menu-list > li.mobile-menu-policy > a i {
    color: #FAB005;
  }
  .mobile-menu-list > li.mobile-menu-contact > a:hover,
  .mobile-menu-list > li.mobile-menu-contact.mail > a:hover,
  .mobile-menu-list > li.mobile-menu-policy > a:hover {
    color: #FAB005;
  }
}

  


/* =========================================================== */
/*                      PHONE & BUTTON                         */
/* =========================================================== */
.menu-contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap; 
}

/* PHONE ICON & LINK */
.phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
}
.phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FAB005;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.phone-icon i {
  color: #000 !important;
  font-size: 1rem;
  line-height: 1;
}
.phone a {
  position: relative;
  color: #000;
  text-decoration: none;
  padding-bottom: 2px;
}
.phone a::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 0;
  height: 2px;
  width: 75%;
  background-color: #FAB005;
  transition: all 0.3s ease;
}
.phone a:hover::after {
  left: 0;
  width: 100%;
}

/* BUTTON “Napíšte nám” */
.btn-menu {
  display: inline-block; /* aby white-space fungovalo spoľahlivo */
  white-space: nowrap;   /* zabráni zalomeniu textu v tlačidle */  
  background-color: #FAB005;
  color: #FFFFFF;
  border-radius: 50px;
  padding: 0.6rem 1.8rem;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  letter-spacing: 0.1em;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
}
.btn-menu:hover,
.btn-menu:active {
  background-color: #000000;
  color: #FFFFFF;
}

/* =========================================================== */
/*                         HERO SECTION                        */
/* =========================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 890px;
  background: url('/assets/images/top-bg.jpg') no-repeat center center;
  background-size: cover;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  overflow: hidden;
}

/* tmavý layer */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
}

/* =========================================================== */
/*                       HERO TEXT                             */
/* =========================================================== */
.hero {
  /* ... již existující definice ... */
  --hero-text-offset: 100px;         /* odsazení celé textové skupiny od menu */
  --hero-subtext-offset: 40px;  
  --hero-divider-offset: 280px; /* nastav si podle potřeby */     /* odsazení podnadpisu od hlavního nadpisu */
}

.hero-text {
  position: absolute;
  top: calc(122px + var(--hero-text-offset));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Hlavní nadpis */
.hero-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 60.13px;
  line-height: 100%;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Podnadpis */
.hero-subtext {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 29.87px;
  line-height: 100%;
  letter-spacing: 0;
  /* namiesto pevnej hex farby použijeme rgba pre opacity */
  color: rgba(255, 255, 255, 0.8); /* 80% opacity */
  margin: 0;
  margin-top: var(--hero-subtext-offset);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


/* =========================================================== */
/*                     HERO BOTTOM SECTION                     */
/* =========================================================== */
.hero-bottom {
  position: absolute;
  /* odsadenie od vrchu: 122px (menu) + vlastný offset */
  --hero-bottom-offset: 330px;            /* TU si nastavíš výšku */
  top: calc(122px + var(--hero-bottom-offset));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;                     /* rovnaké ako menu max-width */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #ffffff3d;
}
.hero-bottom-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: #FFFFFF;
  max-width: 32%;
  white-space: pre-line;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-bottom-button {
  display: inline-flex;
  align-items: center;
}
.hero-bottom-button i {
  margin-left: 0.5rem;
  color: #FAB005;
}

/* ------------------------------------------------ */
/* BUTTON “Naše služby” – bílý pill + žlutý kruh    */
/* ------------------------------------------------ */
.btn-services {
  display: inline-flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 50px;
  padding: 0.6rem 1.4rem 0.6rem 1.8rem;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

/* ------------------------------------------------ */
/* BUTTON “Naše služby”                             */
/* ------------------------------------------------ */
.btn-services {
  display: inline-flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 50px;
  padding: 0.6rem 1.4rem 0.6rem 1.8rem;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  transition: background-color 0.3s, color 0.3s, transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-services-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FAB005;
  overflow: hidden;
  transition: background-color 0.3s;
}

/* PRVNÍ ŠIPKA – původní obrázek */
.btn-services-icon img {
  display: block;
  width: 60%;
  height: auto;
  transition: transform 0.3s ease;
}

/* DRUHÁ ŠIPKA – pseudo-element, který vyjede zespodu */
.btn-services-icon::after {
  content: "";
  position: absolute;
  bottom: -20%;     /* začíná mimo kruh dole */
  left: 50%;
  width: 60%;
  height: auto;
  transform: translateX(-50%);
  background: url('/assets/images/up-right-arrow.png') no-repeat center center;
  background-size: contain;
  opacity: 0;
  transition: transform 0.3s ease 0.2s, /* zpoždění, aby vyjela po první fázi */
              opacity 0.3s ease 0.2s;
}

/* HOVER – obě fáze animace aktivní */
.btn-services:hover .btn-services-icon img {
  transform: translate(4px, -4px);  /* posun první šipky */
}
.btn-services:hover .btn-services-icon::after {
  bottom: 10%;   /* vyjede do viditelné polohy */
  opacity: 1;    /* zesílí */
}
.btn-services:hover,
.btn-services:active {
  background-color: #FFFFFF;
  color: #000000;
  transform: translateY(-4px); /* posun nahoru */
}

/* ikonu ponecháme s původní animací */
.btn-services:hover .btn-services-icon {
  background-color: #FAB005;
}


/* =========================================================== */
/*                        BOXES SECTION                        */
/* =========================================================== */
.boxes {
  padding: 4rem 0;
  position: relative;
  z-index: 1;
  margin-top: -280px;    /* uprav túto hodnotu podľa potreby – čím väčšia záporná hodnota, tým vyššie boxy */
  
}
.boxes-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.box {
  background-color: rgb(85 84 84 / 70%);
  /* Zpřehlednění pozadí: */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 38px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #FFFFFF;
  font-family: 'Helvetica', Arial, sans-serif;
  border: 1px solid rgb(105 93 80 / 56%);
}

.box-icon {
  width: 60px;
  height: auto;
  margin-bottom: 1rem;
}
.box-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}
.box-text {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.1em;
}

/* ------------------------------------------------ */
/* BOXES: horizontální divider pod ikonou           */
/* ------------------------------------------------ */
.box-divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: #b5b4b38c;          /* základní šedá čára */
  margin: 0.5rem 0 1rem;
  overflow: hidden;                     /* skrývá přesah */
}

/* pseudo-element pro animaci fill */
.box-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;                             /* startuje od nuly */
  background-color: #FAB005;            /* cílová žlutá barva */
  transition: width 0.4s ease;          /* plynulý růst */
}

/* na hover boxu se ::after roztáhne na 100% */
.box:hover .box-divider::after {
  width: 100%;
}

/* =========================================================== */
/*                       ABOUT US SECTION                      */
/* =========================================================== */
.aboutus {
  padding: 4rem 0;
}
.aboutus-row {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.aboutus-text {
  flex: 1 1 400px;
}
.aboutus-title {
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 48px;
  margin-bottom: 2rem;
  max-width: 80%;
}
.aboutus-stats {
  display: flex;
  align-items: flex-start;
  gap: 11rem;
  margin-bottom: 2rem;
}
.aboutus-number {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 70px;
  line-height: 1;
  min-width: 204px;
}
.aboutus-number-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: #666;
  margin-top: 0.25rem;
  line-height: 100%;
  letter-spacing: 2px;
}
.aboutus-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.aboutus-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.aboutus-item-icon img {
  display: block;
  height: auto;
}
.aboutus-item-text {
  font-family: 'Helvetica', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  margin: 0;
  line-height: 160%;
  letter-spacing: 0.1rem;
}
.aboutus-button {
    margin-top: 6rem;
    margin-left: 380px;
    background-color: #FAB005;
    color: #fff;
    height: 62px;
    width: 190px;
    font-size: 18px;
    border-radius: 50px;
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: flex;               /* flex container */
    align-items: center;         /* vertikální centrování */
    justify-content: center;     /* horizontální centrování */
    box-shadow: none; 
}

.aboutus-button:hover {
  background-color: #000;
  color: #fff;
}
.aboutus-image {
  text-align: center;
}
.aboutus-image img {
  width: 100%;
  max-width: 435px;
  height: 587px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgb(97 97 97 / 25%);
}

/* Responsive */
@media (max-width: 991px) {
  .aboutus-row {
    flex-direction: column-reverse;
    align-items: center;
  }
  .aboutus-text,
  .aboutus-image {
    width: 90%;
    max-width: 400px;
  }
  .aboutus-stats {
    flex-direction: column;
    gap: 1rem;
  }
  .aboutus-button {
    text-align: center;
    margin-left: 0;
  }
}
/* =========================================================== */
/*                      SERVICES SECTION                       */
/* =========================================================== */
.services {
  background-color: #F6F3EC;
  padding: 4rem 0 4rem;
}
.services-inner {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}
.services-pill {
    display: inline-block;
    margin-bottom: 40px;
    padding: 0.5rem 1rem;
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000;
    background: transparent;
    border: 1px solid #FAB005;
    border-radius: 50px;
    pointer-events: none;
}

.services-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;      /* 36pt ≈ 48px */
  line-height: 1.1;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* ----------------------------------------------------------- */
/*                         GRID LAYOUT                         */
/* ----------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem 1.5rem;
}
/* Horná rada: 3 karty vedľa seba */
.services-grid > .service-card-wrapper:nth-child(1) { grid-column: 1 / span 4; }
.services-grid > .service-card-wrapper:nth-child(2) { grid-column: 5 / span 4; }
.services-grid > .service-card-wrapper:nth-child(3) { grid-column: 9 / span 4; }
/* Dolná rada: 2 široké karty */
.services-grid > .service-card-wrapper:nth-child(4) { grid-column: 1 / span 6; }
.services-grid > .service-card-wrapper:nth-child(5) { grid-column: 7 / span 6; }

/* =========================================================== */
/*                   SERVICE CARD WRAPPER                      */
/* =========================================================== */
.service-card-wrapper {
  position: relative;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* =========================================================== */
/*                        SERVICE CARD                         */
/* =========================================================== */
.service-card {
  --r: 20px;
  --s: 40px;

  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 370px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* S-výrez */
  clip-path: shape(from 0 0,
    hline to calc(100% - var(--s) - 2*var(--r)),
    arc by var(--r) var(--r) of var(--r) cw,
    arc by var(--s) var(--s) of var(--s),
    arc by var(--r) var(--r) of var(--r) cw,
    vline to 100%,
    hline to 0
  );
}

/* tmavý layer */
.service-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.2) 40%,
    rgba(0,0,0,0)    100%
  );
  border-radius: var(--r);
  z-index: 0;
  pointer-events: none;
}

/* obrázok pozadia */
.service-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  z-index: 1;
}
.service-card-wrapper:hover .service-bg {
  transform: scale(1.05);
}

/* tmavý gradient nad obrázkom */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.2) 40%,
    rgba(0,0,0,0)   100%
  );
  pointer-events: none;
  z-index: 1;
}

/* =========================================================== */
/*                    SERVICE CARD CONTENT                     */
/* =========================================================== */
.service-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}
.service-name {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin: 1.5rem 0 1rem;
  padding-left: 1rem;
  text-align: left;

  /* jemný text‐shadow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Zrušíme akúkoľvek zmenu farby na hover */
.service-card-wrapper:hover .service-name {
  color: #ffffff;
}
/* SERVICE-BUTTON (len vizuál) */
.service-btn {
  width: 186px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #FAB005 0%, #FFF 100%);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  border-radius: 50px;
}

/* =========================================================== */
/*                    SERVICE ACTION (circle)                  */
/* =========================================================== */
.service-action-wrapper {
  position: absolute;
  top: 24px;
  right: 24px;
  transform: translate(50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.service-action {
  width: 48px;
  height: 48px;
  background-color: #FAB005;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s;
}
.service-action img {
  width: 60%;
  height: auto;
  transition: transform 0.3s ease;
}
/* posunieme šípku v kruhu */
.service-card-wrapper:hover .service-action {
  background-color: #FAB005;
}
.service-card-wrapper:hover .service-action img {
  transform: translate(4px, -4px);
}

.services-footer {
  margin-top: 3rem;
  text-align: center;
}

.services-footer-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 2.5rem;
  color: #000;
}

.services-button {
  margin-top: 6rem;
  margin-left: 380px;
  background-color: #FAB005;
  color: #fff;
  height: 62px;
  width: 270px;
  font-size: 18px;
  border-radius: 50px;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  
  /* pridané pre plynulú animáciu */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.services-button:hover {
  background-color: #000;
  color: #fff;
  /* mierne posun nahor */
  transform: translateY(-4px);
}



/* .aboutus-button už má definované rozmery a štýl, použijeme ho */
.services-footer .services-button {
  /* prepíš margin-left, margin-top z pôvodného About Us */
  margin: 0 auto;
  display: inline-flex;
}


/* =========================================================== */
/*                          RESPONSIVE                         */
/* =========================================================== */
@media (max-width: 991px) {
  .services-title {
    font-size: 2rem;
  }
  .services-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 2rem 0 !important;
  }
  /* Zrušíme akékoľvek spany pre jednotlivé položky */
  .services-grid > .service-card-wrapper {
    grid-column: auto !important;
  }
  .service-card {
    min-height: 370px;
  }
.service-name {
    max-width: 90%;
}  
}


/* =========================================================== */
/*                    HOW TO ORDER SECTION                     */
/* =========================================================== */
.howto {
  padding: 4rem 0;
}
.howto-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.howto-title {
  font-family: 'DM Sans', sans-serif; 
  font-weight: 600;
  font-size: 48px;
  line-height: 100%;
  letter-spacing: 0;
  margin-bottom: 2rem;
  text-align: left;
}
/* wrapper pre všetky položky */

.howto-item + .howto-item {
  border-top: 1px solid #ddd;
}

/* hlavička jednej položky */
.howto-header {
  width: 100%;
  background: none;
  border: none;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* číslo položky */
.howto-number {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 34px;
  margin-right: var(--hto-gap-number-icon);
  color: #000;
  transition: color 0.3s;
}

/* ikonka otáznik */
.howto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hto-icon-w);
  height: var(--hto-icon-w);
  background-color: #FAB005;
  color: #fff;
  font-size: 1.25rem;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0;
  margin-right: var(--hto-gap-icon-question);
  transition: background-color 0.3s;
}

/* text otázky */
.howto-question {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  margin: 0;
  flex: 1;
  text-align: left;
}

/* šípka */
.howto-arrow {
  font-size: 1rem;
  color: #000;
  transition: transform 0.3s ease;
}

/* telo odpovede */
.howto-body {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0; 
  padding-left: 323px;
}
.howto-body p {
    font-family: 'Helvetica', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin: 0;
    line-height: 160%;
}

/* otvorený stav */
.howto-item.open .howto-number {
  color: #FAB005;
}
.howto-item.open .howto-icon {
  background-color: #FAB005;
}
.howto-item.open .howto-body {
  max-height: 200px; /* uprav podľa potreby */
  padding-bottom: 1rem;
}
.howto-item.open .howto-arrow {
  transform: rotate(180deg);
}

/* hover efekt pre neotvorené */
.howto-item:not(.open):hover .howto-number {
  color: #FAB005;
}
.howto-item:not(.open):hover .howto-icon {
  background-color: #FAB005;
}

.howto-footer-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 2.5rem;
    color: #000;
}

.howto-footer-text .howto-highlight {
  color: #FAB005; /* len ZDARMA bude žlté */
}

.howto-item:not(.open) .howto-icon {
  background-color: #000;
  color: #fff;
}

/* responsive */
@media (max-width: 991px) {
  :root {
    --hto-gap-number-icon: 1rem;    /* menšia medzera medzi číslom a ikonou */
    --hto-icon-w: 32px;             /* menšia ikonka */
    --hto-gap-icon-question: 1rem;  /* medzera medzi ikonou a textom otázky */
    --hto-indent: calc(
      var(--hto-gap-number-icon)
      + var(--hto-icon-w)
      + var(--hto-gap-icon-question)
    ); /* nové odsadenie pre telo odpovede */
  }
  .howto-body {
    padding-left: 0;
  }
  .howto {
    padding: 2rem 1rem;
  }
  .howto-title {
    font-size: 32px;
  }
  .howto-number {
    font-size: 1.5rem;
  }
  .howto-question {
    font-size: 1rem;
  }
  .howto-body p {
    font-size: 14px;
  }
}

/* =========================================================== */
/*                      REFERENCES SECTION                     */
/* =========================================================== */
.references {
  background: linear-gradient(to bottom, #F6F3EC 0%, #FFFFFF 100%);
  padding: 4rem 0;
}
.references-inner {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}
.references-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 3rem;
  color: #000;
}

/* Swiper kontajner */
.references-slider {
  position: relative;
  padding-bottom: 3rem;
}

/* Wrapper predvolený od Swiperu – už netreba meniť cez CSS */
.swiper-wrapper {
  /* odstránené: flex justify-content center  */
}

/* Jeden slide */
.swiper-slide {
  display: flex;
  justify-content: center;    /* slide-content vycentrované horizontálne */
}

.ref-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  color: #000;
  margin-bottom: 1rem;
}

.ref-description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.ref-author-name {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
  display: inline-block;
  position: relative;
  padding-bottom: 6px; /* medzera nad čiarou */
  margin-bottom: 0.25rem;
}

.ref-author-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #FAB005;
  border-radius: 1px;
}

.ref-author-city {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #888; /* šedá farba */
  margin-top: 0.25rem;
}



/* Zrušíme predvolené ::after ikony od Swiperu */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
}

/* Základné štýly kruhu – vynútime ich !important */
.swiper-button-prev,
.swiper-button-next {
  width: 54px !important;
  height: 54px !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: #000000 !important;        /* šípka default čierna */
  cursor: pointer !important;
  transition: background-color 0.3s, color 0.3s !important;
}

/* Force FontAwesome ikonu zdediť farbu */
.swiper-button-prev i,
.swiper-button-next i {
  font-size: 1.25rem !important;
  color: inherit !important;
}

/* Positioning (doladi podľa layoutu) */
.swiper-button-prev {
  left: 1rem !important;
}
.swiper-button-next {
  right: 1rem !important;
}

/* Hover efekt */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #FAB005 !important;  /* žltý kruh */
  color: #FFFFFF !important;             /* biela šípka */
}


/* Pagínačné bodky */
.swiper-pagination {
  bottom: 0;
}
.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #FAB005;
}

/* Responsív */
@media (max-width: 991px) {
  .references-inner {
      max-width: 90%;
  }  
  .references-title {
    font-size: 36px;
  }

  /* Skrytie navigačných šípok Swipera na menších zariadeniach */
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}


/* =========================================================== */
/*                        CONTACT SECTION                      */
/* =========================================================== */

.contact {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.contact-background {
  position: absolute;
  inset: 0;
  background: url('/assets/images/contact-bg.jpg') no-repeat center bottom;
  background-size: cover;
  z-index: 1;
  border-radius: 30px;
}

.contact-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 20px 0;
  background: #ffffff;
  border-radius: 30px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 4rem 2rem;
  border: 1px solid #E0E0E0;
}

.contact-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.pill {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid #FAB005;
  border-radius: 50px;
  background: transparent;
  color: #000;
  font-family: 'Helvetica', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color 0.2s;
}

.contact-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: #000;
}

/* → DVOSTĹPCOVÝ LAYOUT FORMULÁRA ← */
.contact-form {
  display: block;
}

.contact-fields {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.left-column,
.right-column {
  flex: 1;
  min-width: 300px;
}

/* ľavý stĺpec – vertikálne inputy */
.left-column input {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 50px;
  background: #f2f2f2;
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  color: #333;
}

/* pravý stĺpec – textarea */
.right-column textarea {
  width: 100%;
  min-height: 220px;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 15px;
  background: #f2f2f2;
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  color: #333;
  resize: vertical;
}

.contact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-note {
  flex: 1;
  text-align: left;
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  color: #333;
}

/* Základný stav: rovnaká šírka borderu, len transparentný */
.contact-fields input,
.contact-fields textarea,
.contact-fields select {
  box-sizing: border-box;
  border: 2px solid transparent;
}

/* Pri focus-e len zmeníme farbu */
.contact-fields input:focus,
.contact-fields textarea:focus,
.contact-fields select:focus {
  outline: none;
  border-color: #FAB005;
}


.btn-call-back {
  margin-top: 0;
  margin-left: auto;
  background-color: #FAB005;
  color: #fff;
  height: 62px;
  width: 270px;
  font-size: 18px;
  border: none;
  border-radius: 50px;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.btn-call-back:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-4px);
}

@media (max-width: 991px) {
  .contact-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .contact-fields {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
  .left-column,
  .right-column {
    width: 100%;
    max-width: 360px;
  }
  .left-column input,
  .right-column textarea {
    margin-bottom: 1.5rem;
  }
  .contact-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-note {
    text-align: center;
  }
  .btn-call-back {
    margin-left: auto;
    margin-right: auto;
  }  
}

/* =========================================================== */
/*                      PROJECTS SECTION                       */
/* =========================================================== */
.projects-new {
  padding: 4rem 0;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, #F6F3EC 0%, #FFFFFF 100%);
}


.projects-new-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
}

.projects-new-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  color: #000;
  margin-bottom: 1rem;
}

.projects-new-button-wrapper {
  text-align: right;
  margin-bottom: 2.5rem;
}

.projects-new-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #FAB005;
  height: 62px;
  width: 190px;
  font-size: 18px;
  border: 2px solid #FAB005;
  border-radius: 50px;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  gap: 1rem;
}

.projects-new-button:hover {
  background-color: #FAB005;
  color: #fff;
  transform: translateY(-4px);
}


.circle-icon {
  background-color: #f4f536;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #000;
}

/* SWIPER slider */
.projects-new-slider {
  position: relative;
  padding-bottom: 3rem;
}

.projects-new .swiper-wrapper {
  padding-bottom: 2rem;
}

.projects-new .swiper-slide {
  display: flex;
  justify-content: center;
}

/* karta projektu */
.projects-new-card {
  flex: 1 1 300px;
  max-width: 400px;
  border-radius: 30px;
  overflow: hidden;
  text-align: left;
}

.projects-new-image {
  width: 100%;
  height: auto;
  border-radius: 30px;
  display: block;
}

.projects-new-label {
  font-family: 'Helvetica', sans-serif;
  font-size: 24px;
  margin-top: 0.75rem;
  font-weight: 400;
  color: #000;
  text-align: center;
}

/* navigačné šípky */
.projects-new .swiper-button-prev,
.projects-new .swiper-button-next {
  width: 54px !important;
  height: 54px !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 40% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: #000000 !important;
  cursor: pointer !important;
  transition: background-color 0.3s, color 0.3s !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.projects-new .swiper-button-prev:hover,
.projects-new .swiper-button-next:hover {
  background-color: #FAB005 !important;
  color: #FFFFFF !important;
}

/* Font Awesome šípky */
.projects-new .swiper-button-prev i,
.projects-new .swiper-button-next i {
  font-size: 1.25rem !important;
  color: inherit !important;
}

/* Pagination zrušená */
.projects-new .swiper-pagination {
  display: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .projects-new-button-wrapper {
    text-align: center;
  }

  .projects-new-title {
    font-size: 32px;
  }
}

/* =========================================================== */
/*                            FOOTER                           */
/* =========================================================== */


.site-footer {
  position: relative;
  background: url('/assets/images/footer-bg.jpg') no-repeat center top;
  background-size: cover;
  padding: 160px 1rem 4rem;
  margin-top: -150px;
  z-index: 0;
  overflow: hidden;
}

/* Overlay vrstva */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* nastav intenzitu: 0.3–0.5 podľa potreby */
  z-index: 0;
}

.footer-heading {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 10rem 0 10rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.footer-heading {
  position: relative;
  z-index: 1;
}

.footer-box {
  font-family: 'Helvetica', Arial, sans-serif;
  background-color: #ffffff;
  border-radius: 30px;
  padding: 3rem;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.custom-footer {
    background: linear-gradient(to top, #ffffff 0%, #f6f6f6 100%);
    color: #333333;
    padding: 70px 0 30px;
    position: relative;
    overflow: hidden;
}

.custom-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #FAB005, #2ecc71);
}

.custom-footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #FAB005, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-footer-about {
    color: #666666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.custom-footer h5 {
    color: #111111;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
}

.custom-footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 30px;
    height: 2px;
    background: #FAB005;
}

.custom-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-footer-links li {
    margin-bottom: 12px;
}

.custom-footer-links a {
    color: #555555;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color 0.3s ease;
}

.custom-footer-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background-color: #FAB005;
    transition: width 0.3s ease;
}

.custom-footer-links a:hover {
    color: #FAB005;
}

.custom-footer-links a:hover::after {
    width: 100%;
}



.custom-social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.custom-social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.custom-social-icon:hover {
    transform: translateY(-3px);
}

.custom-social-icon img {
    object-fit: contain;
    display: block;
}

.custom-footer-newsletter {
    position: relative;
    margin-top: 20px;
}

.custom-footer-newsletter input {
    padding: 12px 15px;
    border-radius: 25px;
    border: 1px solid #ccc;
    width: 100%;
    background: #f9f9f9;
    color: #333;
    outline: none;
    padding-right: 50px;
}

.custom-footer-newsletter input::placeholder {
    color: #999;
}

.custom-newsletter-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 40px;
    border-radius: 50%;
    background: #FAB005;
    border: none;
    color: #fff;
    transition: all 0.3s ease;
}

.custom-newsletter-btn:hover {
    background: #FAB005;
}

.custom-footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #777777;
}

.custom-footer-bottom-links {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.custom-footer-bottom-links a {
    color: #777777;
    text-decoration: none;
    transition: color 0.3s ease;
}

.custom-footer-bottom-links a:hover {
    color: #FAB005;
}

.custom-footer-section h5 {
    font-family: 'DM Sans', sans-serif;
    color: #111111;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
}

.custom-footer-section h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 30px;
    height: 2px;
    background: #FAB005;
}

.custom-footer-bottom a {
    color: #FAB005;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.custom-footer-bottom a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background-color: #FAB005;
    transition: width 0.3s ease;
}

.custom-footer-bottom a:hover::after {
    width: 100%;
}

.custom-footer-logo {
    margin-bottom: 20px;
}

.custom-footer-logo img {
    max-width: 198px;
    height: auto;
    display: block;
}


@media (max-width: 768px) {
    .custom-footer-section {
        margin-bottom: 40px;
    }
  .footer-heading {
      font-size: 46px;
  }    
}




/* --- O nás | HERO sekcia --- */
.hero-aboutus {
  background: url('/assets/images/about-us-bg.jpg') no-repeat center center;
  background-size: cover;
  height: 490px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;           /* podriadený */
  overflow: visible;    
}

.hero-aboutus::before {
  content: '';
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.3); /* uprav alfu podľa potreby (0.2–0.4) */
  z-index: 0;
}

.hero-aboutus .hero-content {
  position: relative; /* aby bola nad overlayom */
  z-index: 1;
}

.hero-aboutus .hero-content {
  text-align: center;
  width: 100%;
  max-width: 1300px; /* podľa šírky layoutu */
  margin: 0 auto;
  position: relative;
  padding: 0 1rem;
  margin-top: 150px;  
}

.hero-aboutus .hero-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 60px;
  line-height: 1;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* odstránenie absolute positioning a umiestnenie pod title */
.hero-aboutus .hero-breadcrumb {
  position: static;      /* namiesto absolute */
  margin-top: 3rem;      /* veľkosť medzery pod nadpisom */
  text-align: left;      /* zarovnať vľavo */
}

/* HERO BREADCRUMB – štýly */
.hero-aboutus .hero-breadcrumb li,
.hero-aboutus .hero-breadcrumb a {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.hero-aboutus .hero-breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.hero-aboutus .hero-breadcrumb li + li::before {
  content: '•';
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.8);
}

/* odkaz bez podčiarknutia a s prechodom farby */
.hero-aboutus .hero-breadcrumb a {
  text-decoration: none;
  transition: color 0.4s ease;
}

/* hover efekt – fade in/out do #FAB005 */
.hero-aboutus .hero-breadcrumb a:hover {
  color: #FAB005;
}

/* --- Body sekcia pod Hero --- */
.body-section {
  position: relative;
  z-index: 1;
  top: -90px; 
  width: 100%;
  background: linear-gradient(to bottom, #F6F3EC 0%, #FFFFFF 100%);
  border-radius: 50px;
  box-sizing: border-box;
  padding: 7rem 2rem;  
  margin-top: 2rem;       /* medzera nad sekciou */
}

/* voliteľne obmedziť šírku obsahu */
.body-section .body-container {
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
}

.body-section .body-container .pill {
  display: inline-block;
  margin-bottom: 1.5rem; /* alebo podľa potreby */
}

/* --- Štýly pre nadpisy a odstavce v body-sekcii --- */
.body-section .body-container h2 {
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0;
  margin-bottom: 2rem; /* prípadná medzera pod nadpisom */
}

.body-section .body-container p {
  font-family: 'Helvetica', sans-serif;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0.1em; /* 10% letter-spacing */
  color: #000000;
  margin-bottom: 1rem; /* prípadné odsadenie medzi odstavcami */
}


/* --- Our Numbers sekcia --- */
.our-numbers {
  padding: 4rem 1rem;
}
.our-numbers .container {
  max-width: 1300px;
  margin: 0 auto;
}

/* grid: veľký obrazok naľavo, tri cards a malý obrazok napravo */
.our-numbers .numbers-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem 1.5rem;
}

/* ---- Number-cards ---- */
/* --- Our Numbers sekcia --- */
.our-numbers {
  padding: 4rem 1rem;
}
.our-numbers .container {
  max-width: 1300px;
  margin: 0 auto;
}

/* grid: veľký obrázok + dve kartičky v stĺpci + kartička + malý obrázok */
.our-numbers .numbers-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem 1.5rem;
}

.our-numbers .shape {
  grid-column: 1;
  grid-row: 1 / 3;
  background-image: url(/assets/images/gajdos.jpg);
  /* vertikálne posunutie o 20 px nadol oproti stredu */
  background-position: center calc(50% + 50px);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
}


/* 2. stĺpec, 1. riadok: Global Reach */
.our-numbers .number-card--reach {
  grid-column: 2;
  grid-row: 1;
}

/* 3. stĺpec, 1. riadok: Local Expertise */
.our-numbers .number-card--expertise {
  grid-column: 3;
  grid-row: 1;
}

/* 2. stĺpec, 2. riadok: Our Impact */
.our-numbers .number-card--impact {
  grid-column: 2;
  grid-row: 2;
}

/* 3. stĺpec, 2. riadok: malý obrázok */
.our-numbers .small-image {
  grid-column: 3;
  grid-row: 2;
  background: url('/assets/images/about-us-number-section.jpg') center/cover no-repeat;
  border-radius: 20px;
  aspect-ratio: 1;
  width: 100%;
}

/* --- Všeobecný štýl kartičiek --- */
.our-numbers .number-card {
  background-color: #F6F3EC;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgb(105 93 80 / 56%);
}

/* titulok kartičky */
.our-numbers .number-card .number-card-title {
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  position: relative;
}
.our-numbers .number-card .number-card-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #DDD;
}

/* číslo v kartičke */
.our-numbers .number-card .number-value {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  margin: 0 0 0.5rem;
}
.our-numbers .number-card .number-value span {
  color: #FAB005;
  font-size: 34px;
  position: relative;
  top: -0.2em; /* uprav hodnotu podľa potreby */
  display: inline-block;
}

/* popis pod číslom */
.our-numbers .number-card .number-label {
  font-family: 'Helvetica', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* --- Equal height cards --- */
.our-numbers .numbers-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;    /* dva rovnaké riadky */
  gap: 2rem 1.5rem;
  align-items: stretch;           /* všetky položky roztiahnu výšku bunky */
}

/* všetky „kartičky“ aj malý obrázok roztiahnu na 100% výšky svojej bunky */
.our-numbers .number-card,
.our-numbers .small-image {
  height: 100%;
}

/* 1) Uistíme sa, že karta je flex‐kontajner v stĺpci */
.our-numbers .number-card {
  display: flex;
  flex-direction: column;
}

/* 2) Časť s číslom a popisom vytlačíme dole */
.our-numbers .number-card .number-value {
  margin-top: auto;
}

/* malé odsadenie medzi číslo a štítkom */
.our-numbers .number-card .number-label {
  margin-top: 0.25rem;
}

@media (max-width: 991px) {
  .our-numbers {
    padding: 2rem 1rem;
  }
  .our-numbers .numbers-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.5rem 0;
  }
  /* všetky položky budú v rade za sebou */
  .our-numbers .shape,
  .our-numbers .number-card--reach,
  .our-numbers .number-card--expertise,
  .our-numbers .number-card--impact,
  .our-numbers .small-image {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* zrušíme rovnakú výšku riadkov */
  .our-numbers .number-card,
  .our-numbers .small-image {
    height: auto;
    min-height: auto;
  }
  /* zmenšíme padding v kartičkách */
  .our-numbers .number-card {
    padding: 1.5rem;
  }
  /* shape – full width, výška podľa šírky */
  .our-numbers .shape {
    height: auto;
    aspect-ratio: 1;
  }
  /* small-image – full width, square */
  .our-numbers .small-image {
    height: auto;
    aspect-ratio: 1;
  }
}




/* ---------- Sekcia realizácií ---------- */
.implementation-projects h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #FAB005;
  margin-bottom: 2rem;
}

/* prepínač */
.implementation-nav {
  display: flex;
  justify-content: center;  /* ⇦ toto zabezpečí centrovanie */
  gap: 2rem;
  list-style: none;
  margin-bottom: 2.5rem;
  padding: 0;
}
.implementation-nav li {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  color: #000;
  transition: color 0.2s;
}
.implementation-nav li.active {
  color: #FAB005;
}
.implementation-nav li.active::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: #FAB005;
}

/* panely */
.impl-pane {
  display: none;
}
.impl-pane.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* kontajner kariet */
.impl-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
}

/* jednotlivé karty */
.impl-card {
  display: block;
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

/* obrázok */
.impl-card-img {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
}

/* nadpis */
.impl-card-title {
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 1rem;
}

/* žltý divider */
.impl-divider {
  width: 64px;
  height: 2px;
  background: #FAB005;
  margin: 0 1rem 1rem;
}

/* popis */
.impl-card-desc {
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  color: #333;
  margin: 0 1rem 1.5rem;
  line-height: 1.5;
}

.impl-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: start;
}
.impl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ======================== */
/* sekcia CONTACT-HEADER    */
/* ======================== */
.contact-header {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #F6F3EC;
  padding: 4rem 1rem;
  text-align: center;
}

.contact-header-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* pill už existuje, len doladíme farbu okraja */
.contact-header .pill {
  border-color: #FAB005;
  color: #000;
}

/* hlavný titulok */
.contact-header-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 100%;
  letter-spacing: 0;
  margin: 1.5rem 0 1rem;
}

/* podnadpis */
.contact-header-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0;
  margin-bottom: 2rem;
  color: #333;
}

.contact-link {
  font-weight: 700;             /* tučnejší text */
  color: inherit;               /* zdedí farbu okolia */
  text-decoration: none;        /* zruší pôvodné podčiarknutie */
  position: relative;           /* pre pseudo-element */
  transition: color 0.3s ease;
}

/* pseudo-element pre podčiarknutie */
.contact-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;                 /* drobný vertikálny odsok */
  width: 0;
  height: 1px;                  /* hrúbka linky */
  background-color: #FAB005;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* pri hover expandujeme podčiarknutie */
.contact-link:hover {
  color: #000;                  /* prípadne iná farba textu */
}
.contact-link:hover::after {
  left: 0;
  width: 100%;
  transform: none;
}


/* wrapper pre full-width sekcie (podobne ako contact-header) */
.fullwidth-section {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* /assets/css/style.css */

/* Kontajner pre carousel – zaoblené rohy a orezanie všetkého vnútorného */
#imageSlider {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* Pevná výška + orezy pre obrázky */
#imageSlider .carousel-inner,
#imageSlider .carousel-item {
  /* už netreba overflow tu */
}
#imageSlider .carousel-item img {
  height: 650px;
  object-fit: cover;
  width: 100%;
  border-radius: 0;   /* aby neprekročil radius kontajnera */
}

/* Indicators – malé bodky *vo vnútri* orezaného kontajnera */
#imageSlider .carousel-indicators {
  bottom: 10px;            /* posuňme ich mierne hore */
  left: 50%;
  transform: translateX(-50%);
}
#imageSlider .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}
#imageSlider .carousel-indicators .active {
  background-color: #FAB005;
}

/* Centrovanie a vzhľad pill */
.body-section .body-container {
  text-align: center;
}
.body-section .body-container .pill {
  display: inline-block;
  margin-bottom: 1rem;
  text-align: center;  
}


/* Nový h2 nadpis pod pill */
.gallery-heading {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Uisti sa, že slider je relatívny kontejner */
#imageSlider {
  position: relative;
}

/* Centrovanie indikátorov do stredu */
#imageSlider .carousel-indicators {
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;       /* zrušíme defaultné bottom */
  margin: 0;          /* odstránime prípadné marginy */
  width: auto;        /* nech indikátory zaberajú len svoju šírku */
  padding: 0;         /* odstránime padding */
}

/* Štýl gulôčok zachováme */
#imageSlider .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 4px;      /* medzera medzi gulôčkami */
}
#imageSlider .carousel-indicators .active {
  background-color: #FAB005;
}


/* ================================= */
/* RESPONZÍVNY STYL PRE MOBIL (≤ 991px) */
/* ================================= */
@media (max-width: 991px) {

  /* Zaoblenie rohov po celej šírke */
  #imageSlider .carousel-inner {
    border-radius: 8px;
  }

  /* Šípky – vycentrované vertikálne */
  #imageSlider .carousel-control-prev,
  #imageSlider .carousel-control-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
  }
  #imageSlider .carousel-control-prev { left: 10px; }
  #imageSlider .carousel-control-next { right: 10px; }

  /* Pill (nad sliderom) – menšia a centrovaná */
  .body-section .body-container .pill {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    margin-bottom: 1rem;
  }

  /* Skrytie indikátorov */
  #imageSlider .carousel-indicators {
    display: none !important;
  }
}

/* ================================= */
/* RESPONZÍVNY STYL PRE MALÉ MOBILY (≤ 576px) */
/* ================================= */
@media (max-width: 576px) {
  /* Šípky – zmenšené */
  #imageSlider .carousel-control-prev,
  #imageSlider .carousel-control-next {
    width: 28px;
    height: 28px;
  }
  #imageSlider .carousel-control-prev-icon,
  #imageSlider .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
  }

  /* Pill – ešte kompaktnejšia */
  .body-section .body-container .pill {
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.75rem;
  }
}


/* ===========================================================
   SERVICES SECTION
   =========================================================== */

/* 1) SERVICES LIST */
.services-list__items {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.services-list__item {
  display: flex;
  align-items: center;
  max-width: 360px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s;
}
.services-list__item.active {
  background-color: #FAB005;
}
.services-list__item.active .services-list__title {
  color: #fff;
}
.services-list__thumb {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.services-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services-list__title {
  margin: 0 1rem;
  font-family: Helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #000;
}
@media (max-width: 768px) {
  .services-list__items {
    flex-direction: column;
    align-items: center;
  }
  .services-list__item {
    width: 100%;
    max-width: 90%;
  }
}

/* 2) SERVICE DESCRIPTION */
.service-description {
  padding: 4rem 0;
}
.service-description__box {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.service-description__inner {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.service-description__media {
  flex: 1 1 45%;
  display: flex;
}
.service-description__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}
.service-description__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.service-description__pill {
  display: inline-block;
  padding: .5rem 1rem;
  border: 1px solid #FAB005;
  border-radius: 50px;
  font-family: Helvetica, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  max-width: 136px !important;
}
.service-description__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #000;
}
.service-description__text {
  margin: 0;
  font-family: Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  letter-spacing: normal !important;
}
.service-description__divider {
  border: none;
  height: 1px;
  background: #E0E0E0;
  margin: 1rem 0;
  width: 100%;
}
.service-description__features {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-description__features li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: Helvetica, sans-serif;
  font-size: .95rem;
  color: #000;
}
.service-description__features li i {
  color: #FAB005;
  font-size: 1rem;
}
.service-description__bottom {
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .service-description__inner {
    flex-direction: column;
    text-align: center;
  }
  .service-description__media,
  .service-description__content {
    flex: 1 1 100%;
  }
  .service-description__divider,
  .service-description__pill {
    margin: 1rem auto;
  }
}

/* 3) CHARACTERISTICS */
.characteristics__box {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.characteristics__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.characteristics__price-block {
  flex: 1;
  text-align: center;
}
.characteristics__icon {
  font-size: 2.5rem;
  color: #FAB005;
}
.characteristics__price {
  margin: .5rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  white-space: nowrap;
  flex-shrink: 0;  
  letter-spacing: normal !important;

}
.characteristics__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 60px;
  background: #FAB005;
}
.characteristics__left {
  flex: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  justify-content: center; 
}
.characteristics__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  background: #FAB005;
  color: #000;
  font-family: Helvetica, sans-serif;
  font-size: .875rem;
  border-radius: 4px;
}
.characteristics__info {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-align: left;
}
.characteristics__text {
  margin: 0;
  font-family: Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal !important;
  text-align: center;
}
.characteristics__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  font-family: Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: #FAB005;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
  align-self: center;    /* vystredí tlačidlo v stĺpci */
}
.characteristics__btn:hover {
  background: #000;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .characteristics__inner {
    flex-direction: column;
    text-align: center;
  }
  .characteristics__sep {
    display: none;
  }
  .characteristics__price-block,
  .characteristics__left,
  .characteristics__info {
    width: 100%;
    flex: none;
  }
  .characteristics__info {
    align-items: center;
  }
}

/* Sekcia mapy na realizácie */
.map-section {
  padding: 4rem 0;
}
.map-container {
  max-width: 800px;
  margin: 0 auto;
}
.map-image {
  width: 100%;
  height: auto;
}


/* Kontakt-header - zabezpečíme relatívne pozicionovanie */
.contact-header {
  position: relative;
  padding-bottom: 4rem; /* ponecháme priestor pod textom */
}

/* Tlačidlo – absolute, vycentrované horizontálne a posunuté vertikálne */
.contact-header .btn-menu {
  position: absolute;
  left: 50%;
  bottom: 0; /* prisunieme na spodok sekcie */
  transform: translate(-50%, 50%); /* vystredíme a posúvame nadol mimo boxu */
}


/* =========================================================== */
/*                   CONTACT CARDS SECTION                     */
/* =========================================================== */
.contact-cards__grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.contact-card {
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 20px;
  padding: 2rem;
  width: 100%;
  max-width: 330px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-card__icon {
  font-size: 1.5rem;
  color: #000;
}
.contact-card__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
}
.contact-card__text {
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  color: #333;
  margin: 0;
}
.btn-contact {
  margin-top: auto;
  background-color: #FAB005;
  color: #fff;
  border: none;
  width: 100%;
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  align-self: center;    /* centrovanie v kartičke */
}

.btn-contact:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* center contact form section */
.contact-form-section {
  display: flex;
  justify-content: center;
  padding: 4rem 0; /* podľa ostatných sekcií */
}

.contact-form-section .contact-inner {
  margin: 0 auto;
}



/* Responsívne */
@media (max-width: 768px) {
  .contact-cards__grid {
    flex-direction: column;
    align-items: center;
  }
}

.default-btn {
  background-color: #FAB005;
  color: #fff;
  height: 62px;
  width: 270px;
  font-size: 18px;
  border-radius: 50px;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform 0.3s ease, background-color 0.3s ease;

  /* Centrovanie */
  margin: 0 auto;
}

/* hover stav */
.default-btn:hover {
  background-color: #000;
  color: #fff;
  transform: translateY(-4px);
}

.projects-new-card {
  display: block;       /* aby celý element bol klikateľný */
  cursor: pointer;      /* ukazovateľ ruky na hover */
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.projects-new-label {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
  text-align: center;  
}

.projects-new-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;               /* odsadenie pod textom */
  width: 0;
  height: 2px;
  background-color: #FAB005;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.projects-new-card:hover .projects-new-label {
  color: #FAB005;
}

.projects-new-card:hover .projects-new-label::after {
  left: 0;
  width: 100%;
  transform: none;
}


/* =========================================================== */
/*                       HAMBURGER BUTTON                      */
/* =========================================================== */
.hamburger {
  display: none;
  border: none;
  background: #FAB005;
  width: 48px;
  height: 48px;
  border-radius: 30%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.2s;
}
.hamburger i {
  color: #000 !important;
  font-size: 1.25rem;
}

/* =========================================================== */
/*                       RESPONSIVE RULES                      */
/* =========================================================== */
@media (max-width: 991px) {
  .menu-content {
    display: none;
  }
  .hamburger {
    display: inline-flex;
  }

  .menu-container {
    width: 90%;
    padding: 0 1rem;
    border-radius: 30px;
  }
}

@media (max-width: 991px) {
  /* 1) Hero‐text posuneme blíž k vrchu a zmenšíme šířku */
  .hero-text {
    top: calc(122px + 60px);  /* nastavíš si tu vlastní hodnotu místo 60px */
    width: 90%;
    max-width: 400px;
    padding: 0 1rem;
  }
  .hero-title {
    font-size: 36px;          /* zmenšené pro mobil */
    line-height: 1.2;
  }
  .hero-subtext {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 1rem;
  }

  /* 2) Přidáme mobilní divider pod subtext */
  .hero-divider-mobile {
    position: absolute;
    top: calc(122px + var(--hero-divider-offset));
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    height: 1px;
    background-color: rgba(255,255,255,0.3);
    display: none; /* ve výchozím stavu skryto */
  }

  .hero-divider-mobile {
    display: block;
  }

  /* 3) Hero‐bottom teď slouží jako sloupec */
  .hero-bottom {
    top: calc(122px + var(--hero-text-offset) + var(--hero-subtext-offset) + 140px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-top: none;  /* divider řešíme mobilně zvlášť */
  }
  .hero-bottom-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    color: #FFFFFF;
    text-align: center;
    /* nyní bude text vystředěný s větším fontem */
    max-width: 90%;
    padding-bottom: 30px;
  }
  .hero-bottom-button {
    margin-bottom: 2rem;
  }
    .boxes-row {
    flex-direction: column;
    align-items: center;
  }
  .box {
    max-width: 90%;
    margin-bottom: 2rem;
  }
  .boxes {
    margin-top: -220px;
  }
   .boxes-row {
    flex-direction: column;
    align-items: center;
    gap: 1rem;            /* méně mezi řádky */
  }
  .box {
    max-width: 90%;
    margin-bottom: 1rem;  /* zmenšit vertikální odsazení */
  }
 .logo img {
    height: 32px;
  }
  /* 1) skrýt originální .aboutus-image */
  .aboutus-image {
    display: none;
  }

  /* 2) nadpis rozšíříme na 100% a vložíme do něj obrázek jako ::after */
  .aboutus-title {
    position: relative;
    max-width: 100% !important;   /* zruší omezení z desktopu */
    margin: 0 auto 1.5rem;        /* centrování a odsazení */
    font-size: 30px;
  }
  .aboutus-title::after {
    content: "";
    display: block;
    width: 100%;               /* celá šířka sloupce */
    height: 390px;             /* pevná výška */
    margin-top: 1rem;
    background: url('/assets/images/gajdosovci.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(97,97,97,0.25);
  }

  /* 3) zbytek zachovat tak, aby následoval za pseudo‐image */
  .aboutus-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .aboutus-stats { order: 3; }
  .aboutus-items { order: 4; }
  .aboutus-button { 
    order: 5; 
    margin: 2rem auto 0; 
    width: 100%;
  }
  .aboutus-number {
    margin: 0 auto;
    text-align: center;
  }  
}
  
/* ================================================
   OVERRIDE — menu vždy udrží CTA "Napíšte nám"
   ================================================ */

/* nech sa stred (navigácia) môže zmenšovať, pravý blok nie */
.menu-content { flex: 1 1 auto; min-width: 0; }
.menu-nav { flex: 1 1 auto; gap: clamp(.75rem, 2vw, 2rem); }
.menu-contact,
.btn-menu,
.phone { flex-shrink: 0; }

/* tlačidlo nech sa neláme a nikdy nezmenšuje */
.btn-menu { white-space: nowrap; }

/* jemné sprísnenie rozostupov pri stredných šírkach */
@media (max-width: 1200px) {
  .menu-divider { margin-left: 24px; margin-right: 1rem; }
  .menu-nav .nav-link { font-size: 0.95rem; }
}

/* ak sa začína „tlačiť“ – skry text tel. čísla, ponechaj ikonku */
@media (max-width: 1120px) {
  .phone a { display: none; }
  .phone-icon { margin-right: 0; }
}

/* ešte viac miesta – odstráň deliacu čiaru */
@media (max-width: 1040px) {
  .menu-divider { display: none; }
}

/* ================================================
   OVERRIDE — menu úpravy (divider OFF, phone ON)
   ================================================ */

/* divider už nikdy nepoužívame */
.menu-divider { 
  display: none !important; 
}

/* nech sa navigácia môže scvrknúť, ale phone + CTA držia vždy */
.menu-content { 
  flex: 1 1 auto; 
  min-width: 0; 
}
.menu-contact, 
.menu-contact .phone, 
.menu-contact .btn-menu {
  flex-shrink: 0;   /* nikdy sa nezmenšia ani neodsúvajú */
  white-space: nowrap;
}

/* telefónne číslo nech je vždy viditeľné,
   skryje sa až v mobile pri breakpointe */
.phone a { 
  display: inline !important; 
}

/* ================================================
   OVERRIDE — správna medzera logo ↔ navigácia
   ================================================ */

/* logo nech sa neprilepí, pridáme medzeru cez flex */
.logo {
  margin-right: 2rem; /* medzera medzi logom a navigáciou */
}

/* zrušíme pôvodný margin na navigácii */
.menu-nav {
  margin-left: 0 !important;
}

/* ================================================
   OVERRIDE — medzera pri logu, CTA vždy vnútri
   ================================================ */

/* 1) medzera medzi logom a navigáciou cez margin na logu
      (nie na navigácii, aby sme netlačili CTA) */
.logo { margin-right: clamp(16px, 3vw, 40px); }

/* 2) nech sa stred (navigácia) môže scvrknúť, pravý blok nie */
.menu-content { flex: 1 1 auto; min-width: 0; }
.menu-nav     { flex: 1 1 auto; min-width: 0; gap: clamp(1rem, 2.2vw, 2rem); }
.menu-contact, .menu-contact .phone, .menu-contact .btn-menu { flex-shrink: 0; }
.btn-menu { white-space: nowrap; }
.phone a  { white-space: nowrap; display: inline !important; }

/* 3) jemné zmenšenie písma a rozostupov pred breakpointom,
      aby sa všetko vošlo bez pretiekania */
@media (max-width: 1240px) {
  .menu-nav .nav-link,
  .dropdown-text { font-size: 0.98rem; }
  .menu-nav { gap: clamp(.75rem, 1.6vw, 1.25rem); }
}
@media (max-width: 1140px) {
  .menu-nav .nav-link,
  .dropdown-text { font-size: 0.94rem; }
  .menu-nav { gap: clamp(.5rem, 1.2vw, 1rem); }
}

/* 4) divider už nepoužívame nikdy */
.menu-divider { display: none !important; }

/* ===========================================================
   OVERRIDE — responzívne MEGAMENU (bez pevnej šírky)
   =========================================================== */

/* základ: šírka podľa okna, centrálne zarovnanie, wrap položiek */
.mega-dropdown .mega-menu {
  width: min(1300px, calc(100vw - 3rem)) !important; /* okraje ~1.5rem zľava/pravá */
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: none;
  flex-wrap: wrap;              /* zalamovanie kariet */
  gap: 1rem;                    /* medzery medzi kartami */
  padding: 1.25rem 1.5rem;      /* vnútorné okraje */
  box-sizing: border-box;       /* počítaj padding do šírky */
}

/* zobrazenie na hover ostáva */
.mega-dropdown:hover .mega-menu {
  display: flex !important;
}

/* položky v mriežke – default 4 stĺpce */
.mega-dropdown .mega-item {
  flex: 1 1 calc(25% - 1rem);   /* ~4 stĺpce */
  min-width: 220px;             /* aby neboli príliš úzke */
}

/* jemné škálovanie výšky obrázka */
.mega-dropdown .mega-item img { height: 180px; }

/* ≥992 & ≤1200px → 3 stĺpce */
@media (max-width: 1200px) and (min-width: 992px) {
  .mega-dropdown .mega-menu {
    width: min(1100px, calc(100vw - 2rem)) !important;
    padding: 1rem 1.25rem;
  }
  .mega-dropdown .mega-item { flex: 1 1 calc(33.333% - 1rem); }
  .mega-dropdown .mega-item img { height: 160px; }
}

/* tesne nad mobilným breakpointom (≈992–1050px) → 2 stĺpce, nech sa všetko vojde */
@media (max-width: 1050px) and (min-width: 992px) {
  .mega-dropdown .mega-item { flex: 1 1 calc(50% - 1rem); }
  .mega-dropdown .mega-item img { height: 150px; }
}

/* mobil (≤991px) megamenu aj tak nespúšťame, lebo celé .menu-content je skryté */

/* ===========================================================
   OVERRIDE — MEGAMENU 4 STĹPCE VŽDY (desktop)
   =========================================================== */

.mega-dropdown .mega-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: calc(37px + 56px + 32px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1300px, calc(100vw - 3rem)); /* prispôsobí sa viewportu */
  background-color: #1b1f12;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 200;
  transition: opacity 0.2s, visibility 0.2s;

  /* GRID 4 stĺpce */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  box-sizing: border-box;
}

.mega-dropdown:hover .mega-menu {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mega-dropdown .mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}

.mega-dropdown .mega-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

/* pod 992px sa celé .menu-content skrýva -> mobilné menu */
@media (max-width: 991px) {
  .mega-dropdown .mega-menu {
    display: none !important;
  }
}

/* ===========================================================
   OVERRIDE 
   =========================================================== */

/* 1) Výška a vnútorné limity */
.hero {
  /* plynulá výška: min 560px, ideálne 70vh, max 890px */
  min-height: clamp(560px, 70vh, 890px);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;

  /* responzívne premenné (prepočítajú sa nižšie) */
  --hero-text-offset: clamp(40px, 8vw, 120px);
  --hero-subtext-offset: clamp(16px, 3vw, 40px);
  --hero-bottom-offset: clamp(220px, 32vw, 360px);
}

/* 2) Textový blok – šírka a pozícia */
.hero-text {
  top: calc(122px + var(--hero-text-offset)); /* 122px = výška menu + medzera */
  width: min(1100px, calc(100% - 2rem));
  padding: 0 1rem;
}

/* 3) Typografia – plynulé veľkosti */
.hero-title {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: 0;
}
.hero-subtext {
  margin-top: var(--hero-subtext-offset);
  font-size: clamp(18px, 2.8vw, 30px);
  line-height: 1.15;
  color: rgba(255,255,255,0.85);
}

/* 4) Spodný rad (text + tlačidlo) – fluid šírka a wrap */
.hero-bottom {
  top: calc(122px + var(--hero-bottom-offset));
  width: min(1300px, calc(100% - 2rem));
  padding: 0 1rem;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;               /* nech sa môže zalomiť na menších šírkach */
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid #ffffff3d;
}

/* text vľavo – nech má rozumné limity */
.hero-bottom-text {
  max-width: clamp(420px, 32%, 560px);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3;
}

/* 5) Tablet úpravy (medzi desktopom a mobilným breakpointom) */
@media (max-width: 1200px) and (min-width: 992px) {
  .hero {
    --hero-text-offset: clamp(32px, 7vw, 80px);
    --hero-bottom-offset: clamp(200px, 28vw, 300px);
  }
  .hero-bottom-text { max-width: clamp(360px, 40%, 520px); }
}

/* 6) Mobil už máš v projekte riešený (≤ 991px),
      len doladíme šírky, aby to sedelo s novými clamp hodnotami */
@media (max-width: 991px) {
  .hero-text {
    width: 90%;
    max-width: 480px;
  }
  .hero-bottom {
    width: 90%;
    max-width: 480px;
    padding: 0;
    gap: 1rem;
  }
  .hero-bottom-text {
    max-width: 100%;
    font-size: clamp(18px, 4.5vw, 22px);
  }
}

/* ===========================================================
   OVERRIDE — BOXES: vždy 3 vedľa seba (do mobilu)
   =========================================================== */

/* kontajner na grid, centrovaný a fluid */
.boxes-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* presne 3 stĺpce */
  gap: clamp(1rem, 2.5vw, 2rem);
  width: min(1300px, calc(100% - 2rem));
  margin: 0 auto;
}

/* položky bez pevného max-width, rovnaká výška rozumne limitovaná */
.box {
  grid-column: auto;
  max-width: none !important;     /* zruš pôvodných 360px */
  width: 100%;
  padding: clamp(20px, 3vw, 38px);
}

/* plynulejšia typografia v boxoch */
.box-title { font-size: clamp(16px, 1.6vw, 18px); }
.box-text  { font-size: clamp(13px, 1.4vw, 14px); }

/* mobil: 1 stĺpec (v mobile aj tak prepína celé menu/layout) */
@media (max-width: 991.98px) {
  .boxes-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   OVERRIDE — HERO (mobil ≤ 991px)
   =========================================================== */
@media (max-width: 991px) {
  /* 1) Väčšia medzera medzi titulkom a podtitulom */
  .hero-subtext {
    margin-top: clamp(20px, 5vw, 32px) !important;
  }

  /* 2) Vycentrovanie tlačidla „Naše služby“ */
  .hero-bottom-button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .btn-services {
    margin: 0 auto !important;   /* na istotu, aj keby inde bolo iné zarovnanie */
  }

  /* 3) Odstránenie dvojitého dividera */
  .hero-bottom {
    border-top: none !important;  /* vypneme hornú čiaru v hero-bottom */
  }
  /* ak chceš mať 1 divider, nechaj tento zobrazený; inak ho skry */
  .hero-divider-mobile {
    display: block !important;    /* ponechaj 1 mobilný divider */
    /* ak divider nechceš vôbec, tak použij: display:none !important; */
  }
}

/* Menšie medzery v HERO (mobil ≤ 991px) */
@media (max-width: 991px) {
  /* posuny: subtext bližšie, divider vyššie */
  .hero {
    --hero-subtext-offset: 16px;   /* bola väčšia → menšia medzera pod titulkom */
    --hero-divider-offset: 96px;   /* divider bližšie k subtextu */
  }

  /* jemná medzera priamo okolo dividera */
  .hero-divider-mobile {
    margin-top: 165px !important;
    margin-bottom: 10px !important;
  }

  /* spodný blok (text + tlačidlo) bližšie k divideru */
  .hero-bottom {
    top: calc(
      122px + var(--hero-text-offset) + var(--hero-subtext-offset) + 52px
    ) !important; /* menšie ako doteraz */
  }

  /* odstráň zbytočné vnútorné odsadenia textu pod dividerom */
  .hero-bottom-text {
    margin-top: 190px !important;
    padding-top: 0 !important;
  }
}

/* ================================================
   OVERRIDE — mobilné menu: štýly pre .mobile-parent
   ================================================ */
@media (max-width: 991px) {
  .mobile-menu .mobile-menu-list .mobile-parent {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 1rem;

    background: transparent;
    color: #000;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;

    /* reset natívneho button vzhľadu */
    border: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* rovnaký oddeľovací border ako ostatné položky */
    border-top: 1px solid #eee;
  }
  .mobile-menu .mobile-menu-list .mobile-parent:focus { outline: none; }
  .mobile-menu .mobile-menu-list .mobile-parent:hover { color: #FAB005; }

  /* šípka vpravo a jej rotácia po otvorení */
  .mobile-menu .mobile-menu-list .mobile-parent .dropdown-arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s;
  }
  .mobile-menu .mobile-menu-list .has-dropdown.open > .mobile-parent .dropdown-arrow {
    transform: rotate(180deg);
  }
}

/* ABOUT US – doplnky pre Bootstrap grid integráciu */
.aboutus .aboutus-title { max-width: 100%; }

/* menšie rozostupy medzi číslom a bulletmi na menších breakpointoch */
.aboutus .aboutus-stats { gap: 2.5rem; }
@media (min-width: 992px) {
  .aboutus .aboutus-stats { gap: 2rem; }
}

/* tlačidlo: odstráň pevný offset a nech sa centrovanie riadi rodičom */
.aboutus .aboutus-button {
  margin-top: 2rem;
  margin-left: 0 !important;
  width: auto;
  min-width: 190px;
}

/* obraz – nech sa prispôsobí šírke stĺpca na desktope (na mobile ho už rieši tvoje CSS) */
.aboutus .aboutus-image img {
  width: 100%;
  height: 650px;
  max-width: 560px; /* voliteľné: mierne väčšie ako pôvodných 435px */
}

/* ===========================================================
   OVERRIDE — ABOUT US IMAGE (desktop ≥ 992px)
   =========================================================== */
@media (min-width: 992px) {
  .aboutus-row {
    align-items: stretch !important; /* oba stĺpce rovnako vysoké */
  }

  .aboutus-image {
    display: flex !important;
    align-items: stretch !important;
  }

  .aboutus-image img {
    width: 100% !important;
    max-width: none !important;    /* odstráni limit 435px */
    object-fit: cover !important;  /* zachová proporcie */
    border-radius: 20px !important;
    box-shadow: 0 2px 4px rgba(97, 97, 97, 0.25) !important;
  }
}
/* ===========================================================
   OVERRIDE — ABOUT US (mobil ≤ 991px)
   =========================================================== */
@media (max-width: 991px) {
  .aboutus-title {
    text-align: center !important;
  }

  .aboutus-stats {
    flex-direction: column !important;  /* položky pod seba */
    align-items: center !important;     /* vycentruj na stred */
    gap: 1rem !important;               /* menšie rozostupy */
  }

  .aboutus-number {
    text-align: center !important;
    margin: 0 auto 1rem !important;
  }
}

/* ===========================================================
   OVERRIDE — RESPONSÍVNA sekcia HOW TO
   =========================================================== */

/* 1) Plynulé premenné pre rozostupy a ikonu */
:root{
  --hto-gap-number-icon: clamp(1rem, 2.2vw, 2rem);      /* číslo ↔ ikona */
  --hto-icon-w:           clamp(28px, 3.2vw, 40px);      /* veľkosť ikony */
  --hto-gap-icon-question: clamp(1rem, 8vw, 12rem);      /* ikona ↔ otázka */
  --hto-indent: calc(
    var(--hto-gap-number-icon)
    + var(--hto-icon-w)
    + var(--hto-gap-icon-question)
  );
}

/* 2) Kontajner šírka + vnútorné okraje */
.howto{
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.howto-inner{
  max-width: min(1300px, calc(100% - 2rem));
  margin: 0 auto;
}

/* 3) Typografia – plynulé veľkosti */
.howto-title{
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.1;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.howto-number{ font-size: clamp(28px, 3.6vw, 34px); }
.howto-question{ font-size: clamp(16px, 2.4vw, 20px); }

/* 4) Hlavička riadka + ikona */
.howto-header{
  padding: clamp(.75rem, 2vw, 1rem) 0;
  gap: var(--hto-gap-number-icon);
}
.howto-icon{
  width: var(--hto-icon-w);
  height: var(--hto-icon-w);
  margin-right: var(--hto-gap-icon-question);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0;
}

/* 5) Telo (odpoveď) – fluid odsadenie zľava a výška pri otvorení */
.howto-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
}
.howto-item.open .howto-body{
  max-height: 600px;           /* viac priestoru na desktop */
  padding-bottom: 1rem;
}
.howto-body p{
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
}

/* 6) Tablet (1200→992) – trocha kompaktnejší layout */
@media (max-width: 1200px) and (min-width: 992px){
  :root{
    --hto-gap-icon-question: clamp(.75rem, 5vw, 8rem);
  }
  .howto-item.open .howto-body{ max-height: 520px; }
}

/* 7) Mobil ≤991px – už máš base štýly, len zarovnáme s novými premennými */
@media (max-width: 991px){
  :root{
    --hto-gap-number-icon: 1rem;
    --hto-icon-w: 32px;
    --hto-gap-icon-question: 1rem;
    --hto-indent: calc(
      var(--hto-gap-number-icon)
      + var(--hto-icon-w)
      + var(--hto-gap-icon-question)
    );
  }
  .howto-body{ padding-left: 0; }
  .howto-item.open .howto-body{ max-height: 420px; }
}

/* ===========================================================
   OVERRIDE — RESPONSÍVNA CONTACT sekcia
   =========================================================== */

/* 1) Celý blok a pozadie – plynulé okraje/šírky */
.contact{
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}
.contact-inner{
  width: min(1100px, calc(100% - 2rem));
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

/* 2) Nadpisy/pill – plynulá typografia */
.pill{ font-size: clamp(.8rem, 1.6vw, .875rem); }
.contact-title{
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* 3) Dva stĺpce formulára – lepšia pružnosť pred mobilom */
.contact-fields{
  gap: clamp(1rem, 3vw, 2rem);
}
.left-column, .right-column{
  flex: 1 1 0;
  min-width: clamp(280px, 44%, 480px);
}
.left-column input, .right-column textarea{
  padding: clamp(.85rem, 2.2vw, 1rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 15px; /* vizuálne vyrovnanie medzi input/textarea */
  font-size: clamp(.95rem, 1.8vw, 1rem);
}

/* 4) Footer formulára – pružné rozloženie + čitateľné medzery */
.contact-footer{
  gap: clamp(.75rem, 2vw, 1rem);
}
.contact-note{
  font-size: clamp(.9rem, 1.8vw, 1rem);
}

/* CTA v kontakte – nech vie byť kompaktnejšie na menších šírkach */
.btn-call-back{
  width: clamp(220px, 28vw, 270px);
  height: clamp(52px, 6.2vw, 62px);
  font-size: clamp(16px, 2.2vw, 18px);
}

/* 5) Contact header (hero nad kontaktom) – tlačidlo pod boxom nech „sadne“ všade */
.contact-header{
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
}
.contact-header .btn-menu{
  transform: translate(-50%, 45%);      /* trochu menší presah na menších šírkach */
  padding: clamp(.5rem, 1.6vw, .6rem) clamp(1.2rem, 3vw, 1.8rem);
  font-size: clamp(.95rem, 2vw, 1rem);
}

/* 6) Contact cards – 3–2–1 grid bez zmeny HTML */
.contact-cards__grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  width: min(1300px, calc(100% - 2rem));
  margin: 0 auto;
}
.contact-card{ grid-column: span 4; }
@media (max-width: 1199.98px){
  .contact-card{ grid-column: span 6; }
}
@media (max-width: 767.98px){
  .contact-card{ grid-column: span 12; }
}

/* 7) Mobilné doladenie (už máš base, len zarovnáme s clamp hodnotami) */
@media (max-width: 991.98px){
  .contact-inner{
    width: min(720px, 100%);
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  }
  .left-column, .right-column{
    min-width: 100%;
    max-width: 480px;
  }
  .btn-call-back{
    width: min(270px, 100%);
  }
}

/* ===========================================================
   OVERRIDE — Realizácie: vždy 3 karty vedľa seba až po breakpoint
   =========================================================== */

.implementation-projects .impl-cards{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 2rem;                           /* držíme tvoju medzeru */
}

.implementation-projects .impl-card{
  grid-column: span 4;                 /* 12/4 = 3 stĺpce */
  width: auto;                         /* zruší šírkové obmedzenia */
  max-width: none;                     /* 360px limit preč */
}

/* Po prepnutí do mobilu (rovnaký breakpoint ako menu) → 1 stĺpec */
@media (max-width: 991.98px){
  .implementation-projects .impl-card{
    grid-column: span 12;
  }
}

/* ===========================================================
   FIX — Contact cards: 3 stĺpce na desktope bez deformácie
   =========================================================== */

/* šírka a centrovanie mriežky */
.contact-cards__grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  width: min(1300px, calc(100% - 2rem));
  margin: 0 auto;
}

/* 3 stĺpce (12/4) – a odstránenie pevného max-width */
.contact-card{
  grid-column: span 4;
  max-width: none !important;
  width: 100%;
  /* lepšie zalamovanie textu */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* nech sa obsah karty príjemne roztiahne */
.contact-card__title{ line-height: 1.2; }
.contact-card__text{ line-height: 1.5; }

/* tablet: stále 3 stĺpce do 992px ak chceš, prípadne zmeň na span 6 pre 2 stĺpce */
@media (max-width: 991.98px){
  .contact-card{ grid-column: span 12; }   /* 1 stĺpec na mobile */
}

/* BOXES slider */
.boxes { padding: 56px 0; }
.boxes .boxes-slider { overflow: visible; }
.boxes .swiper-slide { height: auto; }
.boxes .box { height: 100%; }

@media (max-width: 991.98px) {
  .boxes { padding: 40px 0; }
  .boxes .swiper-pagination { margin-top: 16px; position: static; }
}

.boxes .swiper-pagination-bullet-active {
  background-color: #FAB005 !important;
}
@media (max-width: 991.98px) {
  .boxes .swiper-slide .box {
    max-width: none !important;
    width: 100%;
  }
}

/* 
@media (max-width: 991px) {
  .service-action-wrapper {
    display: none !important;
  }
}
*/

/* Naše služby – karty: nech sa do šírky ráta aj border, a centrovať */
.implementation-projects .impl-card {
  box-sizing: border-box;   /* fix proti pretekaniu */
  width: 100%;
  margin: 0 auto;           /* pekne vystredí pri 1 stĺpci */
}

/* Grid si poistíme, že stĺpec sa nesnaží byť širší než kontajner */
@media (max-width: 576px) {
  .implementation-projects .impl-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* (Voliteľné) obrázok nech drží pomer namiesto fixnej výšky */
.implementation-projects .impl-card .impl-card-img {
  height: auto;
  aspect-ratio: 16 / 9;     /* alebo 4/3 podľa potreby */
}

.implementation-projects .impl-cards {
  overflow-x: hidden;
}

/* Notifikácia v kontakte – zarovnanie + max-šírka */
.contact-alert {
  max-width: 720px; /* pekne na stred pod contact-fields */
}

/* Voliteľné – ak chceš menší tieň a jemnosť */
.contact-alert.alert {
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* obal, ktorý drží alert „mimo flow“ */
.contact-fields-wrap {
  position: relative;
  /* stála rezerva, aby alert nič neprekrýval (nech sa vždy zmestí) */
  padding-bottom: 64px; /* môžeš upraviť podľa výšky alertu */
}

/* Jemné doladenie vzhľadu toastu */
#toastArea .toast {
  border-radius: 14px;
}

/* brand farby cez Bootstrap utility (voliteľné) */
#contact-toast.text-bg-success { background-color: #28a745 !important; }
#contact-toast.text-bg-warning { background-color: #ffc107 !important; color:#000 !important; }
#contact-toast.text-bg-danger  { background-color: #dc3545 !important; }
#contact-toast.text-bg-info    { background-color: #0dcaf0 !important; color:#000 !important; }

/* na menších zariadeniach nech má toast trochu priestoru od okraja */
@media (max-width: 576px) {
  #toastArea { padding: .75rem; }
  #toastArea .toast { width: calc(100vw - 3rem); max-width: 480px; }
}
/* Kontakt - karty */
.contact-card {
  text-align: center;   /* centrovanie obsahu */
}

.contact-card__text {
  text-align: center;   /* centrovanie textu */
}

.btn-contact {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  text-decoration: none; /* odstráni podčiarknutie */
}

.btn-contact:hover {
  text-decoration: none; /* aj pri hoveri nech ostane bez podčiarknutia */
}

/* ===== HOWTO: presné zarovnanie .howto-body pod .howto-question (len CSS) ===== */

/* 1) Rodič jednej položky bude grid so „spacer“ stĺpcami */
.howto-item {
  display: grid;
  /* stĺpce: číslo | medzera | ikona | veľká-medzera | otázka | šípka */
  grid-template-columns:
    max-content                 /* 1: číslo */
    var(--hto-gap-number-icon)  /* 2: medzera medzi číslom a ikonou */
    var(--hto-icon-w)           /* 3: ikona */
    var(--hto-gap-icon-question)/* 4: veľká medzera pred otázkou */
    1fr                         /* 5: text otázky */
    max-content;                /* 6: šípka */
  align-items: center;
}

/* 2) Button „rozpustíme“, aby jeho deti sedeli priamo do gridu */
.howto-header {
  display: contents;
}

/* 3) Priradenie prvkov do stĺpcov gridu */
.howto-number   { grid-column: 1; }
.howto-icon     { grid-column: 3; }
.howto-question { grid-column: 5; }
.howto-arrow    { grid-column: 6; justify-self: end; }

/* 4) Telo nech začína v tom istom stĺpci ako otázka (5) */
.howto-body {
  grid-column: 5 / -1;       /* od stĺpca s otázkou až po koniec */
  padding-left: 0 !important;/* prebije pôvodných 323px */
  /* voliteľne trocha vzduchu hore: */
  padding-top: .25rem;
}

/* Mobil – nech je všetko naľavo bez gridu */
@media (max-width: 991px) {
  .howto-item  { display: block; }
  .howto-body  { grid-column: auto; padding-left: 0 !important; }
}

/* === HOWTO – viac priestoru medzi otázkou a textom === */

/* väčší vertikálny padding hlavičky riadku */
.howto-header{
  padding: 1.25rem 0;
}

/* nech je telo zarovnané podľa čísla+ikonky+otázky (už z premennej) */
.howto-body{
  padding-left: var(--hto-indent);   /* namiesto fixných 323px */
}

/* pohodlnejšie čítanie telového textu */
.howto-body p{
  line-height: 1.7;
  margin: .4rem 0 0;                 /* malá medzera nad textom */
}

/* otvorený stav – viac miesta okolo textu a väčší max-height */
.howto-item.open .howto-body{
  padding-top: .75rem;
  padding-bottom: 1.25rem;
  max-height: 600px;
}

/* trošku väčší rozostup medzi riadkami listu */
.howto-item + .howto-item{
  border-top: 1px solid #ddd;
  margin-top: .85rem;
  padding-top: .85rem;
}

/* === HOWTO: šípky na mobile vždy vpravo === */
@media (max-width: 991px) {
  .howto-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* roztiahne obsah */
  }

  .howto-question {
    flex: 1;               /* otázka sa natiahne, šípka pôjde doprava */
    text-align: left;
  }

  .howto-arrow {
    margin-left: auto;     /* šípka úplne doprava */
  }
}

/* === FIX Chrome/Safari rozdiel menu === */
.menu-content {
  min-width: 0;            /* dôležité pre Chrome, aby sa mohol scvrknúť */
  flex: 1 1 auto;
}

.menu-nav {
  flex: 1 1 auto;
  min-width: 0;            /* zabráni pretekaniu v Chrome */
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: nowrap;
}

.menu-contact {
  flex: 0 0 auto;          /* pravý blok nech drží pevnú šírku */
  white-space: nowrap;
}

.phone a {
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .menu-nav .nav-link { font-size: 0.95rem; }
}

@media (max-width: 1140px) {
  .menu-nav .nav-link { font-size: 0.9rem; }
  .menu-nav { gap: clamp(0.5rem, 1vw, 1rem); }
}


/* --- ABOUT US: udrž hlavy v zábere na všetkých šírkach --- */
:root { --aboutus-focal-y: 18%; }  /* 0% = úplný vrch, 50% = stred */

@media (max-width: 1199.98px) { :root { --aboutus-focal-y: 33%; } }
@media (max-width: 767.98px)  { :root { --aboutus-focal-y: 42%; } }



/* MOBILE (pseudo-obrázok v ::after) – posuň výrez hore */
@media (max-width: 991px) {
  .aboutus-title::after {
    background-position: 50% var(--aboutus-focal-y) !important;
    /* voliteľné: trochu vyšší box na menších displejoch */
    height: clamp(430px, 65vw, 420px);
  }
}

/* === MOBILE FLOATING MENU (bez bieleho pásu) === */
@media (max-width: 991px) {
  .menu-wrapper {
    position: fixed;           /* nech „pláva“ pri scrolli */
    top: 12px;                 /* vzdialenosť od vrchu */
    left: 0;
    width: 100%;
    background: transparent !important; /* ŽIADNY biely pás */
    padding: 0 !important;     /* zruší medzeru okolo kontajnera */
    z-index: 3001;             /* nad hero overlayom */
    pointer-events: none;      /* kliky len na kontajneri nižšie */
  }

  .menu-container {
    pointer-events: all;
    background: #fff;          /* biely „pill“ ostáva iba na kontajneri */
    border-radius: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    width: 90%;
    margin: 0 auto;            /* vycentrovanie */
    padding: 0 1rem;
  }
}

/* Mobile: keď je otvorené bočné menu, horný bar zmizne */
@media (max-width: 991px) {
  body.mobile-menu-open .menu-wrapper {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
}

/* Keď je otvorené mobilné menu → horný bar sa skryje a nemá z-index */
@media (max-width: 991px) {
  body.mobile-menu-open .menu-wrapper {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    z-index: 0 !important;   /* pošleme ho pod overlay/panel */
  }
}

/* SERVICES LIST — mobilové usporiadanie až do 991px */
@media (max-width: 991px) {
  .services-list__items {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem;               /* príjemná medzera medzi kartami */
  }
  .services-list__item {
    width: 100%;
    max-width: 90%;          /* pekné vnútorné okraje v kontejnery */
  }
  .services-list__thumb {
    width: 120px;            /* nechá pôvodné proporcie */
    height: 120px;
  }
  .services-list__title {
    text-align: left;        /* zostane čitateľné */
  }
}

@media (max-width: 991px){
  .menu-wrapper{ pointer-events:auto !important; z-index:3001 !important; }
  body.mobile-menu-open .menu-wrapper{
    opacity:0; transform:translateY(-8px);
    pointer-events:none !important; z-index:0 !important;
  }
}

.swiper-button-next, .swiper-button-prev {
  svg {
    width: 25%;
  }
}

.gdpr-content a {
    position: relative;
    color: #FAB005;
    text-decoration: none;
    transition: color 0.3s ease;
}

.gdpr-content a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background-color: #FAB005;
    transition: width 0.3s ease;
}

.gdpr-content a:hover::after {
    width: 100%;
}

.gdpr-content ul {
    font-family: 'Helvetica', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    margin: 1rem 0 1.5rem 1.5rem; /* pekné odsadenie */
    padding: 0;
}

.gdpr-content li {
    margin-bottom: 0.5rem;
}

.gdpr-content li a {
    font-family: 'Helvetica', sans-serif;
    color: #FAB005;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.gdpr-content li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: #FAB005;
    transition: width 0.3s ease;
}

.gdpr-content li a:hover::after {
    width: 100%;
}

.gdpr-divider {
    border: none;
    height: 1px;
    background-color: #E0E0E0; /* jemná sivá linka */
    margin: 2.5rem 0;          /* vzduch okolo */
}


  /* Fancyapps Carousel – vzhľad podľa nášho dizajnu */
#myCarousel {
  --f-arrow-pos: 10px;
  --f-arrow-bg: rgba(255,255,255,0.85);
  --f-arrow-hover-bg: #fff;
  --f-arrow-color: #333;
  --f-arrow-width: 46px;
  --f-arrow-height: 46px;
  --f-arrow-svg-width: 20px;
  --f-arrow-svg-height: 20px;
  --f-arrow-svg-stroke-width: 2px;
  --f-arrow-border-radius: 50%;

  height: 650px;             /* desktop výška */
  border-radius: 20px;
  overflow: hidden;           /* orez rohov */
}

#myCarousel .f-carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;           /* pri pomalom načítaní */
}

#myCarousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* rovnaké ako doteraz */
}

/* thumb strip (Fancybox) – nech netrčí na mobiloch */
.f-thumbs {
  --f-thumb-width: 80px;
  --f-thumb-height: 54px;
}

/* Mobil výška ako predtým */
@media (max-width: 991px) {
  #myCarousel { height: 250px; }
}