html {
  /* margin-top: 0px !important;
  --wp-admin--admin-bar--height: 0px !important; */
}

:root {
  --pi: 3.14159265;
  --page-scroll-progress: 0;
}
/* #wpadminbar {
  display: none !important;
} */

/* fix */
.cc-header__overlay{
  z-index: 120;
}

.e-cc-button .elementor-button-icon {
  height: 0;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.e-cc-button:not(.e-cc-button--full):hover .elementor-button-icon {
  transform: translateX(calc(8px / 2));
}

.e-cc-button.e-cc-button--link span {
  text-decoration: underline;
  text-underline-position: under;
}

.e-cc-button svg {
  width: 24px;
  height: 24px;
}
.e-cc-button * {
  display: flex;
  align-items: center;
}

.e-cc-buttons-container{
  display: grid;
  grid-auto-flow: row;
  justify-content: flex-start;
  grid-template-rows: max-content;
  align-items: center;
  flex-wrap: nowrap;
  row-gap: 24px;
}

.e-cc-button--full{
  width: auto;
}

.e-cc-button--full .elementor-button-content-wrapper{
  justify-content: space-between;
  display: flex;
  width: 100%;
}

.e-cc-tag {
  border-radius: 100px;
  padding: 4px 15px 4px 10px;
  width: fit-content;
  background-color: rgb(40, 55, 80);
}

.e-cc-tag > div {
  display: grid;
  width: fit-content;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  grid-auto-flow: column;
  grid-template-columns: auto;
}

.e-cc-tag .e-cc-tag__icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  color: white;
}

.e-cc-tag .e-cc-tag__text {
  font-size: 14px;
  font-family: "Atlas Grotesk";
  font-weight: 400;
  line-height: 120%;
  color: white;
  overflow-wrap: anywhere;
}

.elementor-widget-html {
  width: auto;
}

/* alias: obsługujemy poprawną nazwę i starą z literówką */
@media (min-width: 1024px){
  .e-cc-flying-image,
  .e-cc-flying-iamge {
    top: 50%;
    position: absolute;
    overflow: hidden;
  
    --pi: 3.14159265;
    --animation-progress: calc(
      (cos(var(--pi) * var(--element-scroll-progress)) - 1) * -1 / 2
    );
  
    --y-start: 25vh;
    --y-distance: 50vh;
  
    transform: translateY(-50%);
  
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
  }
}

@media (max-width: 1023px){
  .e-cc-flying-image img,
  .e-cc-flying-iamge img {
    width: 100% !important;
    height: 100% !important;
  }
}

.e-cc-flying-container {
  --element-scroll-progress: 0;
}

.e-cc-media-container{
  --perspective: 20;
  width: 100%;
  position: relative;
}

.e-cc-animation-container{

}

.e-cc-flying-collage{
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px){
  .e-cc-flying-collage{
    display: flex;
    --translate-z: 2;
    --translate-ratio: calc(var(--perspective) / (var(--perspective) - var(--translate-z)) - 1);
    transform: translateY(calc((50% + 50vh) * var(--translate-ratio) - (100% + 100vh) * var(--translate-ratio) * var(--element-scroll-progress, .5)));
    will-change: transform;
    width: 100%;
    position: absolute;
    height: 100%;
    display: block;
    transition: none !important;
  }
}

.e-cc-flying-collage--right{
  display: flex;
}

@media (min-width: 1024px){
  
.e-cc-flying-collage--right{
  --translate-z: 4;
  height: 100%;
  margin: 0;
  position: relative;
  width: fit-content;
  left: 0;
  max-width: 100%;
  right: 0;
  left: calc(50% - 93px);
}
}


.e-cc-flying-collage .e-cc-collage-img{
  transform: scale(.2);
  will-change: transform;
  position: absolute;
  transition: transform .75s cubic-bezier(.4, -.01, .4, 1.01) !important;
  height: auto;
  display: flex;
  overflow: unset;
  max-height: 100%;
  max-width: 100%;
  line-height: 0;
}
.e-cc-flying-collage.is-inview .e-cc-collage-img{
  transform: scale(1);
}


