body {
  margin: 0;
  min-height: 100vh;
  background-size: 110%;
  transition: background-size 0.2s linear; /* płynność */
}


body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 25%;
  width: 1px;
  height: 100%;
  background-color: #333; /* biała linia */
  box-shadow:
    25vw 0 0 #333,  /* linia w 50% */
    50vw 0 0 #333;  /* linia w 75% */
  pointer-events: none; /* żeby nie przeszkadzało w klikaniu */

}

#bg-anim {
  position: fixed;
  inset: 0;
  z-index: -1; /* pod całą treścią */
  background-image: url("https://wwwcreozpl9dcce.zapwp.com/q:u/r:0/wp:0/w:1/u:https://dev.creoz.pl/wp-content/uploads/2025/09/bg_cs2.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform-origin: center center;
  animation: breathe-scale 18s ease-in-out infinite;
  will-change: transform;
}

/* „Oddychanie” skalą */
@keyframes breathe-scale {
  0% {
    transform: scale(1.07);
    opacity: 0.8;
    rotate: (0 deg);
  }
  20% {
    transform: scale(1.11);
    opacity: 0.5;
    rotate: (1 deg);

  } /* np. +5% */
  50% {
    transform: scale(1.07);
    opacity: 0.9;
    rotate: (0 deg);

  }
  70% {
  transform: scale(1.07);
  opacity: 0.5;
  rotate: (-1 deg);

}
100% {
  transform: scale(1.07);
  opacity: 0.8;
  rotate: (0 deg);

}

}

/* Ukryj całą kartę natychmiast — zabezpieczenie przed migotaniem */
.kb-blocks-portfolio-grid-item.cs-hide-c2a {
  visibility: hidden !important;
}

/* Ukryj same obrazki w karcie C2A */
.kb-blocks-portfolio-grid-item.cs-hide-c2a img {
  display: none !important;
}

/* Fade-in dla wstawionego elementu */
.cs-fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.cs-fade-in.is-on {
  opacity: 1;
  transform: translateY(0);
}

.csxqa-item {
  margin-bottom: 30px;
}

.csxqa h2 {
  margin-bottom: 40px !important;
}


.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6 {
  margin: .3em 0 .3em;
}

a {
  transition: ease-in all 0.3s;
}
a:hover{
  transition: ease-in all 0.3s;
}

.menu-mob .wp-block-kadence-off-canvas-trigger:focus {
  background: rgba(255,255,255,0.04);
}

.menu-mob .wp-block-kadence-off-canvas-trigger:hover {
  background:linear-gradient(45deg,var(--global-palette5) 0%,var(--global-palette6) 100%);
}


.con-ico{
  position: relative;
top: 5px;
right: 0px;
}

.rank-math-breadcrumb .last::after {
  content: "";
  display: inline-block !important;
  height: 1px;
  width: 30px;
  background: #666;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -2px;
}

.rank-math-breadcrumb p {
  text-wrap: balance;
}


.rank-math-breadcrumb .last {
  color: #ccc;
}
.rank-math-breadcrumb a, .rank-math-breadcrumb p {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  text-decoration: none;
  text-transform: uppercase;
}

.rank-math-breadcrumb .separator {
  margin-left: 3px;
}

.top-txt .numer .kb-adv-text-inner {
  transition: all ease-in-out 0.5s;
  position: relative;
  top: 0;
  z-index: -2;
  opacity: 0.08;
  
}
.top-txt:hover .numer .kb-adv-text-inner {
  position: relative;
  transition: all ease-in-out 0.5s;
  top: -10px;
  opacity:0.4;
}

.top-txt h3 {
  position: relative;
  z-index: 3;
}


.logo-grid{
  position: relative;
}
 
.logo-grid img {
  opacity: 0.35;
  transition: opacity 0.4s ease-in;
}
.logo-grid img.is-active,
.logo-grid img:hover {
  opacity: 0.7;
  transition: opacity 0.4s ease-in;

}

.kb-adv-form-message[role="alert"] {
  display: none;
}
.kb-form-basic-style input[type="checkbox"] {
  border-color: #757575 !important;
  border-radius: 0px !important;
}

.kt-modal-overlay .kt-modal-close {
  right: 14px !important;
  top: 14px !important;
  border-radius: 0rem;
  padding: 5px !important;
}

.kt-modal-container {
  overflow-y: visible !important;
}


.rank-math-breadcrumb a {
  color:var(--global-palette4);}

  .rank-math-breadcrumb a:hover {
  color:var(--global-palette6);}

#cs-nav {
  position: fixed;
  left: 0;
  right: 0;
}

.tippy-box {
  width: max-content;
}


.site-bottom-footer-inner-wrap {
  position: fixed;
  transform: rotate(-90deg) translateX(200px) translateY(-135px);
  bottom: 0;
  left: 0;
  padding: 0;
}

.sm-li, .sm-bf, .sm-ig {
  margin: 0px 30px;
}

.sm-li a:hover, .sm-fb a:hover, .sm-ig a:hover {
  text-decoration: none !important;
  color: #fff;
  background-color: var(--global-palette6) ;
  transition: ease-in all 0.4s;
  padding:0px 4px;
}

