/**
* Template Name: Colordot
* Template URL: https://colordot.cz/
* Updated: 1.9.2025
* Author: Fresh Mill studio, tvorba webovych stranek
* License: https://freshmill.cz
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');


/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: #001f38;
  background-color: #fff;
  font-family: 'Exo', sans-serif;
}

a {
  color: #89ae1a;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #24a3df;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #001f38;
  font-family: 'Exo', sans-serif;s
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  background-color: #001f38;
  padding-top: 20px;
  padding-bottom: 20px;
}
.header .logo img {
  width: auto;
  height: 50px;
  object-fit: contain;
}
.hlavickawebu {
  display: flex;
  justify-content: space-between;
}

.header .socialicons{
  display:flex;
  gap:12px;
  align-items:center;
}
.header .socialicons .si{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  background: #a4c400;       
  border:1px solid #a4c400;
  text-decoration:none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.header .socialicons .si i{ font-size:18px; line-height:1; }
.header .socialicons .si:hover{ transform: translateY(-2px); border-color: transparent; }
.header .socialicons .si--tt:hover{ background:#000; }
.header .socialicons .si--ig:hover{
  background: radial-gradient(30% 30% at 30% 30%, #feda77, transparent 60%),
              radial-gradient(45% 45% at 70% 20%, #e1306c, transparent 60%),
              radial-gradient(60% 60% at 90% 80%, #405de6, transparent 60%),
              #c13584;
}
.header .socialicons .si--fb:hover{ background:#1877f2; }

@media (max-width: 576px){
  .header .socialicons .si{ width:36px; height:36px; }
  .header .socialicons .si i{ font-size:16px; }
}
.header .config img {
  width: 40px;
  height: 40px;
}
@media only screen and (max-width: 768px) {
  .header .logo img {
    height: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .config {
    display: none;
  }
  .header .socialicons {
    display: none;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }
  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }
  .navmenu li {
    position: relative;
  }
  .navmenu a,
  .navmenu a:focus {
    color: #fff;
    padding: 18px 15px;
    font-size: 15px;
    font-family: 'Exo', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }
  .navmenu li:last-child a {
    padding-right: 0;
  }
  .navmenu li:hover a,
  .navmenu .active,
  .navmenu .active:focus {
    color: #97bf0d;
  }
  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: #fff;
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
  .navmenu .dropdown ul li {
    min-width: 200px;
  }
  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: #001f38;
  }
  .navmenu .dropdown ul a i {
    font-size: 12px;
  }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: #97bf0d;
  }
  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }
  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
  .navmenu .megamenu {
    position: static;
  }
  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }
  .navmenu .megamenu ul li {
    flex: 1;
  }
  .navmenu .megamenu ul li a,
  .navmenu .megamenu ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: #001f38;
  }
  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: #001f38;
  }
  .navmenu .megamenu:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
  .navmenu .dd-box-shadow {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: #fff;
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .navmenu {
    padding: 0;
    z-index: 9997;
  }
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
  .navmenu a,
  .navmenu a:focus {
    color: #97bf0d;
    padding: 10px 20px;
    font-family: 'Exo', sans-serif;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }
  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }
  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }
  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }
  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
  .mobile-nav-active {
    overflow: hidden;
  }
  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }
  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }
  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* DROPDOWN */
.navmenu .dropdown > a {
  position: relative;
  padding-right: 18px; 
}
.navmenu .dropdown > a::after {
  font-family: "bootstrap-icons";
  content: "\f282"; 
  font-size: 0.9em;
  margin-left: 6px;
  display: inline-block;
}
.navmenu .menu-item-has-children:hover > a::after,
.navmenu .menu-item-has-children:focus-within > a::after,
.navmenu .menu-item-has-children.active > a::after {
  transform: rotate(180deg); 
}
.navmenu .dropdown ul {
  position: absolute;  
  top: 100%;         
  left: 0;
  background: #fff;    
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  z-index: 1000;
}
.navmenu .dropdown ul::before {
  content: "";
  position: absolute;
  top: -8px;       
  left: 20px;    
  width: 16px;
  height: 16px;
  background: #fff; 
  transform: rotate(45deg);
  box-shadow: -2px -2px 5px rgba(0,0,0,0.05); 
}

/*--------------------------------------------------------------
# PRAVE MENU S KONTAKTY
--------------------------------------------------------------*/
.contact-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:transparent; color:#c7ff3d;
  cursor:pointer; transition:transform .2s ease, background .2s ease; font-size:18px;
}
.contact-toggle:hover{ background:rgba(199,255,61,.08); transform:scale(1.05); }

.contact-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.48); backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1040;
}
.contact-overlay.is-open{ opacity:1; pointer-events:auto; }

