#sp-top-bar {background: #fff; height: 50px;}
/*#sp-footer, #sp-bottom {background: #17a13f; color: #fff;}
#sp-top-bar a, #sp-footer a, #sp-bottom a {color: #fff;}*/

#sp-header {
  display: flex;
  align-items: center;
  background: #fff; /*#00a19a;*/
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}
#sp-header.header-sticky {/*top: 30px; */animation: spFadeInDown .5s;}
#sp-header .logo {height: 120px;}

.logo-image {
  border-radius: 50%;
  /*background: #00a19a;*/
  /*padding: 1px;*/
}
.burger-icon > span {background-color: #00a19a;}
.offcanvas-menu {background: #fff; color: #00a19a;}
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li li a {color: #00a19a;}
.offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span {opacity: unset;}


.phModParticlesImageRotateTextOverlay {background: rgba(255, 255, 255, 0.6); box-shadow: 0 8px 30px rgba(0,0,0,0.12);}
.phModParticlesImageRotate, .phModParticlesImageRotateStage {height: unset;}
.phModParticlesImageRotateStack {width: 100%; max-width: unset;}


.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: #00a19a;
  /*font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;*/
  font-size: 16px;
}
/*.sp-megamenu-parent > li.active > a {font-weight: 700;}*/
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {background: #fff;}

#sp-main-body {padding: 30px 0;}
.str-uvod #sp-main-body {padding: 0;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 600;}
.h1, h1 {text-align: center; color: #fdc82f;}

section#sp-breadcrumb {margin-top: 60px;}

.float-left {float: left; margin-right: 2rem; max-width: 600px;}
.str-spolupracuji .article-intro-image.float-left {margin: 0 2.75rem 1rem 0;}
.str-spolupracuji .article-list .article .article-intro-image {border-bottom: unset}

.tags > li a {padding: 5px; border-radius: 3px;}
.blog .article-list .article {background: #f5f5f5;}
.article-list .article .article-header h1 a, .article-list .article .article-header h2 a, .article-list .article .article-header h4 a.str-objevuji .article .article-header h2 {color: #00a19a;}


.str-kontakt a.btn {text-align: center;}

.contact-form {
  max-width: 480px;
  text-align: center;
  margin: 0 auto;
}
.form-horizontal .controls {margin-left: 0px;}
.btn-primary:hover, .sppb-btn-primary:hover,
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
  border-color: #fdc82f;
  background-color: #fdc82f;
  color: #000;
}

.text-justify {
    text-align: justify;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
}
.img-float-left {
  float: left;
  margin: 0 24px 24px 0;
}

/* Obrázek vpravo v textu */
.img-float-right {
  float: right;
  margin: 0 0 24px 24px;
}
img {display: unset;}

/* Výpis featured článků - Novinky */
.mod-uvod-novinky {
  position: relative;
  z-index: 1; /* Zajistí, že pozadí neskryje texty uvnitř modulu */
  padding-top: 40px; /* Volitelné: vytvoří prostor nahoře uvnitř přechodu */
  padding-bottom: 40px; /* Volitelné: vytvoří prostor dole uvnitř přechodu */
}
.mod-uvod-novinky::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(249, 203, 29, 0.5) 0%, rgba(253, 200, 47, 0.08) 100%);
    z-index: -1;
}
.mod-uvod-novinky h2.sp-module-title {margin-bottom: 1.5rem;}
.mod-uvod-novinky h3 {font-size: 1.5rem; text-align: center; font-weight: normal;}
.mod-uvod-novinky h3 a {color: #555; font-weight: 500;}
.mod-uvod-novinky h3 a:hover {color: #00a19a;}
.mod-uvod-novinky .mod-articles-date {font-size: 0.75rem; text-align: center;}
.mod-uvod-novinky p {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: break-word;
    line-height: 1.75;
}
.mod-uvod-novinky .readmore {text-align: center;}

/* Detail článku - text článku */
body.view-article .article-details p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    line-height: 1.8;
}

.mod-uvod-blog-o-zadech {
  position: relative;
  z-index: 1; /* Zajistí, že pozadí neskryje texty uvnitř modulu */
  padding-top: 50px;
  padding-bottom: 30px;
  color: #fff !important;
}
.mod-uvod-blog-o-zadech::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #00a19a; /*linear-gradient(135deg, rgba(0, 161, 154, 0.35) 0%, rgba(0, 161, 154, 0.03) 100%);*/
  z-index: -1;
  pointer-events: none; /* Pozadí nebude blokovat klikání na odkazy a text */
}
.mod-uvod-blog-o-zadech, .mod-uvod-blog-o-zadech .accordion-button {text-align: justify;}

.mod-uvod-blog-o-zadech .accordion {
    --bs-accordion-bg: transparent;
    color: #fff; /* řádek níže definuje barvu šipky dolů v číst více */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }
.mod-uvod-blog-o-zadech .accordion-button:not(.collapsed) {
  color: #fff;
  background-color: unset;
  box-shadow: unset;
}
.mod-uvod-blog-o-zadech .accordion-item {color: #fff;}
.mod-uvod-blog-o-zadech .accordion-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: #fff;
}
.mod-uvod-blog-o-zadech .accordion-button:focus {
  z-index: unset;
  border-color: unset;
  outline: unset;
  box-shadow: unset;
}
.mod-uvod-blog-o-zadech .accordion-button::after {
  flex-shrink: 0;
  width: 100px;
  height: 44px;
  content: "Číst více";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
  border: 1px solid;
  border-radius: 0.375rem;
  background-position: bottom center;
  margin-left: 0 !important;
  margin-top: 2rem;
  color: #fff;
}
.accordion-button:not(.collapsed)::after {display: none;}
.mod-uvod-blog-o-zadech .accordion-button p {text-align: justify; margin-bottom: -1rem; color: #fff;}

.article-details .article-header h1 {text-align: center; margin-bottom: 2.25rem;}

.sp-module.mod-uvodsluzby {padding: 40px 0 60px 0;}
.mod-uvodsluzby::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  /*background: linear-gradient(0deg, rgba(249, 203, 29, 0.5) 0%, rgba(253, 200, 47, 0.08) 100%);*/
  z-index: -1;
}

.sp-module.mod-uvodrecenze {padding: 0px 0 50px 0;}

.sp-module.mod-uvodpribehzad {position: relative; z-index: 1; padding: 30px 0 60px 0; bottom: -1px;}
.sp-module.mod-uvodpribehzad::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: 0px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(0, 161, 154, 0.35) 0%, rgba(0, 161, 154, 0.08) 100%);
  z-index: -1;
}
.mod-uvodpribehzad h2 {color: #00a19a;}

h2.sp-module-title {text-align: center; font-weight: 600;}

.mod-uvodsluzby h2, .mod-o-mne h2 {color: #00a19a; margin-bottom: 1.5rem;}

/* Samotný modul o mně */
.mod-o-mne {
  position: relative;
  z-index: 1; /* Zajistí, že pozadí neskryje texty uvnitř modulu */
  padding-top: 50px; /* Volitelné: vytvoří prostor nahoře uvnitř přechodu */
  padding-bottom: 40px; /* Volitelné: vytvoří prostor dole uvnitř přechodu */
}

/* Přechodové pozadí, které se roztáhne přes celou šířku obrazovky */
.mod-o-mne::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: linear-gradient(135deg, rgba(135, 136, 138, 0.35) 0%, rgba(135, 136, 138, 0.03) 100%);
  z-index: -1;
  pointer-events: none; /* Pozadí nebude blokovat klikání na odkazy a text */
}


/* ==========================================================================
   1. MŘÍŽKA A JEDNOTNÁ VELIKOST (4 VEDLE SEBE, IDENTICKÁ VÝŠKA, KRAJE LÍCUJÍ)
   ========================================================================== */

/* Hlavní řada - flexbox se záporným marginem pro lícování okrajů v Bootstrapu */
.boxypp .phModParticlesImageRow {
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Všechny 4 sloupce mají naprosto stejnou šířku */
.boxypp .phModParticlesImageRow .phModParticlesItem {
    width: 25% !important;
    padding: 0 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Hlavní vnitřní box - uzamčení poměru stran a zamezení posunů */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox {
    position: relative !important;
    overflow: hidden !important; /* Ořízne zoomující obrázek */
    cursor: pointer !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important; /* Elegantní obdélník */
    
    /* Zámek rozměrů proti rozbití Bootstrap mřížky */
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   2. VNÍTŘNÍ ELEMENTY (ZÁKLADNÍ TMÁVÁ CLONA + BÍLÝ TEXT NA STŘEDU)
   ========================================================================== */

/* První div (Obrázek) */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(1) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.5s ease-in-out !important;
    z-index: 1 !important;
}

.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(1) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- TMAVÁ CLONA V ZÁKLADU: Nastaveno na 45% černou pro vysokou čitelnost textu --- */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(1)::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important; 
    transition: background 0.4s ease-in-out !important; /* Plynulé zesvětlení */
    z-index: 2 !important;
}

/* Druhý div (Obal textu) */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* Odkaz tvořící celou plochu boxu - ABSOLUTNÍ STŘEDĚNÍ NA KŘÍŽ */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) a {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    width: 90% !important;
    height: auto !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}

/* Odstranění Bootstrap ikon/šipek */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) a::before,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) a::after {
    content: none !important;
    display: none !important;
}

/* VÝCHOZÍ BÍLÝ TEXT (Vynulování odskoků z Bootstrapu) */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) a,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) a *,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) h2,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) h3,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) p,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox > div:nth-child(2) span {
    color: #ffffff !important; /* Původně bílé písmo */
    font-size: 1.25rem;
    font-weight: 700 !important; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important; /* Stín pod bílým písmem */
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    width: 100% !important;
    transition: color 0.4s ease-in-out !important; /* Plynulá změna barvy */
}