.e-cc-flying-collage .e-cc-collage-img--first{
  right: calc(50% + 250px);
  top: 244px;
  transform-origin: right top;
  transition-delay: .1s;
  width: 206px;
  aspect-ratio: 0.79;
}

.e-cc-flying-collage .e-cc-collage-img--sec{
  right: calc(50% + 280px);
  top: 124px;
  transform-origin: right bottom;
  transition-delay: 50ms;
  width: 162px;
  aspect-ratio: 0.97;
}

.e-cc-flying-collage .e-cc-collage-img--third{
  right: calc(50% - 70px);
  top: 24px;
  transform-origin: left;
  width: 374px;
  aspect-ratio: 0.79;
}

.e-cc-flying-collage.e-cc-flying-collage--right .e-cc-collage-img--main{
  line-height: 0;
  max-height: 100%;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1.24;
  overflow: unset;
  display: flex;
  height: auto;
  width: 100%;
  transition: transform .75s cubic-bezier(.4,-.01,.4,1.01) !important;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .3));
  max-width: 100%;
  transform: translateY(300px);
  width: 595px;
}

.e-cc-flying-collage.is-inview.e-cc-flying-collage--right .e-cc-collage-img--main{
  transform: translateY(0);
}
.e-cc-scolling-x-container{
  overflow-x: scroll;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.e-cc-scolling-x-container__carousel{
  column-gap: 24px !important;
  display: grid !important;
  width: fit-content !important;;
  grid-auto-flow: column !important;;
  grid-auto-columns: 300px !important;;
}
.e-cc-scolling-x-container__carousel .swiper{
  width: 100%;
  margin-right: unset !important;
  margin-left: unset !important;
  overflow: unset !important;
  display: flex !important;
}

@media (min-width: 768px) {
  .e-cc-scolling-x-container__carousel{
      grid-auto-columns: 720px !important;
  }
}

@media (min-width: 1280px) {
  .e-cc-scolling-x-container__carousel{
      padding: 0 max(48px, calc(50% - 550px));
  }
}

.e-cc-scolling-x-container__item{
  --quote-card-border-radius: 16px;
  align-items: center;
  background-color: #1c1d21;
  border-radius: 16px;
  column-gap: 8px;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  justify-items: center;
  row-gap: 8px;
  grid-auto-flow: column;
  grid-template-columns: 275px 1fr;

  filter: blur(20px);
  opacity: 0;
  transform: scale(.8);
  transition: all .5s calc(.15s + var(--dwg-iteration-index, 0) * 50ms) ease-in-out;
}

.e-cc-scolling-x-container__item.is-inview{
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 1024px) {
  @supports (aspect-ratio: 1/1) {
    .e-cc-flying-mini {
      /* start przesunięcia: od progress 0.5 do 1.0 */
      --mini-start: 0.5;
      --mini-range: calc(1 - var(--mini-start));

      /* mapowanie: (p - start) / range -> clamp 0..1 */
      --mini-progress: clamp(
        0,
        calc(
          (var(--element-scroll-progress, 0) - var(--mini-start)) /
            (var(--mini-range) + 0.000001)
        ),
        1
      );

      /* ile ma przesunąć (dodatnie = w dół) */
      --mini-distance: 10vh;

      transform: translateY(calc(var(--mini-distance) * var(--mini-progress)));
      will-change: transform;
    }
  }
}

.e-cc-ease-container{
    --top-animation-progress: min(max(0, calc((var(--element-scroll-progress, 1) - 0.15) / 0.12)), 1);
    --p0: 0;
    --p1: 0;
    --p2: 0.66;
    --p3: 1;
    --top-animation-progress-ease: calc(var(--p0) * (1 - var(--top-animation-progress)) * (1 - var(--top-animation-progress)) * (1 - var(--top-animation-progress)) + var(--p1) * 3 * var(--top-animation-progress) * (1 - var(--top-animation-progress)) * (1 - var(--top-animation-progress)) + var(--p2) * 3 * var(--top-animation-progress) * var(--top-animation-progress) * (1 - var(--top-animation-progress)) + var(--p3) * var(--top-animation-progress) * var(--top-animation-progress) * var(--top-animation-progress));
    max-width: 100%;
    transform: translateZ(0);
    width: 900px;
    transition: none !important;
}

.e-cc-flying-container__item--opacity{
  opacity: var(--top-animation-progress-ease);
  will-change: opacity;
  transition: none !important;
}
.e-cc-flying-container__item--transform-xl{
  transform: translateY(calc(80px * (1 - var(--top-animation-progress-ease))));
  will-change: transform;
  transition: none !important;
}

.e-cc-flying-container__item--transform-sm{
  transform: translateY(calc(40px * (1 - var(--top-animation-progress-ease))));
  will-change: transform;
  transition: none !important;
}




@media (min-width: 1024px) {
  @supports (aspect-ratio: 1/1) {
    .e-cc-flying-image,
    .e-cc-flying-iamge {
      transition: none !important;

      transform: translateY(
        calc(
          -50% + var(--y-start) - (var(--y-distance) * var(--animation-progress))
        )
      );
      will-change: transform;
    }
  }
}


  .e-cc-scroll-zoom__container{
    position: absolute;
    background-image: linear-gradient(180deg, #292c31, #000);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }


@media (min-width: 1024px){
  .e-cc-scroll-zoom__container{
    position: absolute;
    background-image: linear-gradient(180deg, #292c31, #000);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    --animation-progress: min(max(0,calc(var(--element-scroll-progress, 1)/0.8)),1);
    --p0: 0;
    --p1: 0;
    --p2: 0.66;
    --p3: 1;
    --animation-progress-ease: calc(var(--p0)*(1 - var(--animation-progress))*(1 - var(--animation-progress))*(1 - var(--animation-progress)) + var(--p1)*3*var(--animation-progress)*(1 - var(--animation-progress))*(1 - var(--animation-progress)) + var(--p2)*3*var(--animation-progress)*var(--animation-progress)*(1 - var(--animation-progress)) + var(--p3)*var(--animation-progress)*var(--animation-progress)*var(--animation-progress));
    --horizontal-offset: calc((1 - var(--animation-progress-ease))*0.8);
    --vertical-offset: calc((1 - var(--animation-progress-ease))*0.9);
    transform: scale(calc(var(--horizontal-offset) + var(--animation-progress-ease)),calc(var(--vertical-offset) + var(--animation-progress-ease)));
    transition: none !important;
  }
}


@media (min-width: 1024px){
  .e-cc-scroll-zoom__container{
    border-radius: 20px;
  }
}

.e-cc-flying-image--right,
.e-cc-flying-iamge--right {
  right: 0;
  --y-start: 25vh;
  --y-distance: 50vh;
  aspect-ratio: 0.75;
  display: none;
}

.e-cc-flying-image--left,
.e-cc-flying-iamge--left {
  left: 0;
  --y-start: 50vh;
  --y-distance: 100vh;
  aspect-ratio: 1.6;
}




@supports (aspect-ratio:1/1) {
  .e-cc-flying-image--left,
.e-cc-flying-iamge--left {
      filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .1));
  }
}

@media (min-width: 1024px){
  .e-cc-flying-image--right,
.e-cc-flying-iamge--right{
  display: flex;
}
}

.e-cc-container::before{
height: 72px;
top: -72px;
background-color: inherit;
content: "";
left: 0;
overflow: visible;
position: absolute;
right: 0;
width: 100%;
z-index: -1;
}

.e-cc-container--sm::before{
  height: 72px;
  top: -72px;
  background-color: inherit;
  content: "";
  left: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1;
}

.e-cc-container--sm::after{ 
  height: 72px;
  top: 100%;
  background-color: inherit;
  content: "";
  left: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1;
}

.e-cc-container--top.e-cc-container::before{
  top: 0px;
}

.e-cc-container::after{
  height: 72px;
  top: 100%;
  background-color: inherit;
  content: "";
  left: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1;
}


@media (min-width: 1024px){
  .e-cc-container::after{
      height: 96px;
  }
}
@media (min-width: 1280px){
  .e-cc-container::after{
      height: 120px;
  }
}
@media (min-width: 1024px){
  .e-cc-container::before{
      height: 96px;
      top: -96px;
  }
}

@media (min-width: 1280px){
  .e-cc-container::before{
      height: 120px;
      top: -120px;
  }
}




.e-cc-gird-image{
  aspect-ratio: 1.7777777777777777;
  overflow: unset;
}
.e-cc-gird-image img {
  max-width: unset;
}

main h1{
  text-wrap: balance;
  overflow-wrap: anywhere;
}

span.elementor-button-text{
  text-align: left !important;
}

span.elementor-button-content-wrapper{
  height: 20px; 
}

.e-cc-flex-container{
  height: 100% !important;
  display: flex;
}

.e-cc-self-stretch { align-self: stretch; }

/* 1. Usunięcie domyślnego focusa wewnątrz <main> */
main a:focus,
main button:focus,
main input:focus,
main select:focus,
main textarea:focus {
    box-shadow: none;
    outline: none;
}

/* 2. Globalny styl focus-visible (dla klawiatury) tylko w <main> */
main a:focus-visible,
main button:focus-visible,
main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
    box-shadow: 0 0 0 3px #428bff;
    outline: none;
}

/* 3. Reset tła dla radio i checkbox wewnątrz <main> */
main input[type="radio"]:checked,
main input[type="checkbox"]:checked {
    background-image: none !important;
}

/* MOSTEK: jeśli dasz class="e-cc-card" na UL,
   to UL zachowuje się jak .e-cc-bullet-list */
   main ul{
    margin: 0;
    padding-left: 1.25rem !important;
    list-style: disc outside !important;
    list-style-type: disc !important;
    /* color: #fff; */
  }
  
  /* MOSTEK: LI w środku takiego UL zachowują się jak .e-cc-bullet-item */
  main ul > li{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
  }
  
  /* odstępy między punktami */
  main ul > li + li{
    margin-top: 12px;
  }
  
  /* wygląd kropki */
  main ul ::marker{
    color: currentColor;
    font-size: 0.75em;
  }
  
  /* bo u Ciebie tekst jest w <p> w środku <li> — usuń domyślne marginesy */
  main ul > li > p{
    margin: 0;
  }
  
  main ol{
    margin: 0;
    padding-left: 1.25rem !important;
    list-style: decimal outside !important;
    list-style-type: decimal !important;
  }
  
  /* MOSTEK: LI w środku takiego OL zachowują się jak .e-cc-bullet-item */
  main ol > li{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
  }
  
  /* odstępy między punktami */
  main ol > li + li{
    margin-top: 12px;
  }
  
  /* wygląd numeru */
  main ol ::marker{
    color: currentColor;
    font-size: inherit;
    font-weight: 400;
  }
  
  /* bo u Ciebie tekst jest w <p> w środku <li> — usuń domyślne marginesy */
  main ol > li > p{
    margin: 0;
  }
  
  main strong{
    font-weight: 500;
  }
  p, h1, h2, h3, h4, h5, h6, li, span, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
  }

  button.fn-submit.forminator-button.forminator-button-submit{
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    padding: 16px !important;
    transition: background-color 0.10s !important;
    width: 100% !important;

  }

  .fn-text-sm{
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 16px !important;
  }

  .fn-text-sm a{
    text-decoration: underline !important;
    color: #0061fe !important;
  }

  body.admin-bar>.forminator-select.forminator-select-dropdown-container--open{
    margin-top: 0px !important;
  }
@media (max-width: 768px){
  .grid-exception{
    width: 100%;
    display: flex;
  }
  .grid-exception > span{
    width: 50%;
  }
  .grid-exception > div{
    color: white;
    margin: 0px;
    width: 50%;
  }
} 
 @media (min-width: 1024px){
  .e-cc-self-stretch img{
    position: absolute !important;
    left: 0px;
    right: 0px;
  }
 }