.contact-panel{
  position:fixed; top:0; right:0; height:100dvh; width:min(380px, 92vw);
  background:#111; color:#e7efe9; box-shadow:-6px 0 28px rgba(0,0,0,.35);
  transform:translateX(102%); transition:transform .28s ease; z-index:1050;
  display:flex; flex-direction:column;
}
.contact-panel.is-open{ transform:translateX(0); }
.contact-panel__inner{ padding:28px 24px 40px; overflow:auto; }
.contact-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:#9fe870; cursor:pointer;
}
.contact-block{ text-align:left; padding:18px 0; }
.contact-block h3{ margin:10px 0 6px; font-size:22px; color:#c7ff3d; }
.contact-block p{ margin:0; color:#cfd7dd; }
.contact-block a{ color:#cfd7dd; text-decoration:none; border-bottom:1px dashed rgba(199,255,61,.35); }
.contact-block a:hover{ color:#ffffff; border-bottom-color:transparent; }
.contact-icon{
  width:52px; height:52px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #2b2b2b; color:#c7ff3d; font-size:22px; margin-bottom:6px;
}

.contact-panel hr{ border:0; border-top:1px solid #232323; margin:18px 0; }

.contact-socials{ display:flex; gap:12px; margin-top:8px; }
.cs{
  width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-size:18px; transition:transform .18s ease, opacity .18s ease;
}
.cs:hover{ transform:translateY(-1px); opacity:.9; }
.cs--fb{ background:#1877f2; }
.cs--ig{ background:#2ecc71; } /* zelená, jak jsi chtěl */
.cs--tt{ background:#0a2340; }
body.contact-panel-open{ overflow:hidden; } /* zamkne scroll pod panelem */

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: #001f38;
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}
.scroll-top:hover {
  background-color: #97bf0d;
  color: #001f38;
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# ELEMENTS
--------------------------------------------------------------*/
/* NADPIS DARK */
.nadpis h2 {
  font-size: 42px;
  font-weight: 800;
  color: #001f38;
  padding-bottom: 15px;
}
.nadpis h2 span {
  color: #97bf0d;
}
.nadpis i {
  padding-left: 15px;
  color: #97bf0d;
  font-size: 30px;
}

/* NADPIS WHITE */
.nadpiswhite h2 {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  padding-bottom: 15px;
}
.nadpiswhite h2 span {
  color: #97bf0d;
}
.nadpiswhite i {
  padding-left: 15px;
  color: #97bf0d;
  font-size: 30px;
}
.nadpiswhite p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  line-height: 1.5;  
}
.nadpiswhite p strong {
  color: #97bf0d;
  font-weight: 800;
}
.nadpiswhite a {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
/* =======================
   NADPISY – RESPONZIVITA
   ======================= */

/* <= 1199 px – jemné zmenšení */
@media (max-width: 1199px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 38px;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 28px;
    padding-left: 12px;
  }
}

/* <= 991 px – notebooky / tablet landscape */
@media (max-width: 991px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 34px;
  }

  .nadpiswhite p {
    font-size: 15px;
  }
}

/* <= 768 px – tablety */
@media (max-width: 768px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 30px;
    text-align: center;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 26px;
    padding-left: 10px;
  }

  .nadpiswhite p {
    text-align: center;
    font-size: 14.5px;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 26px;
    padding-bottom: 12px;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 22px;
    padding-left: 8px;
  }

  .nadpiswhite p {
    font-size: 14px;
  }
}

/* <= 425 px – malé telefony */
@media (max-width: 425px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 23px;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 20px;
  }

  .nadpiswhite p {
    font-size: 13px;
  }
}

/* <= 375 px */
@media (max-width: 375px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 21px;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 18px;
  }
}

/* <= 320 px – nejmenší breakpoint */
@media (max-width: 320px) {
  .nadpis h2,
  .nadpiswhite h2 {
    font-size: 19px;
  }

  .nadpiswhite p {
    font-size: 12px;
  }

  .nadpis i,
  .nadpiswhite i {
    font-size: 17px;
  }
}


/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/
.ctatop {
  padding-top: 25px;
}

/* BTN GREEN */
button.btn-green {
  font-family: 'Exo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #97bf0d;
  padding: 10px 30px;
  border: none;
  border-radius: 20px 0 20px 0;
  transition: background-color .4s, transform .3s, box-shadow .3s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
button.btn-green:hover {
  background-color: #47b2e4;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
button.btn-green i {
  transition: transform .3s ease;
}
button.btn-green:hover i {
  transform: translateX(5px);
}

/* BTN WHITE */
button.btn-white {
  font-family: 'Exo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #97bf0d;
  background-color: #fff;
  padding: 10px 30px;
  border: none;
  border-radius: 20px 0 20px 0;
  transition: background-color .4s, transform .3s, box-shadow .3s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
button.btn-white:hover {
  background-color: #97bf0d;
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
button.btn-white i {
  transition: transform .3s ease;
}
button.btn-white:hover i {
  transform: translateX(5px);
}

/* BTN BLUE */
button.btn-blue {
  font-family: 'Exo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #24a3df;
  padding: 10px 30px;
  border: none;
  border-radius: 20px 0 20px 0;
  transition: background-color .4s, transform .3s, box-shadow .3s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
button.btn-blue:hover {
  background-color: #97bf0d;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
button.btn-blue i {
  transition: transform .3s ease;
}
button.btn-blue:hover i {
  transform: translateX(5px);
}
/* =======================
   BUTTONS – RESPONZIVITA
   ======================= */

/* <= 1199 px */
@media (max-width: 1199px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 18px;
    padding: 10px 26px;
    border-radius: 18px 0 18px 0;
  }
}

/* <= 991 px */
@media (max-width: 991px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 17px;
    padding: 10px 24px;
    border-radius: 16px 0 16px 0;
  }
}

/* <= 768 px (tablety) */
@media (max-width: 768px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 16px;
    padding: 9px 22px;
    gap: 6px;
  }

  button.btn-green i,
  button.btn-white i,
  button.btn-blue i {
    font-size: 16px;
  }
}

/* <= 575 px (mobily) */
@media (max-width: 575px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
   width: 100%;
    justify-content: center;
    font-size: 16px;
    border-radius: 16px 0 16px 0;
  }
}

/* <= 425 px (menší mobily) */
@media (max-width: 425px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 15px;
    padding: 9px 10px;
    border-radius: 14px 0 14px 0;
  }
}

/* <= 375 px (extra malé telefony) */
@media (max-width: 375px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 14px;
    padding: 8px 9px;
    gap: 5px;
  }
}

/* <= 320 px (nejmenší displeje) */
@media (max-width: 320px) {
  button.btn-green,
  button.btn-white,
  button.btn-blue {
    font-size: 13px;
    padding: 7px 9px;
    border-radius: 12px 0 12px 0;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  scroll-margin-top: 88px;
  overflow: clip;
}

@media (max-width: 1199px) {
  section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# UVOD
--------------------------------------------------------------*/
/* BANNER */
section.banner-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 150px;
}
.banner .left-side {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.banner .left-side h1 {
  font-size: 42px;
  font-weight: 800;
  color: #001f38;
  padding-bottom: 20px;
}
.banner .left-side h1 span {
  color: #97bf0d;
}
.banner .left-side p {
  font-size: 17px;
  font-weight: 500;
  color: #001f38;
  line-height: 1.5;
}
.banner .left-side p strong {
  color: #97bf0d;
  font-weight: 800;
}
.banner .left-side p a {
  color: #97bf0d;
}
.banner .right-side {
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .right-side img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* =======================
   BANNER – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zmenšení */
@media (max-width: 1199px) {
  section.banner-bg {
    padding-top: 130px;
  }

  .banner .left-side h1 {
    font-size: 38px;
  }
}

/* <= 991 px – notebook / tablet na šířku */
@media (max-width: 991px) {
  section.banner-bg {
    padding-top: 110px;
  }

  .banner .left-side {
    align-items: flex-start;
  }

  .banner .left-side h1 {
    font-size: 34px;
    padding-bottom: 18px;
  }

  .banner .left-side p {
    font-size: 16px;
  }

  .banner .right-side img {
    max-width: 90%;
  }
}

/* <= 768 px – tablety, začíná to být víc mobile-like */
@media (max-width: 768px) {
  section.banner-bg {
    padding-top: 130px;
  }

  .banner .left-side {
    justify-content: center;
    text-align: center;
  }

  .banner .left-side h1 {
    font-size: 30px;
  }

  .banner .left-side p {
    font-size: 15px;
  }

  .banner .right-side {
    margin-top: 24px;
  }

  .banner .right-side img {
    max-width: 80%;
  }

  .ctatop {
    padding-top: 20px;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  section.banner-bg {
    padding-top: 115px;
  }

  .banner .left-side h1 {
    font-size: 26px;
    padding-bottom: 16px;
  }

  .banner .left-side p {
    font-size: 14px;
  }

  .banner .right-side img {
    max-width: 82%;
  }

  .ctatop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
  }

  .ctatop a {
    width: 100%;
    display: block;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  section.banner-bg {
    padding-top: 100px;
  }

  .banner .left-side h1 {
    font-size: 24px;
  }

  .banner .right-side img {
    max-width: 88%;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .banner .left-side h1 {
    font-size: 22px;
  }

  .banner .left-side p {
    font-size: 13px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  section.banner-bg {
    padding-top: 100px;
  }

  .banner .left-side h1 {
    font-size: 20px;
  }
}

/* KLIENTI */
section.logos-bg {
  background-color: #97bf0d;
}

.logo-slider {
  overflow: hidden;
  position: relative;
}

/* ✅ Přidáno: animace + proměnná pro vzdálenost (počítá JS) */
.logo-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  will-change: transform;

  animation: logoMarquee 35s linear infinite;
  transform: translateX(0);
}

/* ✅ Přidáno: pauza po najetí */
.logo-slider:hover .logo-track {
  animation-play-state: paused;
}

/* ✅ Přidáno: animace přesně o "1 sadu" log (distance nastaví JS) */
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

/* ✅ Přidáno: respektuj reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none !important;
    transform: translateX(0) !important;
  }
}

/* Položky / loga */
.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;     
  height: 64px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo-item img {
  max-height: 100%;
  max-width: 160px;
  height: auto;
  width: auto;
  object-fit: contain;
}
.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

/* =======================
   KLIENTI – RESPONZIVITA
   ======================= */

/* <= 1199 px – trochu menší mezery */
@media (max-width: 1199px) {
  .logo-track {
    gap: 40px;
  }

  .logo-item {
    min-width: 130px;
    height: 60px;
  }
}

/* <= 991 px – tablet / menší notebooky */
@media (max-width: 991px) {
  section.logos-bg {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .logo-track {
    gap: 32px;
  }

  .logo-item {
    min-width: 120px;
    height: 56px;
  }
}

/* <= 768 px – tablety */
@media (max-width: 768px) {
  .logo-track {
    gap: 28px;
  }

  .logo-item {
    min-width: 110px;
    height: 52px;
  }

  .logo-item img {
    max-width: 140px;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  section.logos-bg {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .logo-track {
    gap: 24px;
  }

  .logo-item {
    min-width: 100px;
    height: 48px;
  }

  /* pokud máš nad sliderem nějaký .section-title */
  .section-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 16px;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .logo-track {
    gap: 20px;
  }

  .logo-item {
    min-width: 90px;
    height: 44px;
  }

  .logo-item img {
    max-width: 120px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .logo-item {
    min-width: 80px;
    height: 40px;
  }

  .logo-item img {
    max-width: 110px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .logo-track {
    gap: 16px;
  }

  .logo-item {
    min-width: 72px;
    height: 36px;
  }

  .logo-item img {
    max-width: 100px;
  }
}

/*--------------------------------------------------------------
# DLAZDICE
--------------------------------------------------------------*/
/* DLAZDICE */
section.dlazdice-bg {
  background-color: #001f38;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 110px;
  padding-bottom: 110px;
}

.dlazdice .tile {
  position: relative;
  display: block;
  color: var(--tile-text);
  text-decoration: none;
  overflow: hidden;
  border-radius: 26px;
  background: #0a6fb2;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
  transition: transform .35s ease, box-shadow .35s ease;
  -webkit-clip-path: url(#pocket-clip);
  clip-path: url(#pocket-clip);
}

.dlazdice .tile__media {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #0098d8;
  z-index: 0;
}

.dlazdice .tile::after {
  content: "";
  position: absolute;
  inset: 35% 0 0 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.dlazdice .tile__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 12px 22px;
  transform: translateY(28%);
  transition: transform .4s ease;
  background: none;
  overflow: visible;
}

.dlazdice .tile h3 {
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 30px 0;
  line-height: 1.2;
  transition: transform .35s ease;
}

.dlazdice .tile h3 span {
  color: #97bf0d;
}

.dlazdice .tile p {
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .35s ease;
  display: none;
}

.dlazdice .tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.dlazdice .tile:hover .tile__media img {
  transform: scale(1.08);
}

.dlazdice .tile:hover .tile__content {
  transform: translateY(0);
}

.dlazdice .tile:hover h3 {
  transform: translateY(-5px);
}

.dlazdice .tile:hover .tile__content p {
  opacity: 1;
  transform: translateY(-10px);
  display: block;
}

.dlazdice .tile:hover .tile__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px 25px 50px 25px !important;
  transform: translateY(22%);
  transition: transform .4s ease;
  background: none;
  overflow: visible;
}

/* GREEN */
.dlazdice .tile--green .tile__media {
  background-color: #97bf0d;
}

/* DARK BLUE */
.dlazdice .tile--darkblue .tile__media {
  background-color: #003e70;
}

.dlazdice .tile__media img {
  width: 100%;
  height: 87%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform .5s ease;
  overflow: visible;
}

.dlazdice .tile {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: visible;
  border-radius: 26px;
  background: transparent;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
  transition: transform .35s ease, box-shadow .35s ease;
  -webkit-clip-path: none;
  clip-path: none;
}

.dlazdice .tile__media {
  position: relative; /* bylo: absolute */
  top: -30px;         /* „vykouknutí“ ven nad kapsu */
  height: 360px;
  background: #0098d8;
  z-index: 1;
  border-radius: 26px;
}

/* ZÁKLADNÍ KAPSA – BLUE */
.dlazdice .tile__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/wp-content/uploads/2025/12/kapsa.svg') center bottom / cover no-repeat;
}

/* GREEN varianta */
.dlazdice .tile--green .tile__content::before {
  background-image: url('/wp-content/uploads/2025/12/kapsa-green.svg');
}

/* DARK BLUE varianta */
.dlazdice .tile--darkblue .tile__content::before {
  background-image: url('/wp-content/uploads/2025/12/kapsa-blue.svg');
}

.dlazdice .tile--green .tile__media {
  position: relative; /* bylo: absolute */
  top: -30px;         /* „vykouknutí“ ven nad kapsu */
  height: 360px;
  background: #97bf0d;
  z-index: 1;
  border-radius: 26px;
}

.dlazdice .tile--darkblue .tile__media {
  position: relative; /* bylo: absolute */
  top: -30px;         /* „vykouknutí“ ven nad kapsu */
  height: 360px;
  background: #003e70;
  z-index: 1;
  border-radius: 26px;
}

.tile::after {
  content: "";
  position: absolute;
  inset: -120%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .25) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-100%) rotate(15deg);
  opacity: 0;
  pointer-events: none;
}

.dlazdice .tile {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .2s ease, box-shadow .25s ease;
  perspective: 1000px; /* pro iOS */
}
.dlazdice .tile__text {
  position: relative;
  z-index: 2;
  padding: 18px 20px 24px;
}

.dlazdice .tile__text.tile--blue::before {
  content: "";
  position: absolute;
  inset: -20px -25px -20px -25px;
  background: linear-gradient(
    180deg,
    rgb(0 152 217 / 80%),
    rgb(0 152 217 / 80%)
  );
  border-radius: 0 0 30px 30px;
  opacity: 0;
  transform: translateY(20px); /* kopíruje výchozí posun textu */
  transition: opacity .35s ease, transform .35s cubic-bezier(0, -0.33, 0.25, 1);
  z-index: -1;
}
.dlazdice .tile__text.tile--green::before {
  content: "";
  position: absolute;
  inset: -20px -25px -20px -25px;
  background: linear-gradient(
    180deg,
    rgb(150 190 18 / 80%),
    rgb(150 190 18 / 80%)
  );
  border-radius: 0 0 30px 30px;
  opacity: 0;
  transform: translateY(20px); /* kopíruje výchozí posun textu */
  transition: opacity .35s ease, transform .35s cubic-bezier(0, -0.33, 0.25, 1);
  z-index: -1;
}
.dlazdice .tile__text.tile--darkblue::before {
  content: "";
  position: absolute;
  inset: -20px -25px -20px -25px;
  background: linear-gradient(
    180deg,
    rgb(1 63 113 / 80%),
    rgb(1 63 113 / 80%)
  );
  border-radius: 0 0 30px 30px;
  opacity: 0;
  transform: translateY(20px); /* kopíruje výchozí posun textu */
  transition: opacity .35s ease, transform .35s cubic-bezier(0, -0.33, 0.25, 1);
  z-index: -1;
}
.dlazdice .tile:hover .tile__text::before {
  opacity: 1;
  transform: translateY(-50px); /* stejné jako posun h3 a p */
}

/* Aktivace overlay při hoveru */
.dlazdice .tile:hover .tile__text::before {
  opacity: 1;
  transform: translateY(-50px); /* stejné jako posun h3 a p */
}

/*--------------------------------------------------------------
# DLAZDICE RESPONZIVITA
--------------------------------------------------------------*/
@media (max-width: 1400px) {
  .dlazdice .tile__media {
    height: 340px;
    top: -26px;
  }
  .dlazdice .tile__content {
    margin-top: -64px;
    padding: 18px 20px 24px;
  }
}
@media (max-width: 1199px) {
  section.dlazdice-bg {
    padding: 70px 0 90px;
  }
  .dlazdice .tile__media {
    height: 320px;
    top: -24px;
  }
  .dlazdice .tile__content {
    margin-top: -60px;
  }
  .dlazdice .tile h3 {
    font-size: 20px;
  }
  .dlazdice .tile p {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  section.dlazdice-bg {
    padding: 60px 0 80px;
  }
  .dlazdice .tile__media {
    height: 280px;
    top: -22px;
  }
  .dlazdice .tile__content {
    margin-top: -52px;
    padding: 16px 18px 22px;
  }
  .dlazdice .tile h3 {
    font-size: 19px;
  }
  .dlazdice .tile p {
    font-size: 15px;
  }
  .dlazdice .tile__media img {
    height: 250px;
  }
}
@media (max-width: 767px) {
  section.dlazdice-bg {
    padding: 50px 0 70px;
  }

  .dlazdice .tile {
    max-width: 420px;
    margin: 0 auto;
  }

  .dlazdice .tile__media {
    height: 240px;
    top: -18px;
    border-radius: 22px;
  }

  .dlazdice .tile__content {
    margin-top: -44px;
    padding: 14px 16px 20px;
  }

  .dlazdice .tile h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .dlazdice .tile p {
    font-size: 14.5px;
  }
    .dlazdice .col-md-6 {
    margin-bottom: 150px;
  }
  .dlazdice .tile .tile__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 22px 25px 50px 25px !important;
    transform: translateY(35%);
    transition: transform .4s ease;
    background: none;
    overflow: visible;
  }
}
@media (max-width: 575px) {
  .dlazdice .tile {
    max-width: 100%;
  }
  .dlazdice .tile__media {
    height: 220px;
    top: -16px;
  }
  .dlazdice .tile__content {
    margin-top: -40px;
    padding: 12px 14px 18px;
  }
  .dlazdice .tile h3 {
    font-size: 17px;
  }

  .dlazdice .tile p {
    font-size: 14px;
  }
}
@media (max-width: 400px) {
  section.dlazdice-bg {
    padding: 45px 0 60px;
  }
  .dlazdice .tile__media {
    height: 200px;
    top: -14px;
  }
  .dlazdice .tile__content {
    margin-top: -34px;
  }
  .dlazdice .tile h3 {
    font-size: 16px;
  }
  .dlazdice .tile p {
    font-size: 13.5px;
  }
}



/* LINKA COLORDOT */
.linka-ornament{
  width:100%;
  height:8px;                         
  background-image:url('/wp-content/uploads/2025/12/colordot-linka.png');
  background-repeat:repeat-x;         
  background-position:center;          
  background-size:auto 100%;           
}

/* NASE REALIZACE */
section.realizace-bg {
  background-color: #fff;
}
.realizacebox .thumb img {
  width: 100%;
  height: 270px;
  object-fit: contain;
  margin-bottom: 15px;
}
.realizacebox .desc h3 {
  font-size: 24px;
  font-weight: 700;
  color: #001f38;
  margin-bottom: 0;
  padding-bottom: 20px;
}
.realizacebox .desc p {
  font-size: 17px;
  font-weight: 500;
  color: #001f38;
  line-height: 1.5;  
}
.realizace .swiper-pagination-bullet {
  width: 10px; height: 10px; border-radius: 8px;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  background: #a4c400;
  opacity: 1;
}
.realizace .swiper-pagination-bullet-active {
  background: #001f38;
  transform: none; box-shadow: none;
}
.realizace .realizace-swiper { 
  position: relative; 
  overflow: visible;               /* Swiper default je hidden – zrušíme */
}
.realizace .realizace-swiper .swiper-pagination {
  position: absolute; 
  left: 0; right: 0; bottom: -24px;/* posun dolů pod slider (změň dle potřeby) */
}
/* =======================
   NASE REALIZACE – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zmenšení */
@media (max-width: 1199px) {
  .realizacebox .thumb img {
    height: 250px;
  }

  .realizacebox .desc h3 {
    font-size: 22px;
  }

  .realizacebox .desc p {
    font-size: 16px;
  }
}

/* <= 991 px – notebooky / tablety na šířku */
@media (max-width: 991px) {
  .realizacebox .thumb img {
    height: 230px;
  }

  .realizacebox .desc h3 {
    font-size: 21px;
    padding-bottom: 16px;
  }

  .realizacebox .desc p {
    font-size: 15px;
  }

  .realizace .realizace-swiper .swiper-pagination {
    bottom: -20px;
  }
}

/* <= 768 px – tablety */
@media (max-width: 768px) {
  .realizacebox .thumb img {
    height: 210px;
    margin-bottom: 12px;
  }

  .realizacebox .desc h3 {
    font-size: 20px;
    text-align: center;
  }

  .realizacebox .desc p {
    font-size: 15px;
    text-align: center;
  }

  .realizace .realizace-swiper .swiper-pagination {
    bottom: -18px;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .realizacebox .thumb img {
    height: 190px;
  }

  .realizacebox .desc h3 {
    font-size: 19px;
  }

  .realizacebox .desc p {
    font-size: 14px;
  }

  .realizace .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
  }

  .realizace .realizace-swiper .swiper-pagination {
    bottom: -16px;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .realizacebox .thumb img {
    height: 170px;
  }

  .realizacebox .desc h3 {
    font-size: 18px;
  }

  .realizacebox .desc p {
    font-size: 13px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .realizacebox .thumb img {
    height: 155px;
  }

  .realizacebox .desc h3 {
    font-size: 17px;
  }

  .realizacebox .desc p {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .realizacebox .thumb img {
    height: 140px;
  }

  .realizacebox .desc h3 {
    font-size: 16px;
  }

  .realizacebox .desc p {
    font-size: 12px;
  }

  .realizace .realizace-swiper .swiper-pagination {
    bottom: -14px;
  }
}


/*--------------------------------------------------------------
# KREATIVNÍ PROCES
--------------------------------------------------------------*/
.kreativniproces {
  padding-bottom: 50px;
}
.kreatpostup {
  padding: 0 200px;
}

/* pokud už máš tyto proměnné v :root jinde, klidně vynech */
:root{
  --cd-bg:#0b233f;        
  --cd-head:#b7ff00;      
  --cd-text:#e6edf6;      
  --cd-line:rgba(255,255,255,.15);
  --cd-dot:#99ff00;       
}

.cd-process {
  background: var(--cd-bg);
  color: var(--cd-text);
  font-family: "Poppins", sans-serif;
  position: relative;
}

.cd-wrap {
  width: min(1400px, 92vw);
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}

.cd-center {
  position: relative;
  z-index: 2;
}

/* Seznam kroků – desktop */
.cd-steps {
  --gap: 120px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.cd-step {
  position: relative;
  padding: 0 60px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
/* střídání zarovnání uvnitř středu – desktop */
.cd-step:nth-child(odd)  { text-align: left;  }
.cd-step:nth-child(even) { text-align: right; }

.cd-step h3{
  color: var(--cd-head);
  font-weight:700;
  font-size: 24px;
  margin-bottom:10px;
}
.cd-step p{
  color: #fff;
  font-size: 16px;
}

/* spojovací linka mezi kroky – DESKTOP (středová) */
.cd-step::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
  width:2px;
  height:calc(var(--gap) - 24px);
  background:var(--cd-line);
  z-index:0;
}
.cd-step:last-child::after{ 
  display:none; 
}

/* Obrázky po stranách – desktop */
.cd-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
.cd-art {
  position: absolute;
  display: flex;
  justify-content: center;
}
.cd-art img {
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.4));
}
.cd-art--1 {top: -25px;left: 0;justify-content: flex-start;}
.cd-art--2 {top: 130px;right: 0;justify-content: flex-end;}
.cd-art--3 {top: 410px;left: 0;justify-content: flex-start;}
.cd-art--4 {top: 700px;right: 0;justify-content: flex-end;}

/*--------------------------------------------------------------
# KREATIVNÍ PROCES – RESPONZIVITA
--------------------------------------------------------------*/

/* TABLET / MENŠÍ NOTEBOOKY */
@media (max-width: 1199px) {
  .kreatpostup {
    padding: 0 120px;
  }
}
@media (max-width: 991px) {
  .kreatpostup {
    padding: 0 40px;
  }
}

/* MOBIL – NOVÝ LAYOUT */
@media (max-width: 767px){

  /* celá sekce trochu víc nadechnout */
  .kreativniproces {
    padding-bottom: 30px;
  }
  .kreatpostup {
    padding: 0 16px;
  }

  .cd-wrap {
    width: 100%;
    display: block;
  }

  /* Obrázky nejsou už „nalepené“ na střed,
     ale zobrazí se nad timeline jako ilustrační ikonky */
  .cd-side {
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    pointer-events: auto;
  }
  .cd-art {
    position: static;
    max-width: 180px;
    margin: 0 auto;
  }
  .cd-art img {
    max-width: 100%;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
  }

  /* Timeline – čistá svislá osa vlevo */
  .cd-center {
    position: relative;
    z-index: 1;
  }
  .cd-steps {
    --gap: 72px;
    position: relative;
    padding: 8px 0 0 0;
    gap: var(--gap);
  }
  /* hlavní linka vlevo */
  .cd-steps::before {
    content:"";
    position:absolute;
    left:22px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--cd-line);
    z-index:0;
  }

  .cd-step {
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 58px;     /* prostor pro tečku + linku vlevo */
    text-align: left !important;
  }

  .cd-step h3{
    font-size: 20px;
    margin-bottom: 6px;
  }
  .cd-step p{
    font-size: 15px;
  }

  /* přepíšeme původní ::after (středová linka)
     a použijeme ho jako tečku na ose vlevo */
  .cd-step::after{
    content:"";
    position:absolute;
    left:22px;
    top:5px;
    transform:none;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--cd-dot);
    box-shadow:0 0 0 4px rgba(153,255,0,.18);
  }
}

/* EXTRA SMALL – dotáhnutí detailů */
@media (max-width: 480px){
  .cd-step {
    padding-left: 54px;
  }
  .cd-steps::before {
    left:20px;
  }
  .cd-step::after {
    left:20px;
    width:12px;
    height:12px;
  }
  .cd-step h3{
    font-size: 18px;
  }
  .cd-step p{
    font-size: 14px;
  }
}


/*--------------------------------------------------------------
# TECHNOLOGIE
--------------------------------------------------------------*/
.technologie-bg {
  position: relative;
  overflow: hidden;
}
.technologie-bg .container {
  position: relative;
  z-index: 1;
}
.technologie-bg::after {
  content: "";
  position: absolute;
  top: 120px;
  bottom: 0;
  right: 290px;
  width: min(44vw, 720px);
  background-image: url("/wp-content/uploads/2025/12/technologie.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

/* Pozadí – responzivita */
@media (max-width: 1199px) {
  .technologie-bg::after {
    right: -60px;
    width: min(52vw, 640px);
    opacity: .16;
  }
}
@media (max-width: 991px) {
  .technologie-bg::after {
    right: -80px;
    width: 80vw;
    opacity: .12;
  }
}
@media (max-width: 575px) {
  .technologie-bg::after {
    right: -100px;
    width: 100vw;
    opacity: .10;
    top: 160px;
  }
}

/* Layout levý / pravý sloupec */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 2fr;
  }
}

/* Seznam technologií – levý sloupec */
.tech-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tech-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 50px 0 0 50px;
  font-family: 'Exo', sans-serif;
  font-weight: 500;
  color: #001f38;
  background: #e7e7e7;
  cursor: pointer;
  border: none;
  text-align: left;
  font-size: 16px;
  transition: .2s;
}
.tech-item:hover {
  transform: translateX(4px);
}
.tech-item.active {
  background: #001f38;
  color: #fff;
}
.tech-item.active .tech-ico-img {
  filter: brightness(0) invert(1);
}

/* Ikona technologie */
.tech-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.tech-ico img {
  width: 50%;
  height: auto;
  object-fit: contain;
}
.tech-item.active .tech-ico {
  background: #a5d204;
  color: #0b2340;
}

/* Panel s textem + galerií – pravý sloupec */
.panel {
  background: #f2f2f2;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(10, 35, 64, .12);
  padding: 28px;
}
.panel h3 {
  color: rgb(0 31 56);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 10px;
}
.panel p {
  font-size: 17px;
  font-weight: 400;
  color: #001f38;
  line-height: 1.5;
}
.panel a {
  color: #a6d303;
  font-weight: 600;
  text-decoration: none;
}
.panel a:hover {
  color: #a6d303;
  font-weight: 600;
  text-decoration: underline;
}
.panel p strong {
  font-weight: 600;
  color: #001f38;
}

/* CTA tlačítko v panelu / pod panelem */
.ctatop .btn-green {
  font-family: 'Exo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #97bf0d;
  padding: 10px 30px;
  border: none;
  border-radius: 20px 0 20px 0;
  transition: background-color .4s, transform .3s, box-shadow .3s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ctatop .btn-green:hover {
  background-color: #47b2e4;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
}
.ctatop .btn-green i {
  transition: transform .3s ease;
}
.ctatop .btn-green:hover i {
  transform: translateX(5px);
}
.ctatop a {
  margin-right: 24px;
}
.ctatop a:last-child {
  margin-right: 0;
}

/* Galerie náhledů v panelu */
.panel .gallery {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  padding-top: 16px;
}
.panel .gallery a {
  display: block;
}
.panel .gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px 0;
  display: block;
}

/* LIGHTBOX */
.lb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lb.open {
  display: flex;
}
.lb-inner {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
}
.lb-img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  backdrop-filter: blur(4px);
}
.lb-close {
  top: -56px;
  right: 0;
  transform: none;
}
.lb-prev {
  left: -56px;
}
.lb-next {
  right: -56px;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.3);
}

/* Lightbox – extra mobile úpravy */
@media (max-width: 575px) {
  .lb-prev {
    left: 8px;
  }
  .lb-next {
    right: 8px;
  }
  .lb-close {
    right: 8px;
    top: -48px;
  }
}

/* =======================
   TECHNOLOGIE – RESPONZIVITA DETAILNĚ
   ======================= */

/* <= 1199 px */
@media (max-width: 1199px) {
  .panel {
    padding: 24px;
  }
  .panel .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* <= 991 px – tablet / menší notebooky */
@media (max-width: 991px) {
  .layout {
    gap: 20px;
  }

  .panel {
    padding: 22px;
  }

  .panel h3 {
    font-size: 22px;
  }

  .panel p {
    font-size: 16px;
  }

  .panel .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* <= 768 px – dvě části pod sebou */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tech-item {
    font-size: 15px;
    padding: 12px 14px;
  }

  .panel {
    padding: 20px;
  }

  .panel .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .tech-list {
    gap: 10px;
  }

  .tech-item {
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 40px 0 0 40px;
  }

  .tech-ico {
    width: 36px;
    height: 36px;
  }

  .panel {
    padding: 18px 16px;
  }

  .panel h3 {
    font-size: 20px;
  }

  .panel p {
    font-size: 15px;
  }

  .panel .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .tech-item {
    font-size: 13.5px;
    padding: 10px 12px;
  }

  .panel {
    padding: 16px 14px;
  }

  .panel .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .tech-item {
    gap: 10px;
  }

  .panel {
    padding: 14px 12px;
  }

  .panel .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .panel .gallery {
    grid-template-columns: 1fr;
  }
}



/* NASE SLUZBY */
section.nasesluzby-bg {
  background-color: #001f38;
}
.nasesluzby .left-side {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nasesluzby .right-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.nasesluzby .item-body{
  display:flex;
  flex-direction:column;
  gap: 26px;
  margin-top: 16px;
}
.nasesluzby .service{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.nasesluzby .service .icon {
  flex:0 0 32px;
  width:32px; height:32px;
  color:#97bf0d; /* zelená žárovka */
  display:grid; place-items:center;
  margin-top: 4px;
}
.nasesluzby .service .icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.nasesluzby .service--right{
  flex-direction: row-reverse;
  text-align: right;
}
.nasesluzby .service--right .icon { 
  margin-top:4px; 
}
.nasesluzby .service h3 {  
  font-size: 20px;
  font-weight: 800;
  color:#ffffff;
}
.nasesluzby .service p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
}
.nasesluzby .service p strong {
  color: #97bf0d;
  font-weight: 800;
}
.nasesluzby .service a {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.nasesluzby .service a:hover {
  text-decoration: underline;
}
.nasesluzby .item-img {
  position: relative;
  height: 520px;          
  margin: 8px 0 0;
}

/* NASE SLUZBY EFEKT */
/* === Naše služby – moderní efekty === */
.nasesluzby-bg { position: relative; overflow: hidden; }
.nasesluzby .item-body { position: relative; }

/* Základní „před stav“ (hidden) */
.nasesluzby .service {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transition: 
    transform .7s cubic-bezier(.2,.65,.15,1),
    opacity .7s ease,
    filter .7s ease;
  transition-delay: calc(var(--stagger, 0) * 80ms);
}

/* Levý/pravý sloupec – jemné vyjetí ze stran */
.nasesluzby .left-side .service   { transform: translateX(-26px) translateY(10px) scale(.985); }
.nasesluzby .right-side .service  { transform: translateX( 26px) translateY(10px) scale(.985); }

/* Když je v zorném poli → odhalit */
.nasesluzby .service.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Mikro-interakce ikon a karet */
.nasesluzby .service .icon img {
  transition: transform .35s ease;
  transform-origin: 50% 70%;
}
.nasesluzby .service:hover .icon img {
  transform: scale(1.06) rotate(-2deg);
}
.nasesluzby .service:hover {
  transform: translateY(-2px);
}

/* Střed – parallax pohyb obrázku */
.nasesluzby .middle-side .item-img {
  position: relative;
  perspective: 800px;
  will-change: transform;
}
.nasesluzby .middle-side .item-img img {
  display: block;
  width: 100%;
  will-change: transform;
  transition: transform .15s ease-out;
  transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(var(--scale,1));
}

/* Pagination/spacing drobnost pod sekcí (volitelné) */
.nasesluzby-bg { padding-bottom: clamp(40px, 6vw, 72px); }

/* Respektuj snížený pohyb */
@media (prefers-reduced-motion: reduce) {
  .nasesluzby .service,
  .nasesluzby .service:hover,
  .nasesluzby .middle-side .item-img img {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* =======================
   NASE SLUZBY – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zmenšení, míň vysoký obrázek */
@media (max-width: 1199px) {
  .nasesluzby .service h3 {
    font-size: 19px;
  }
  .nasesluzby .service p {
    font-size: 14.5px;
  }
  .nasesluzby .item-img {
    height: 460px;
  }
}

/* <= 991 px – tablet / menší notebooky */
@media (max-width: 991px) {
  .nasesluzby .left-side,
  .nasesluzby .right-side {
    justify-content: center;
  }
.nasesluzby .middle-side .item-img img {
  height: 380px;
  object-fit: contain
}
  .nasesluzby .item-body {
    margin-top: 10px;
  }

  .nasesluzby .item-img {
    height: 420px;
    margin-top: 30px;
  }

  .nasesluzby .service {
    gap: 14px;
  }
}

/* <= 768 px – tablet na výšku / velké mobily */
@media (max-width: 768px) {
  .nasesluzby .left-side,
  .nasesluzby .right-side {
    justify-content: flex-start;
  }
.nasesluzby .middle-side .item-img img {
  height: 350px;
  object-fit: contain
}
  .nasesluzby .item-body {
    gap: 20px;
  }

  .nasesluzby .service h3 {
    font-size: 18px;
  }
  .nasesluzby .service p {
    font-size: 14px;
  }

  .nasesluzby .item-img {
    height: 360px;
    margin-top: 24px;
  }
}

/* <= 575 px – mobily, sekce pod sebou */
@media (max-width: 575px) {
  section.nasesluzby-bg {
    padding-bottom: 48px;
  }
.nasesluzby .middle-side {
    display: none;
  }
  .nasesluzby .left-side,
  .nasesluzby .right-side {
    justify-content: center;
    text-align: left;
  }

  .nasesluzby .item-body {
    margin-top: 18px;
    gap: 18px;
  }

  .nasesluzby .service {
    align-items: flex-start;
  }

  /* Na mobilech zarovnáme i pravé služby standardně (žádný right text-align) */
  .nasesluzby .service--right {
    flex-direction: row;
    text-align: left;
  }

  .nasesluzby .service h3 {
    font-size: 17px;
  }
  .nasesluzby .service p {
    font-size: 13.5px;
  }

  .nasesluzby .item-img {
    height: 320px;
    margin-top: 30px;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .nasesluzby .service {
    gap: 12px;
  }

  .nasesluzby .service h3 {
    font-size: 16px;
  }
  .nasesluzby .service p {
    font-size: 13px;
  }

  .nasesluzby .item-img {
    height: 280px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .nasesluzby .service .icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }

  .nasesluzby .service h3 {
    font-size: 15px;
  }
  .nasesluzby .service p {
    font-size: 12.5px;
  }

  .nasesluzby .item-img {
    height: 260px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .nasesluzby .service {
    gap: 10px;
  }

  .nasesluzby .service h3 {
    font-size: 14px;
  }
  .nasesluzby .service p {
    font-size: 12px;
  }

  .nasesluzby .item-img {
    height: 240px;
  }
}



/*--------------------------------------------------------------
# RECENZE
--------------------------------------------------------------*/
.recenze-bg { 
  background-color: #0098d8;
}
.recenze {
  padding: 110px 0 70px;   /* větší top kvůli avatarům */
}

/* Kartička recenze */
.recenze .recbox {
  position: relative;
  background: #0098d8;
  color: #fff;
  border-radius: 18px;
  text-align: center;
  padding: 74px 22px 26px;   /* horní padding pro avatar */
  max-width: 260px;
  margin: 0 auto;
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, opacity .6s;
  will-change: transform, opacity;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.recenze .recbox.is-in{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Avatar */
.recenze .recbox__avatar {
  position: absolute;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  outline: 6px solid #0098d8;
  overflow: visible;
  z-index: 2;
}
.recenze .recbox__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.recenze .recbox__avatar::after{
  content: "„";
  position: absolute;
  left: 0;
  font-family: 'Passion One', sans-serif;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: 90px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 6px rgba(0,0,0,.15);
  pointer-events: none;
  z-index: 3;
}

/* Texty */
.recenze .recbox__text {
  margin: 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
  opacity: .95;
}
.recenze .recbox__author {
  margin-top: 16px;
}
.recenze .recbox__name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .2px;
}
.recenze .recbox__company {
  font-size: 14px;
  opacity: .9;
}

/* Hover efekt (jen pohyb, ne barvy) */
.recenze .recbox{ --rx:0deg; --ry:0deg; }
@media (hover:hover){
  .recenze .recbox:hover{
    transform: translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }
}
@media (prefers-reduced-motion: reduce){
  .recenze .recbox{ transition:none; }
}

/*--------------------------------------------------------------
# RECENZE – RESPONZIVITA
--------------------------------------------------------------*/
/* ZÁKLAD – menší mezera nahoře */
.recenze {
  padding: 0;   /* místo 110px 0 70px */
}

/* <= 991 px – tablet / menší notebooky */
@media (max-width: 991px) {
  .recenze {
    padding-top: 95px;    /* místo 110px */
  }
}

/* <= 768 px – dvě a dvě */
@media (max-width: 768px) {
  .recenze {
    padding-top: 25px;   /* místo 120px */
  }
}
/* ==== RECENZE – responzivní spodní mezery ==== */
@media (max-width: 768px) {

  /* všem recboxům přidáme dolní padding */
  .recenze .recbox.is-in {
    margin-bottom: 40px !important;
  }

  /* poslední recbox ve sloupci ho mít nebude */
  .recenze .col-12:last-child .recbox.is-in {
    margin-bottom: 0 !important;
  }

  /* pokud se skládá grid jinak (Bootstrap row) – jistota */
  .recenze .row > div:last-child .recbox.is-in {
    marginbottom: 0 !important;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .recenze {
    padding-top: 0;   /* místo 125px */
    padding-bottom: 0;
  }
}

/* <= 375 px */
@media (max-width: 375px) {
  .recenze {
    padding-top: 0;   /* místo 130px */
  }
}

/* <= 320 px */
@media (max-width: 320px) {
  .recenze {
    padding-top: 0;   /* místo 135px */
  }
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/
section.paticka-bg {
  padding-bottom: 10px;
}
.paticka h5 {
  font-size: 24px;
  font-weight: 700;
  color: #001f38;
  margin-bottom: 0;
  padding-bottom: 18px;
}
.paticka .sloupec1 .logo img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 25px;
}
.socialiconsfoot{
  display:flex;
  justify-content: center;
  gap:12px;
  align-items:center;
}
.sif{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  transition: transform .2s ease, filter .2s ease;
}
.sif--fb{ background:#1877F2; }  
.sif--ig{ background:#97BF0D; } 
.sif--tt{ background:#0b2a3f; }  
.sif i{ 
  font-size:18px; 
  line-height:1; 
  color: #fff;
}
.sif:hover{ transform: translateY(-2px); filter: brightness(1.1); }


.paticka p {
  font-size: 15px;
  font-weight: 500;
  color: #001f38;
  line-height: 1.5;
}
.paticka a {
  color: #97bf0d;
  font-weight: 700;
  text-decoration: none;
}
.paticka a:hover {
  text-decoration: underline;
}
.paticka .sloupec3 ul li a {
  color: #001f38;
  font-weight: 500;
  list-style: none;
}
.paticka .sloupec3 ul li::marker {
  font-size: 0;
}
.paticka .sloupec3 ul li {
  font-family: 'Exo', sans-serif;
  font-size: 15px;
  line-height: 2.1;
}
.paticka .sloupec3 ul {
  padding-left: 0;
}
.paticka .sloupec3 ul li a:hover {
  color: #97bf0d;
}

.paticka .sloupec4 .ctbox {
  margin-bottom: 15px;
}
.paticka .sloupec4 .ctbox h3 {
  font-size: 17px;
  font-weight: 800;
  color: #001f38;
  line-height: 1.5;  
}
.paticka .sloupec4 .ctbox p {
  font-size: 17px;
  font-weight: 500;
  color: #001f38;
  line-height: 1.5;  
}
.paticka .sloupec4 .ctbox svg {
  padding-right: 10px;
}
/* SOCKET */
.socket {
  padding-top: 70px;
}
.socket .copy p {
  font-size: 14px;
  font-weight: 500;
  color: #001f38;
}
/* =======================
   FOOTER – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zmenšení typografie */
@media (max-width: 1199px) {
  .paticka h5 {
    font-size: 22px;
  }
  .paticka .sloupec1 .logo img {
    height: 130px;
  }
}

/* <= 991 px – tablet landscape, zarovnání a spacing */
@media (max-width: 991px) {
  section.paticka-bg {
    padding-top: 30px;
  }

  .paticka {
    text-align: center;
  }

  .paticka .sloupec1 .logo img {
    max-width: 260px;
    height: 120px;
    margin: 0 auto 20px;
  }

  .paticka .sloupec3 ul {
    padding-left: 0;
  }

  .paticka .sloupec3 ul li {
    line-height: 1.8;
  }

  .socket {
    padding-top: 40px;
  }
}

/* <= 768 px – menší nadpisy, vycentrované prvky */
@media (max-width: 768px) {
  .paticka h5 {
    font-size: 20px;
    padding-bottom: 14px;
  }

  .paticka p {
    font-size: 14px;
  }

  .paticka .sloupec4 .ctbox h3,
  .paticka .sloupec4 .ctbox p {
    font-size: 15px;
  }

  .socialiconsfoot {
    margin-top: 10px;
  }

  .socket .copy p {
    text-align: center;
  }
}

/* <= 767 px – jemné dotažení pod breakpointem */
@media (max-width: 767px) {
  .paticka .sloupec3 ul li {
    line-height: 1.7;
  }
}

/* <= 601 px – zmenšení loga, větší mezery mezi bloky */
@media (max-width: 601px) {
  .paticka .sloupec1 .logo img {
    max-width: 220px;
    height: 100px;
    margin-bottom: 18px;
  }

  .paticka .sloupec4 .ctbox {
    margin-bottom: 12px;
  }
}

/* <= 575 px – mobile, vše na střed, menší ikony */
@media (max-width: 575px) {
  section.paticka-bg {
    padding-top: 24px;
    padding-bottom: 16px;
  }

  .paticka h5 {
    font-size: 19px;
  }

  .paticka p {
    font-size: 13px;
  }

  .socialiconsfoot {
    justify-content: center;
    margin-bottom: 10px;
  }

  .sif {
    width: 34px;
    height: 34px;
  }

  .sif i {
    font-size: 16px;
  }

  .socket {
    padding-top: 24px;
  }
}

/* <= 425 px – malé telefony */
@media (max-width: 425px) {
  .paticka h5 {
    font-size: 18px;
  }

  .paticka .sloupec3 ul li {
    font-size: 14px;
  }

  .paticka .sloupec4 .ctbox h3,
  .paticka .sloupec4 .ctbox p {
    font-size: 14px;
  }

  .socket .copy p {
    font-size: 13px;
  }
}

/* <= 375 px – extra kompaktní */
@media (max-width: 375px) {
  .paticka .sloupec1 .logo img {
    max-width: 200px;
    height: 90px;
  }

  .socialiconsfoot {
    gap: 8px;
  }

  .sif {
    width: 32px;
    height: 32px;
  }
}

/* <= 320 px – úplně nejmenší displeje */
@media (max-width: 320px) {
  .paticka h5 {
    font-size: 17px;
  }

  .paticka p,
  .paticka .sloupec3 ul li,
  .socket .copy p {
    font-size: 12px;
  }
}


/*--------------------------------------------------------------
# PODSTRANKA
--------------------------------------------------------------*/
/* BREADCRUMBS */
.bread h1 {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  padding-bottom: 20px;
}
.bread-bg{
  position: relative;
  padding-top: 150px;
  color:#fff;
  background-color:#001f38; 
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bread-bg .bread-overlay{
  position:absolute; inset:0;
  /* jemný tmavý gradient + lehké ztmavení pro čitelnost */
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.bread-title{
  margin: 0 0 .75rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2px;
  text-wrap: balance;
  font-size: clamp(28px, 4.5vw, 48px);
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

/* Breadcrumbs reset + layout */
.breadcrumbs ol{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.25rem .5rem; margin:0; padding:0; list-style:none;
}
.breadcrumbs li{ display:inline-flex; align-items:center; opacity:.95; }
.breadcrumbs li + li::before{
  content:"›";
  margin: 0 .5rem;
  opacity:.7;
}
.breadcrumbs a{
  text-decoration:none;
  color:#d8e7f2;
  transition:opacity .2s ease;
}
.breadcrumbs a:hover{ opacity:.85; }
.breadcrumbs .is-current span{
  color:#ffffff; font-weight:600;
}

@media (prefers-contrast: more){
  .bread-bg .bread-overlay{ background: rgba(0,0,0,.55); }
}
/* =======================
   PODSTRÁNKA – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehce menší padding a titulek */
@media (max-width: 1199px) {
  .bread-bg {
    padding-top: 130px;
  }
  .bread h1 {
    font-size: 36px;
  }
}

/* <= 991 px – notebook / tablet na šířku */
@media (max-width: 991px) {
  .bread-bg {
    padding-top: 110px;
  }

  .bread h1 {
    font-size: 32px;
    padding-bottom: 16px;
  }

  .bread-title {
    font-size: clamp(26px, 4vw, 40px);
  }

  .breadcrumbs ol {
    justify-content: center;
  }
}

/* <= 768 px – klasický tablet */
@media (max-width: 768px) {
  .bread-bg {
    padding-top: 95px;
  }

  .bread h1 {
    font-size: 28px;
  }

  .bread-title {
    font-size: clamp(24px, 4.2vw, 34px);
    text-align: center;
  }

  .breadcrumbs ol {
    font-size: 14px;
  }
}

/* <= 575 px – mobily, kompaktnější */
@media (max-width: 575px) {
  .bread-bg {
    padding-top: 100px;
  }

  .bread h1 {
    font-size: 24px;
  }

  .bread-title {
    font-size: 22px;
    line-height: 1.2;
  }

  .breadcrumbs ol {
    justify-content: center;
    row-gap: 2px;
  }

  .breadcrumbs li {
    font-size: 13px;
  }
}

/* <= 425 px – malé telefony */
@media (max-width: 425px) {
  .bread-bg {
    padding-top: 90px;
  }

  .bread h1 {
    font-size: 22px;
  }

  .breadcrumbs li {
    font-size: 12px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .bread-title {
    font-size: 20px;
  }

  .breadcrumbs li {
    font-size: 11px;
  }
}

/* <= 320 px – úplně nejmenší displeje */
@media (max-width: 320px) {
  .bread-bg {
    padding-top: 80px;
  }

  .bread h1 {
    font-size: 20px;
  }

  .breadcrumbs li {
    font-size: 10px;
  }
}

/*--------------------------------------------------------------
# OBSAH PODSTRANKY
--------------------------------------------------------------*/
.obsah-bg{
  background:#fff;
  padding:clamp(32px,5vw,64px) 0;
  color:#243041;
  line-height:1.7;
  font-family:"Exo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.obsah-bg .container.obsah>.row{max-width:1080px;margin:0 auto}

/* Nadpisy */
.obsah-bg h1,.obsah-bg h2,.obsah-bg h3,.obsah-bg h4,.obsah-bg h5,.obsah-bg h6{
  color:#001f38; line-height:1.2; margin:0 0 .6em; font-weight:700; letter-spacing:.2px;
}
.obsah-bg h1{font-size:clamp(32px,4.2vw,46px)}
.obsah-bg h2{font-size:clamp(26px,3.2vw,34px)}
.obsah-bg h3{font-size:clamp(22px,2.6vw,28px)}
.obsah-bg h4{font-size:clamp(18px,2vw,22px);font-weight:600}
.obsah-bg h5{font-size:17px;font-weight:600;color:#001f38}
.obsah-bg h6{font-size:16px;font-weight:600;color:#001f38}

/* Text, odkazy, seznamy */
.obsah-bg p{margin:0 0 1.1em}
.obsah-bg p.lead{font-size:clamp(18px,1.6vw,20px);color:#243041}
.obsah-bg small,.obsah-bg .small{color:#001f38}
.obsah-bg a {
  color: #a4c400;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight: 700;
}
.obsah-bg a:hover {
 color: #24a3df !important;
}
.obsah-bg ul,.obsah-bg ol{padding-left:1.2em;margin:0 0 1.1em}
.obsah-bg li{margin:.25em 0}

/* Obrázky a galerie */
.obsah-bg .wp-block-image img,.obsah-bg img{border-radius:10px;height:auto}
.obsah-bg figure{margin:0 0 1.1em}
.obsah-bg figcaption{text-align:center;color:#001f38;font-size:.95rem;margin-top:.5em}
.obsah-bg .wp-block-gallery{gap:12px}
.obsah-bg .wp-block-gallery .wp-block-image img{border-radius:10px}

/* Tlačítka */
.obsah-bg .wp-block-button .wp-block-button__link{
  background:#001f38;color:#fff;border-radius:999px;padding:12px 22px;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.05);text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease
}
.obsah-bg .wp-block-button .wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.obsah-bg .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:#001f38;border-color:#001f38}

/* Citace */
.obsah-bg blockquote,.obsah-bg .wp-block-quote{
  background:#f5f8fb;border-left:4px solid #001f38;padding:18px 22px;border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);color:#243041;margin:1.2em 0
}
.obsah-bg .wp-block-pullquote{
  border:none;background:#f5f8fb;border-radius:14px;padding:clamp(18px,3vw,28px);text-align:center
}
.obsah-bg .wp-block-pullquote blockquote{border:0}

/* Kód */
.obsah-bg code,.obsah-bg pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.obsah-bg pre{
  background:#0b1b2d;color:#e8f0ff;padding:16px 18px;border-radius:14px;overflow:auto
}

/* Tabulky */
.obsah-bg table{
  width:100%;border-collapse:collapse;margin:1em 0;box-shadow:0 6px 16px rgba(0,0,0,.05);
  border-radius:14px;overflow:hidden
}
.obsah-bg table th,.obsah-bg table td{padding:12px 14px;border-bottom:1px solid #e3e9f0}
.obsah-bg table thead th{background:#f5f8fb;color:#001f38;font-weight:700}
.obsah-bg table tr:last-child td{border-bottom:0}

/* Oddělovač */
.obsah-bg .wp-block-separator,.obsah-bg hr{border:0;height:1px;background:#e3e9f0;margin:28px 0}

/* Sloupce */
.obsah-bg .wp-block-columns{gap:clamp(16px,2vw,28px);align-items:flex-start}
@media (max-width:782px){.obsah-bg .wp-block-column{margin-bottom:16px}}

/* Media & Text */
.obsah-bg .wp-block-media-text{gap:20px}
.obsah-bg .wp-block-media-text__content{padding:0}

/* Cover */
.obsah-bg .wp-block-cover{border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}

/* File block */
.obsah-bg .wp-block-file a.wp-block-file__button{
  background:#001f38;color:#fff;border-radius:999px;padding:10px 18px;text-decoration:none
}

/* Videa */
.obsah-bg .wp-block-embed.is-type-video iframe,
.obsah-bg .wp-block-video video{
  width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05)
}

/* ===== SPECTRA / UAGB ===== */

/* Advanced Heading */
.obsah-bg .uagb-heading-text{color:#001f38;line-height:1.2}

/* Container */
.obsah-bg .uagb-section__wrap,.obsah-bg .uagb-container__wrap{border-radius:14px;overflow:hidden}

/* Buttons */
.obsah-bg .uagb-buttons__wrap .uagb-button__link{
  background:#001f38;color:#fff;border-radius:999px !important;padding:12px 22px;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.05);text-decoration:none;transition:transform .15s ease,box-shadow .2s ease
}
.obsah-bg .uagb-buttons__wrap .uagb-button__link:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.obsah-bg .uagb-buttons__wrap .uagb-buttons__outline .uagb-button__link{background:transparent;color:#001f38;border-color:#001f38}

/* Icon List */
.obsah-bg .uagb-icon-list__wrap{gap:10px}
.obsah-bg .uagb-icon-list__source-wrap{align-items:center}
.obsah-bg .uagb-icon-list__label{color:#243041}

/* Info Box */
.obsah-bg .uagb-ifb-content{
  background:#fff;border:1px solid #e3e9f0;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05);padding:18px
}
.obsah-bg .uagb-ifb-title{color:#001f38}

/* Tabs */
.obsah-bg .uagb-tabs__wrap{border:1px solid #e3e9f0;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.obsah-bg .uagb-tabs__panel{padding:18px}
.obsah-bg .uagb-tabs__nav{background:#f5f8fb}
.obsah-bg .uagb-tab .uagb-tab-label{color:#001f38}

/* Accordion */
.obsah-bg .uagb-accordion{border-radius:14px;overflow:hidden;border:1px solid #e3e9f0;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.obsah-bg .uagb-accordion__panel{border-bottom:1px solid #e3e9f0}
.obsah-bg .uagb-accordion__panel:last-child{border-bottom:0}
.obsah-bg .uagb-accordion__heading{color:#001f38}

/* Testimonial */
.obsah-bg .uagb-tm__wrap{
  background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.obsah-bg .uagb-tm__author-name{color:#001f38}

/* Pricing */
.obsah-bg .uagb-pricing__wrap{gap:18px}
.obsah-bg .uagb-pricing__item{
  background:#fff;border:1px solid #e3e9f0;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05);padding:22px
}
.obsah-bg .uagb-pricing__title{color:#001f38}

/* Forms */
.obsah-bg .uagb-forms__outer-wrap input[type="text"],
.obsah-bg .uagb-forms__outer-wrap input[type="email"],
.obsah-bg .uagb-forms__outer-wrap input[type="url"],
.obsah-bg .uagb-forms__outer-wrap input[type="tel"],
.obsah-bg .uagb-forms__outer-wrap textarea,
.obsah-bg .uagb-forms__outer-wrap select{
  border:1px solid #e3e9f0;border-radius:10px;padding:10px 12px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease
}
.obsah-bg .uagb-forms__outer-wrap input:focus,
.obsah-bg .uagb-forms__outer-wrap textarea:focus,
.obsah-bg .uagb-forms__outer-wrap select:focus{
  outline:none;border-color:#001f38;box-shadow:0 0 0 4px rgba(0,31,56,.12)
}
.obsah-bg .uagb-forms__outer-wrap .uagb-forms-main-submit-button{
  background:#001f38;color:#fff;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.obsah-bg .uagb-forms__outer-wrap .uagb-forms-main-submit-button:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* Utility spacing (když bloky nemají marginy) */
.obsah-bg .wp-block-group,
.obsah-bg .wp-block-columns,
.obsah-bg .wp-block-media-text,
.obsah-bg .uagb-section__wrap,
.obsah-bg .uagb-container__wrap,
.obsah-bg .wp-block-cover{margin-bottom:clamp(16px,2.5vw,26px)}

/* Mobile CTA 100% šířka */
@media (max-width:576px){
  .obsah-bg{line-height:1.75}
  .obsah-bg .wp-block-button .wp-block-button__link,
  .obsah-bg .uagb-buttons__wrap .uagb-button__link{width:100%;text-align:center}
}
/* =======================
   OBSAH PODSTRÁNKY – RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zúžení řádku */
@media (max-width: 1199px) {
  .obsah-bg .container.obsah > .row {
    max-width: 960px;
  }
}

/* <= 991 px – notebook / tablet na šířku */
@media (max-width: 991px) {
  .obsah-bg .container.obsah > .row {
    max-width: 860px;
  }

  .obsah-bg p {
    font-size: 15.5px;
  }
}

/* <= 768 px – tablety */
@media (max-width: 768px) {
  .obsah-bg .container.obsah > .row {
    max-width: 100%;
    padding-inline: 12px;
  }

  .obsah-bg p {
    font-size: 15px;
  }

  .obsah-bg table {
    box-shadow: 0 4px 10px rgba(0,0,0,.04);
  }
}

/* <= 575 px – mobily (navazuje na tvůj existující blok) */
@media (max-width: 575px) {
  .obsah-bg {
    line-height: 1.75;
  }

  .obsah-bg p {
    font-size: 14px;
  }

  .obsah-bg figure {
    margin: 0 0 .9em;
  }

  .obsah-bg table th,
  .obsah-bg table td {
    padding: 10px 10px;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .obsah-bg p {
    font-size: 13.5px;
  }

  .obsah-bg .wp-block-columns {
    gap: 14px;
  }
}

/* <= 375 px */
@media (max-width: 375px) {
  .obsah-bg p {
    font-size: 13px;
  }

  .obsah-bg .uagb-ifb-content,
  .obsah-bg .uagb-pricing__item {
    padding: 14px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .obsah-bg p {
    font-size: 12.5px;
  }

  .obsah-bg table {
    font-size: 12px;
  }
}

/*--------------------------------------------------------------
# SCROLLBAR
--------------------------------------------------------------*/
:root{
  --sb-track: #0098d9;      
  --sb-thumb: #fff;        
  --sb-thumb-hover: #fff;   
  --sb-corner: transparent;    
  --sb-width: 12px;         
  --sb-radius: 10px;      
}
*::-webkit-scrollbar{
  width: var(--sb-width);
  height: var(--sb-width);
}
*::-webkit-scrollbar-track{
  background: var(--sb-track);
}
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: 3px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}
*::-webkit-scrollbar-corner{
  background: var(--sb-corner);
}
.slim-scroll::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
html{
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.slim-scroll{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
@media (prefers-color-scheme: dark){
  :root{
    --sb-track: #0098d9;
    --sb-thumb: #ffffff;
    --sb-thumb-hover: #5aa4d7;
  }
}
.hide-scrollbar{
  scrollbar-width: none;         
}
.hide-scrollbar::-webkit-scrollbar{
  display: none;                
}


/*--------------------------------------------------------------
# WP - LOGIN
--------------------------------------------------------------*/
body.login {
  background-image:url('/wp-content/uploads/2025/12/login-bg.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
#login h1 a {
  background-image: url('/wp-content/uploads/2025/12/cropped-colordot-logo2023.png');
  background-size: 375px;
  width: auto;
}
.login form{
  box-shadow:none;
  padding:20px;
}
#login {
  background: #FFF;
  margin: 50px auto;
  padding: 40px 20px;
  width: 400px;
  border-radius: 80px 0 25px;
  -webkit-box-shadow: 0px 0px 49px -35px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 49px -35px rgba(0,0,0,1);
box-shadow: 0px 0px 49px -35px rgba(0,0,0,1);
}
.login label {
  font-family: 'Open sans', sans-serif;
  font-weight: 700;
  color: #0e2c5a ;
  font-size: 14px;
}
.login form .forgetmenot{
  float:none;
}
#login form p.submit{
  margin-top:15px;
}
.login.wp-core-ui .button-primary {
  background: #99cc00;
  border-color:#99cc00;
  box-shadow: 0 1px 0 #99cc00;
  color: #FFF;
  text-shadow: none;
  float: none;
  clear: both;
  display: block;
  width: 100%;
  padding: 7px;
  height: auto;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 10px
}
.login.wp-core-ui .button-primary:hover {
  background: #1a3e60 ;
  border-color:#1a3e60 ;
  box-shadow: 0 1px 0 #1a3e60 ;
  transition: 1s;
}
.login form {
    border: none;
}
.login form .input, .login form input[type=checkbox], .login input[type=text] {
    background: #cbe1eb;
}
.login form .input, .login input[type=password], .login input[type=text] {
    font-size: 24px;
    line-height: 1.33333333;
    width: 100%;
    border-width: .0625rem;
    padding: .1875rem .3125rem;
    margin: 0 6px 16px 0;
    min-height: 40px;
    max-height: none;
    border: 2px solid #165994;
    border-radius: 3px;
}
p#backtoblog {
  display: none;
}
.privacy-policy-page-link a {
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
    color: #0e2c5a;
    font-weight: 400;
}
.login #nav a {
  font-family: 'roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
  color: #175a95;
}
.login #nav a:hover {
  color: #0e2c5a;
}

/*--------------------------------------------------------------
# PODSTRANKA - SIDEBAR
--------------------------------------------------------------*/
.obsah-bg {
  padding: 60px 0;
}
.obsah-main__inner {
  max-width: 100%;
}
.obsah-sidebar__inner {
  background: #0b233f;
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  font-size: 15px;
  line-height: 1.6;
}
.obsah-sidebar__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
.obsah-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.obsah-sidebar__list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
.obsah-sidebar__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}
.obsah-sidebar__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 10px;
}
.sticky-sidebar {
  position: sticky;
  top: 110px; 
}
.sticky-sidebar h2 {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
  padding-bottom: 15px;
}
.sticky-sidebar ul li {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
}
.sticky-sidebar img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .obsah-bg {
    padding: 40px 0;
  }
  .sticky-sidebar {
    position: static;
    margin-top: 30px;
  }
}
/* =======================
   PODSTRANKA – SIDEBAR RESPONZIVITA
   ======================= */

/* <= 1199 px – lehké zmenšení, menší top pro sticky */
@media (max-width: 1199px) {
  .sticky-sidebar {
    top: 96px;
  }

  .obsah-sidebar__inner {
    padding: 22px 20px;
  }
}

/* <= 991 px – notebooky / tablety na šířku */
@media (max-width: 991px) {
  .sticky-sidebar {
    top: 88px;
  }

  .obsah-sidebar__inner {
    padding: 20px 18px;
    font-size: 14.5px;
  }

  .obsah-sidebar__title,
  .sticky-sidebar h2 {
    font-size: 18px;
    margin-bottom: 14px;
  }

  .obsah-sidebar__list li,
  .sticky-sidebar ul li {
    font-size: 14px;
  }
}

/* <= 768 px – tady už máš přepnutí sticky → static, jen lehce doladíme */
@media (max-width: 767.98px) {
  .obsah-bg {
    padding: 40px 0;
  }

  .sticky-sidebar {
    position: static;
    margin-top: 30px;
  }

  .obsah-sidebar__inner {
    padding: 18px 16px;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .obsah-sidebar__inner {
    padding: 16px 14px;
    font-size: 14px;
  }

  .obsah-sidebar__title,
  .sticky-sidebar h2 {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .obsah-sidebar__list li,
  .sticky-sidebar ul li {
    font-size: 13.5px;
    margin-bottom: 6px;
  }

  .obsah-sidebar__image img {
    margin-top: 8px;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .obsah-sidebar__inner {
    padding: 14px 12px;
  }

  .obsah-sidebar__title,
  .sticky-sidebar h2 {
    font-size: 16px;
  }

  .obsah-sidebar__list li,
  .sticky-sidebar ul li {
    font-size: 13px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .obsah-sidebar__inner {
    padding: 12px 10px;
  }

  .obsah-sidebar__title,
  .sticky-sidebar h2 {
    font-size: 15px;
  }

  .obsah-sidebar__list li,
  .sticky-sidebar ul li {
    font-size: 12.5px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .obsah-sidebar__inner {
    padding: 10px 9px;
  }

  .obsah-sidebar__title,
  .sticky-sidebar h2 {
    font-size: 14px;
  }

  .obsah-sidebar__list li,
  .sticky-sidebar ul li {
    font-size: 12px;
  }
}

/* CASTE DOTAZY */
section.castedotazy-bg {
  background-color: #001f38;
}
.item-faq {
  margin-bottom: 40px;
}
.item-faq .accordion {
  border-radius: 8px;
  border: none;
  overflow: hidden;
}
.item-faq .accordion-item + .accordion-item {
  border-top: none;
}
.item-faq .accordion-item {
  background-color: #fff;
  border: none;
}
.item-faq .accordion-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  background: #e7e7e7;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}
.item-faq .accordion-button:hover {
  background: #24a3df;
  color: #fff;
}
.item-faq .accordion-button::after {
  content: "+";
  font-size: 18px;
  margin-left: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.item-faq .accordion-item.is-open .accordion-button {
  background: #24a3df;
  color: #fff;
}
.item-faq .accordion-item.is-open .accordion-button::after {
  content: "–";
}
.item-faq .accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: #fff;
}
.item-faq .accordion-body {
  padding: 16px 20px 18px;
  font-size: 15px;
  line-height: 1.6;
}
.item-faq .accordion-body p {
  margin-bottom: 10px;
}
.item-faq .accordion-body a {
  text-decoration: underline;
}
.item-faq .accordion-button:not(.collapsed)::after,
.item-faq .accordion-button::after {
  background-image: none !important;
  transform: none !important;
  margin-left: 12px; 
}
.castedotazy .right-side img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .item-faq .accordion-button {
    font-size: 15px;
    padding: 14px 16px;
  }
  .item-faq .accordion-body {
    padding: 14px 16px 16px;
  }
}
/* =======================
   ČASTÉ DOTAZY – RESPONZIVITA
   ======================= */

/* <= 1199 px – jemné zmenšení */
@media (max-width: 1199px) {
  .item-faq .accordion-button {
    font-size: 15.5px;
  }
  .item-faq .accordion-body {
    font-size: 14.5px;
  }
}

/* <= 991 px – tablet / menší notebooky */
@media (max-width: 991px) {
  .item-faq {
    margin-bottom: 32px;
  }

  .item-faq .accordion-button {
    padding: 14px 18px;
  }

  .item-faq .accordion-body {
    padding: 14px 18px 16px;
  }

  .castedotazy .right-side {
    margin-top: 16px;
  }
}

/* <= 768 px – navazuje na tvůj existující blok, lehce doplníme */
@media (max-width: 768px) {
  .item-faq {
    margin-bottom: 28px;
  }

  .item-faq .accordion-button {
    font-size: 15px;
    padding: 13px 14px;
  }

  .item-faq .accordion-body {
    font-size: 14px;
    padding: 13px 14px 15px;
  }

  .castedotazy .right-side img {
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }
}

/* <= 575 px – mobily */
@media (max-width: 575px) {
  .item-faq {
    margin-bottom: 24px;
  }

  .item-faq .accordion-button {
    font-size: 14px;
    padding: 12px 12px;
  }

  .item-faq .accordion-body {
    font-size: 13.5px;
    padding: 12px 12px 14px;
  }

  .item-faq .accordion-button::after {
    font-size: 16px;
    margin-left: 10px;
  }

  .castedotazy .right-side {
    margin-top: 20px;
  }

  .castedotazy .right-side img {
    max-width: 90%;
  }
}

/* <= 425 px – menší telefony */
@media (max-width: 425px) {
  .item-faq .accordion-button {
    font-size: 13.5px;
  }

  .item-faq .accordion-body {
    font-size: 13px;
  }
}

/* <= 375 px – extra malé */
@media (max-width: 375px) {
  .item-faq .accordion-button {
    padding: 11px 10px;
  }

  .item-faq .accordion-body {
    padding: 11px 10px 13px;
  }
}

/* <= 320 px – úplná drobotina */
@media (max-width: 320px) {
  .item-faq .accordion-button {
    font-size: 12.5px;
  }

  .item-faq .accordion-body {
    font-size: 12.5px;
  }
}

/*--------------------------------------------------------------
# KONTAKT
--------------------------------------------------------------*/
.kontakt-bg{
  background:#fff;
  padding:clamp(32px,5vw,64px) 0;
  color:#243041;
  line-height:1.7;
  font-family:"Exo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.kontakt-bg .container.kontakt>.row{/* max-width:1080px; *//* margin:0 auto; */}

/* Nadpisy */
.kontakt-bg h1,.kontakt-bg h2,.kontakt-bg h3,.kontakt-bg h4,.kontakt-bg h5,.kontakt-bg h6{
  color:#001f38; line-height:1.2; margin:0 0 .6em; font-weight:700; letter-spacing:.2px;
}
.kontakt-bg h1{font-size:clamp(32px,4.2vw,46px)}
.kontakt-bg h2{font-size:clamp(26px,3.2vw,34px)}
.kontakt-bg h3{font-size:clamp(22px,2.6vw,28px)}
.kontakt-bg h4{font-size:clamp(18px,2vw,22px);font-weight:600}
.kontakt-bg h5{font-size:17px;font-weight:600;color:#001f38}
.kontakt-bg h6{font-size:16px;font-weight:600;color:#001f38}

/* Text, odkazy, seznamy */
.kontakt-bg p{margin:0 0 1.1em}
.kontakt-bg p.lead{font-size:clamp(18px,1.6vw,20px);color:#243041}
.kontakt-bg small,.kontakt-bg .small{color:#001f38}
.kontakt-bg a {
  color: #a4c400;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight: 700;
}
.kontakt-bg a:hover {
 color: #24a3df !important;
}
.kontakt-bg ul,.kontakt-bg ol{padding-left:1.2em;margin:0 0 1.1em}
.kontakt-bg li{margin:.25em 0}

/* Obrázky a galerie */
.kontakt-bg .wp-block-image img,
.kontakt-bg img{
  border-radius:10px;
  height:auto;
}
.kontakt-bg figure{margin:0 0 1.1em}
.kontakt-bg figcaption{text-align:center;color:#001f38;font-size:.95rem;margin-top:.5em}
.kontakt-bg .wp-block-gallery{gap:12px}
.kontakt-bg .wp-block-gallery .wp-block-image img{border-radius:10px}

/* Tlačítka */
.kontakt-bg .wp-block-button .wp-block-button__link{
  background:#001f38;color:#fff;border-radius:999px;padding:12px 22px;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.05);text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease
}
.kontakt-bg .wp-block-button .wp-block-button__link:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.kontakt-bg .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:#001f38;
  border-color:#001f38;
}

/* Citace */
.kontakt-bg blockquote,.kontakt-bg .wp-block-quote{
  background:#f5f8fb;border-left:4px solid #001f38;padding:18px 22px;border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);color:#243041;margin:1.2em 0
}
.kontakt-bg .wp-block-pullquote{
  border:none;background:#f5f8fb;border-radius:14px;padding:clamp(18px,3vw,28px);text-align:center
}
.kontakt-bg .wp-block-pullquote blockquote{border:0}

/* Kód */
.kontakt-bg code,.kontakt-bg pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.kontakt-bg pre{
  background:#0b1b2d;color:#e8f0ff;padding:16px 18px;border-radius:14px;overflow:auto
}

/* Tabulky */
.kontakt-bg table{
  width:100%;border-collapse:collapse;margin:1em 0;box-shadow:0 6px 16px rgba(0,0,0,.05);
  border-radius:14px;overflow:hidden
}
.kontakt-bg table th,.kontakt-bg table td{padding:12px 14px;border-bottom:1px solid #e3e9f0}
.kontakt-bg table thead th{background:#f5f8fb;color:#001f38;font-weight:700}
.kontakt-bg table tr:last-child td{border-bottom:0}

/* Oddělovač */
.kontakt-bg .wp-block-separator,.kontakt-bg hr{border:0;height:1px;background:#e3e9f0;margin:28px 0}

/* Sloupce */
.kontakt-bg .wp-block-columns{gap:clamp(16px,2vw,28px);align-items:flex-start}
@media (max-width:782px){
  .kontakt-bg .wp-block-column{margin-bottom:16px}
}

/* Media & Text */
.kontakt-bg .wp-block-media-text{gap:20px}
.kontakt-bg .wp-block-media-text__content{padding:0}

/* Cover */
.kontakt-bg .wp-block-cover{
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

/* File block */
.kontakt-bg .wp-block-file a.wp-block-file__button{
  background:#001f38;color:#fff;border-radius:999px;padding:10px 18px;text-decoration:none
}

/* Videa */
.kontakt-bg .wp-block-embed.is-type-video iframe,
.kontakt-bg .wp-block-video video{
  width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05)
}

/* ===== SPECTRA / UAGB ===== */

/* Advanced Heading */
.kontakt-bg .uagb-heading-text{color:#001f38;line-height:1.2}

/* Container */
.kontakt-bg .uagb-section__wrap,
.kontakt-bg .uagb-container__wrap{
  border-radius:14px;
  overflow:hidden;
}

/* Buttons */
.kontakt-bg .uagb-buttons__wrap .uagb-button__link{
  background:#001f38;color:#fff;border-radius:999px !important;padding:12px 22px;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.05);text-decoration:none;transition:transform .15s ease,box-shadow .2s ease
}
.kontakt-bg .uagb-buttons__wrap .uagb-button__link:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.kontakt-bg .uagb-buttons__wrap .uagb-buttons__outline .uagb-button__link{
  background:transparent;
  color:#001f38;
  border-color:#001f38;
}

/* Icon List */
.kontakt-bg .uagb-icon-list__wrap{gap:10px}
.kontakt-bg .uagb-icon-list__source-wrap{align-items:center}
.kontakt-bg .uagb-icon-list__label{color:#243041}

/* Info Box */
.kontakt-bg .uagb-ifb-content{
  background:#fff;
  border:1px solid #e3e9f0;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  padding:18px
}
.kontakt-bg .uagb-ifb-title{color:#001f38}

/* Tabs */
.kontakt-bg .uagb-tabs__wrap{
  border:1px solid #e3e9f0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.kontakt-bg .uagb-tabs__panel{padding:18px}
.kontakt-bg .uagb-tabs__nav{background:#f5f8fb}
.kontakt-bg .uagb-tab .uagb-tab-label{color:#001f38}

/* Accordion */
.kontakt-bg .uagb-accordion{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e3e9f0;
  box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.kontakt-bg .uagb-accordion__panel{border-bottom:1px solid #e3e9f0}
.kontakt-bg .uagb-accordion__panel:last-child{border-bottom:0}
.kontakt-bg .uagb-accordion__heading{color:#001f38}

/* Testimonial */
.kontakt-bg .uagb-tm__wrap{
  background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:18px;box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.kontakt-bg .uagb-tm__author-name{color:#001f38}

/* Pricing */
.kontakt-bg .uagb-pricing__wrap{gap:18px}
.kontakt-bg .uagb-pricing__item{
  background:#fff;border:1px solid #e3e9f0;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.05);padding:22px
}
.kontakt-bg .uagb-pricing__title{color:#001f38}

/* Forms */
.kontakt-bg .uagb-forms__outer-wrap input[type="text"],
.kontakt-bg .uagb-forms__outer-wrap input[type="email"],
.kontakt-bg .uagb-forms__outer-wrap input[type="url"],
.kontakt-bg .uagb-forms__outer-wrap input[type="tel"],
.kontakt-bg .uagb-forms__outer-wrap textarea,
.kontakt-bg .uagb-forms__outer-wrap select{
  border:1px solid #e3e9f0;border-radius:10px;padding:10px 12px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease
}
.kontakt-bg .uagb-forms__outer-wrap input:focus,
.kontakt-bg .uagb-forms__outer-wrap textarea:focus,
.kontakt-bg .uagb-forms__outer-wrap select:focus{
  outline:none;border-color:#001f38;box-shadow:0 0 0 4px rgba(0,31,56,.12)
}
.kontakt-bg .uagb-forms__outer-wrap .uagb-forms-main-submit-button{
  background:#001f38;color:#fff;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.05)
}
.kontakt-bg .uagb-forms__outer-wrap .uagb-forms-main-submit-button:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* Utility spacing */
.kontakt-bg .wp-block-group,
.kontakt-bg .wp-block-columns,
.kontakt-bg .wp-block-media-text,
.kontakt-bg .uagb-section__wrap,
.kontakt-bg .uagb-container__wrap,
.kontakt-bg .wp-block-cover{
  margin-bottom:clamp(16px,2.5vw,26px);
}

/* Mobile CTA 100% šířka */
@media (max-width:576px){
  .kontakt-bg{line-height:1.75}
  .kontakt-bg .wp-block-button .wp-block-button__link,
  .kontakt-bg .uagb-buttons__wrap .uagb-button__link{width:100%;text-align:center}
}

/* --------------------------------------------------------------
# KONTAKT – LAYOUT: BOX + FOTO + MAPA
-------------------------------------------------------------- */

/* Card kolem obsahu kontaktu */
.kontakt-bg .kontaktni-box{
  background:#fff;
  /* border-radius:14px; */
  padding:20px 22px;
  /* box-shadow:0 6px 16px rgba(0,0,0,.05); */
}

/* Wrapper pravé části – obrázek + mapa */
.kontakt-bg .kontakt-right{
  display:grid;
  gap:clamp(16px,2vw,24px);
}

/* Na větších displejích vedle sebe */
@media (min-width:992px){
  .kontakt-bg .kontakt-right{
    grid-template-columns: 1fr;
    align-items:stretch;
  }
}

/* Obrázek mapy / fotka pobočky */
.kontakt-bg .mapa-obrazek{
  border-radius:14px;
  overflow:hidden;
}
.kontakt-bg .mapa-obrazek img{
  width:100%;
  height:100%;
  max-height:320px;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  object-fit:cover;
}

/* Kontejner mapy */
.kontakt-bg .mapa{
  width:100%;
  height:100%;
  min-height:260px;
  /* border-radius:14px; */
  overflow:hidden;
  /* box-shadow:0 6px 16px rgba(0,0,0,.06); */
}

/* iFrame mapy */
.kontakt-bg .mapa iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Responzivní výška mapy na nejmenších devicech */
@media (max-width:576px){
  .kontakt-bg .mapa{
    min-height:300px;
  }
}


/* --------------------------------------------------------------
# WOOCOMMERCE - MUJ UCET
-------------------------------------------------------------- */
.mujucet-bg {
    background: #f5f5f7;
    padding: 60px 0;
}
.mujucet {
    max-width: 1100px;
    margin: 0 auto;
}
.account-shell {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 28px 32px;
}
.account-shell--guest {
    max-width: 720px;
    margin: 0 auto;
}
.account-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}
.account-header--guest {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    margin-bottom: 24px;
    padding-bottom: 0;
}
.account-header--guest h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}
.account-header--guest p {
    margin: 0;
    font-size: 15px;
    color: #6b7280;
}
.account-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111827, #4b5563);
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-avatar span {
    color: #ffffff;
    font-weight: 700;
    font-size: 24px;
}
.account-meta {
    flex: 1 1 auto;
}
.account-hello {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}
.account-email {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}
.account-quick {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}
.btn-account-primary,
.btn-account-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-account-primary {
    background: #111827;
    color: #ffffff;
}
.btn-account-primary:hover {
    background: #000000;
    transform: translateY(-1px);
}
.btn-account-secondary {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}
.btn-account-secondary:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}
.btn-account-primary i,
.btn-account-secondary i {
    font-size: 16px;
    line-height: 1;
}
/* ===== LAYOUT: SIDEBAR + OBSAH ===== */
.account-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
}
.account-sidebar {
    border-right: 1px solid #e5e7eb;
    padding-right: 18px;
}
.account-sidebar .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.account-sidebar .woocommerce-MyAccount-navigation li {
    margin-bottom: 4px;
}
.account-sidebar .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px 12px;
    width: max-content;
    border-radius: 12px;
    font-size: 14px;
    text-decoration: none;
    color: #374151;
    background: transparent;
    transition: all 0.18s ease;
}
.account-sidebar .woocommerce-MyAccount-navigation a:hover {
    background: #f3f4f6;
    color: #111827;
}
.account-sidebar .woocommerce-MyAccount-navigation li.is-active a {
    background: #111827;
    color: #ffffff;
}
.account-main {
    min-height: 260px;
    font-size: 15px;
}
.account-main--single {
    margin-top: 16px;
}

/* Trochu uhladit WooCommerce obsah */
.account-main .woocommerce {
    /* aby se to moc nerozjíždělo, ale neomezujeme úplně */
}

.account-main h2,
.account-main h3 {
    font-weight: 700;
    color: #111827;
}
.account-main form .form-row label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.account-main input[type="text"],
.account-main input[type="email"],
.account-main input[type="password"],
.account-main input[type="tel"],
.account-main textarea,
.account-main select {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    font-size: 14px;
    width: 100%;
}
.account-main button.button,
.account-main .button {
    border-radius: 999px;
    padding: 10px 18px;
    background: #111827;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.account-main button.button:hover,
.account-main .button:hover {
    background: #000000;
    transform: translateY(-1px);
}
.account-main table.shop_table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.account-main table.shop_table th {
    background: #f9fafb;
    font-size: 13px;
    text-transform: none;
    color: #4b5563;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .mujucet-bg {
        padding: 40px 0;
    }    
    .account-shell {
        padding: 20px 18px 24px;
        border-radius: 16px;
    }    
    .account-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }    
    .account-quick {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }    
    .account-layout {
        grid-template-columns: 1fr;
    }    
    .account-sidebar {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }    
    .account-sidebar .woocommerce-MyAccount-navigation a {
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
    }
}
@media (max-width: 575px) {
    .account-header--guest h1 {
        font-size: 26px;
    }
    
    .account-shell {
        padding: 18px 16px 22px;
    }
    
    .account-quick {
        flex-direction: column;
    }
    
    .btn-account-primary,
    .btn-account-secondary {
        width: 100%;
        justify-content: center;
    }
}


/* --------------------------------------------------------------
# WOOCOMMERCE - KOSIK
-------------------------------------------------------------- */
.cart-intro {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 24px 28px;
    margin-bottom: 26px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}
.cart-intro-header {
    margin-bottom: 18px;
}
.cart-intro-header h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #111827;
}
.cart-intro-lead {
    margin: 0;
    font-size: 15px;
    color: #4b5563;
}
.cart-intro-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 24px;
    margin-top: 8px;
}
.cart-intro-main p {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 10px;
}
.cart-intro-main h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}
.cart-intro-main h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 14px 0 6px;
    color: #111827;
}
.cart-intro-list {
    margin: 0 0 10px 18px;
    padding: 0;
    font-size: 14px;
    color: #4b5563;
}
.cart-intro-list li {
    margin-bottom: 4px;
}
.cart-intro-box {
    background: #f9fafb;
    border-radius: 16px;
    padding: 18px 18px 20px;
    border: 1px solid #e5e7eb;
}
.cart-intro-box h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
}

.cart-intro-box p {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 10px;
}
.cart-intro-note {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .cart-intro {
        padding: 18px 16px 20px;
    }
    .cart-intro-header h1 {
        font-size: 20px;
    }
    .cart-intro-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cart-intro-box {
        order: -1; /* box s konfigurátorem nahoře na mobilu */
    }
}



/* =========================
   CF7 + Bootstrap formular
   ========================= */
:root{
  --cf7-bg: #f6f7f6;
  --cf7-border: #ffffff;
  --cf7-border-focus: #97c200;
  --cf7-text: #000;
  --cf7-muted: #555;

  --cf7-radius: 15px;
  --cf7-radius-btn: 10px;

  --cf7-pad-y: 12px;
  --cf7-pad-x: 20px;

  --cf7-title: #97c200;
  --cf7-btn-bg: #97bf0d;
  --cf7-btn-text: #24a3df;

  --cf7-shadow-focus: 0 0 0 4px rgba(34, 75, 53, 0.12);
}
.wpcf7{
  font-family: 'Poppins', sans-serif;
  color: var(--cf7-text);
}
.wpcf7 .form-group{
  margin-bottom: 14px;
}
.wpcf7 .form-label{
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}
.wpcf7 .cf7-section-title{
  font-weight: 800;
  font-size: 20px;
  color: var(--cf7-title);
  margin: 22px 0 12px;
}
.wpcf7 hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 22px 0;
}
.wpcf7 .form-group input,
.wpcf7 .form-group textarea,
.wpcf7 .form-group select{
  background-color: var(--cf7-bg);
  color: var(--cf7-text);
  font-family: 'Poppins', sans-serif;

  border: 2px solid var(--cf7-border);
  border-radius: var(--cf7-radius);

  padding: var(--cf7-pad-y) var(--cf7-pad-x);
  width: 100%;

  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  outline: none;
}
.wpcf7 .form-group input:hover,
.wpcf7 .form-group textarea:hover,
.wpcf7 .form-group select:hover{
  background-color: #f2f4f2;
}
.wpcf7 .form-group input:focus,
.wpcf7 .form-group textarea:focus,
.wpcf7 .form-group select:focus{
  border-color: var(--cf7-border-focus);
  box-shadow: var(--cf7-shadow-focus);
}
.wpcf7 .form-group textarea{
  height: 180px;
  resize: vertical;
  line-height: 1.45;
}
.wpcf7 ::placeholder{
  color: rgba(0,0,0,0.45);
}
.wpcf7 .form-group input[type="submit"],
.wpcf7 input.wpcf7-submit{
  background-color: var(--cf7-btn-bg);
  border: none;
  font-family: 'Readex Pro', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--cf7-btn-text);
  padding: 16px 35px;
  color: #fff;

  width: 100%;
  border-radius: var(--cf7-radius-btn);

  cursor: pointer;
  display: block;
  margin: 0 auto;

  transition: transform 0.12s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.wpcf7 .form-group input[type="submit"]:hover,
.wpcf7 input.wpcf7-submit:hover{
  background-color: var(--cf7-btn-text);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.wpcf7 .form-group input[type="submit"]:active,
.wpcf7 input.wpcf7-submit:active{
  transform: translateY(0);
  box-shadow: none;
}
.wpcf7 .form-group small{
  display: block;
  margin-top: 10px;
  color: var(--cf7-muted);
  font-size: 13px;
}
.wpcf7 .wpcf7-form-control.wpcf7-checkbox label,
.wpcf7 .wpcf7-form-control.wpcf7-radio label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 10px 0;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"]{
  width: auto;
  margin-right: 0;
  transform: scale(1.15);
  vertical-align: middle;
}

.wpcf7 .wpcf7-form-control.wpcf7-checkbox,
.wpcf7 .wpcf7-form-control.wpcf7-radio{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.wpcf7 input[type="file"]{
  background: #fff;
  border: 2px dashed rgba(0,0,0,0.12);
  border-radius: var(--cf7-radius);
  padding: 14px 16px;
  width: 100%;
  cursor: pointer;
}
.wpcf7 input[type="file"]:hover{
  border-color: rgba(34, 75, 53, 0.35);
}
.wpcf7 span.wpcf7-not-valid-tip{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid{
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12);
}
.wpcf7 .wpcf7-response-output{
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output{
  border-color: rgba(25, 135, 84, 0.35);
  background: rgba(25, 135, 84, 0.08);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  border-color: rgba(220, 53, 69, 0.35);
  background: rgba(220, 53, 69, 0.08);
}
.wpcf7 .wpcf7-spinner{
  margin: 12px auto 0;
  display: block;
}
.wpcf7 .ochrana-os{
  font-size: 13px;
  color: rgba(0,0,0,0.70);
  line-height: 1.5;
}
.wpcf7 .ochrana-os a{
  color: var(--cf7-border-focus);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 75, 53, 0.25);
}
.wpcf7 .ochrana-os a:hover{
  border-bottom-color: rgba(34, 75, 53, 0.55);
}
@media (max-width: 575.98px){
  .wpcf7 .form-label{
    margin-bottom: 6px;
  }

  .wpcf7 .wpcf7-form-control.wpcf7-checkbox label,
  .wpcf7 .wpcf7-form-control.wpcf7-radio label{
    margin-right: 10px;
  }

  .wpcf7 input[type="checkbox"],
  .wpcf7 input[type="radio"]{
    transform: scale(1.1);
  }
}