/* ==========================================================================
   3. HOVER EFEKTY (ZESVĚTLENÍ CLONY + ZELENÝ TEXT PŘI NAJETÍ NA BOX)
   ========================================================================== */

/* Zoom obrázku uvnitř boxu */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(1) {
    transform: scale(1.08) !important;
}

/* --- HOVER CLONY: Zesvětlí se z 45% na pouhých 20%, obrázek krásně vynikne --- */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(1)::after {
    background: rgba(0, 0, 0, 0.20) !important;
}

/* --- HOVER TEXTU: Změna barvy na firemní ZELENOU při najetí na box --- */
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) a,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) a *,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) h2,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) h3,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) p,
.boxypp .phModParticlesImageRow .phModParticlesItem .phModParticlesItemInnerBox:hover > div:nth-child(2) span {
    color: #fdc82f !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important; /* Silnější tmavý stín pro perfektní čitelnost zelené na světlém pozadí */
}

.gbr__place {color: #fdc82f; font-size: 2rem;}

#sp-footer p {margin-bottom: 0;}
#sp-footer #sp-footer1 {text-align: left; display: flex; align-items: center; justify-content: start;}
#sp-footer #sp-footer2 {text-align: center; display: flex; align-items: center; justify-content: center;}
#sp-footer #sp-footer3 {text-align: right; display: flex; align-items: center; justify-content: end;}
#sp-footer .container-inner {padding: 15px 0; border-top: unset;}
#sp-footer img.logo-image-bottom {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);}

/* Featured - home */
.article-list .article .featured-article-badge, .article-details .featured-article-badge { display: none; visibility: hidden;}




/* ==========================================================================
   4. RESPONZIVITA (MOBILY A TABLETY)
   ========================================================================== */

/* MOBILY: 1 sloupec pod sebou */

@media (max-width: 575px) {
.mod-o-mne h2 {text-align: center;}
#sp-footer #sp-footer1, #sp-footer #sp-footer2, #sp-footer #sp-footer3 {display: flex; justify-content: center; text-align: center;}
#sp-footer #sp-footer2 {margin: 8px 0;}
}

@media (max-width: 767.98px) {
  .boxypp .phModParticlesImageRow { margin-left: 0 !important; margin-right: 0 !important; }
  .boxypp .phModParticlesImageRow .phModParticlesItem { width: 100% !important; padding: 0 !important; margin-bottom: 20px !important; }
  .boxypp .phModParticlesImageRow .phModParticlesItem:last-child { margin-bottom: 0 !important; }
  .str-spolupracuji .article-intro-image.float-left,
  .float-left,
  .float-right
  .img-float-left,
  .img-float-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 auto 16px auto;
    text-align: center;
  }
}

/* TABLETY: 2 sloupce vedle sebe (2 a 2 pod sebou) */
@media (min-width: 768px) and (max-width: 1023px) {
    .boxypp .phModParticlesImageRow .phModParticlesItem { width: 50% !important; padding: 15px !important; }
}