.sm-li a, .sm-fb a, .sm-ig a {
  text-decoration: none !important;
  transition: ease-in all 0.4s;
  cursor: pointer;
  padding:0px 4px;
}

.more {
    position: absolute;
    right: 6%;
    bottom:-20px;
}
.more svg, .more2 svg {
  transition: ease-in all 0.4s;
}
.more:hover svg, .more2:hover svg {
  transition: ease-in all 0.2s;
  transform: rotate(-90deg) scale(1);
  }

 .top-txt:hover .t_field {
// padding: 20px 12px 22px 24px !important;
//margin: -4px !important;
 transition: ease-in-out all 0.4s;
 //background-color: rgba(255,255,255,0.04) ;
}

.more2:hover .btn-txt mark {
 transition: ease-in-out all 0.4s;
 color: rgba(255,255,255,1) ;
}

.more2 .btn-txt mark {
 transition: ease-in-out all 0.4s;
}

 .more2:hover .btn-txt {
 transition: ease-in-out all 0.4s;
 background-color: rgba(255,255,255,0.04) ;
 padding-left:20px !important;
}
 .more2 .btn-txt {
 transition: ease-in-out all 0.4s;
}
.top-txt .t_field {
 transition: ease-in-out all 0.3s;
}

.top-txt:hover .ico-plus .kb-svg-icon-wrap {
  left: -31px;
  top: -31px;
  transition: ease-in-out all 0.3s;
}

.top-txt .ico-plus .kb-svg-icon-wrap {
  transition: ease-in-out all 0.4s;
  position: absolute;
  left: -25px;
  top: -25px;
}
.top-txt:hover .ico-plus2 .kb-svg-icon-wrap {
  right: -31px;
  bottom: -31px;
  transition: ease-in-out all 0.3s;
}

.top-txt .ico-plus2 .kb-svg-icon-wrap {
  transition: ease-in-out all 0.4s;
  position: absolute;
  right: -25px;
  bottom: -25px;
}

.wp-block-kadence-off-canvas .kb-off-canvas-overlay, .kt-modal-overlay {
  background-color: rgba(0,0,0,.3) !important;
  transition: opacity .25s ease-in-out;
 backdrop-filter: blur(5px);
}


.kb-blocks-portfolio-grid-item {
  background:none !important;
}
.kb-blocks-portfolio-img-hover-zoomin .kb-blocks-portfolio-grid-item:hover .kadence-portfolio-image img {
  transform: scale(1.05) rotate(1deg);
}

.con-ico span.kb-svg-icon-wrap{
  position: relative;
  z-index: 0;              /* tworzy kontekst układania */
  background: inherit;
  overflow: hidden;        /* jeśli masz border-radius */
}

.con-ico span.kb-svg-icon-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,var(--global-palette5) 0%,var(--global-palette6) 100%);
  opacity: 0;              /* start: niewidoczne */
  transition: opacity .5s ease;  /* animujemy tylko opacity */
  pointer-events: none;
  z-index: -1;             /* <— nakładka POD ikoną */
  /* opcjonalnie: border-radius: inherit; */
}

.con-ico:hover span.kb-svg-icon-wrap::before{
  opacity: 1;              /* płynne wejście gradientu */
}




@keyframes dotPulse {
  0%, 75%, 100% { opacity: 0; transform: translate(0,0); }
  35% { opacity: 1; transform: translate(0,-6px); }
}

.con-ico { color:#fff; }              /* kolor kropek (currentColor) */
.con-ico .dot{
  fill: currentColor;
  opacity: 0;                           /* domyślnie ukryte */
  transform-box: fill-box;              /* klucz dla SVG */
  transform-origin: center;
}

.con-ico:hover .dots .dot{
  animation: dotPulse 1.4s ease-in-out infinite;
}
.con-ico:hover .dots .dot:nth-child(2){
  animation-delay: .35s;                /* sekwencja */
}



.kb-blocks-portfolio-grid-item:hover {
  //border-radius: 5px;
  transition: ease-in-out all 0.3s;
}
.kb-blocks-portfolio-grid-item {
  transition: ease-in-out all 0.3s;
}

@media screen and (min-width: 1920px) {
  .wide > .kt-row-column-wrap {
  max-width: 60%;
}

.c2a-h > .kt-inside-inner-col {
  min-height: 470px !important;
}
}

@media screen and (max-width: 760px) {
#scrollline-progress {
  top: 10%;
  left: 15px;}

.kb-off-canvas-inner-wrap {
    max-width: 80% !important;
  }


body {
  position: relative; /* potrzebne do pseudo-elementów */
  background-color: #222;
  background-image:none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
background: url("https://wwwcreozpl9dcce.zapwp.com/q:u/r:0/wp:0/w:1/u:https://dev.creoz.pl/wp-content/uploads/2025/09/bg_cs_mob.svg");
    z-index: -1;
    pointer-events: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
  }



#cs-nav {
  position: relative;
  left: 0;
  right: 0;
}

h2.crt-wrap {
  line-height: 0.5 !important;
}
.site-bottom-footer-inner-wrap {
  bottom: -20px;
  left: -5px;}