.elementor-kit-6{--e-global-color-primary:#22201E;--e-global-color-secondary:#000000;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FCCA65;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-secondary );background-image:url("https://axisdetailing.pl/wp-content/uploads/2026/02/tlo-v11.jpg");background-position:center center;background-repeat:repeat-y;background-size:contain;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   GOLD GRADIENT SYSTEM (Elementor-friendly) — 6 klas
   ========================================================= */

/* 1) USTAWIENIA GLOBALNE */
:root{
  --gold-base: #0f0f0f;
  --gold-radius: 0px;
  --gold-border-width: 2px;     /* domyślna grubość kontenerów */
  --gold-image-border-width: 6px; /* domyślna grubość obrazów */
  --gold-speed: 8s;
  --gold-ease: ease-in-out;
--gold-divider-height: 3px;
  --gold-grad: linear-gradient(
    120deg,
    #e7aa51,
    #ffe499,
    #8d5a1b,
    #e7aa51,
    #ac7031
  );

  --gold-size-border: 400% 400%;
  --gold-size-fill:   300% 300%;

  --gold-hover-dark: rgba(15,15,15,0.28); /* przyciemnienie hover */
  --gold-hover-solid: #282828;            /* jeśli chcesz solid na hover */
}



/* 2) ANIMACJE */
@keyframes goldFlowBorder {
  0%   { background-position: 0% 0%, 0% 50%; }
  50%  { background-position: 0% 0%, 100% 50%; }
  100% { background-position: 0% 0%, 0% 50%; }
}
@keyframes goldFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================================================
   gold-border — regulowana grubość
   ========================================================= */

.gold-border{
  position: relative;
  border-radius: var(--gold-radius);
  isolation: isolate;
}

.gold-border::before{
  content:"";
  position:absolute;
  inset:0;
  padding: var(--gold-border-width);
  border-radius: inherit;

  background: var(--gold-grad);
  background-size: var(--gold-size-border);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index:-1;
}

/* =========================================================
   gold-border-image — kontenery z ramką jak gold-image (grubość 6px)
   Dodaj klasę do kontenera/sekcji: gold-border-image
   ========================================================= */
.gold-border-image{
  position: relative;
  border-radius: var(--gold-radius);
  isolation: isolate;
}

.gold-border-image::before{
  content:"";
  position:absolute;
  inset:0;
  padding: var(--gold-image-border-width);
  border-radius: inherit;

  background: var(--gold-grad);
  background-size: var(--gold-size-border);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index:-1;
}

/* =========================================================
   2. gold-fill — kontenery z wypełnieniem gradientowym
   Dodaj klasę do kontenera/sekcji: gold-fill
   ========================================================= */
.gold-fill{
  border-radius: var(--gold-radius);
  background: var(--gold-grad);
  background-size: var(--gold-size-fill);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;
}

/* =========================================================
   3. gold-fill-button — kontener jak przycisk (hover ściemnia, 0s)
   Dodaj klasę do kontenera/sekcji: gold-fill-button
   ========================================================= */
.gold-fill-button{
  border-radius: var(--gold-radius);
  background: var(--gold-grad);
  background-size: var(--gold-size-fill);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  position: relative;
  cursor: pointer;
  transition: none !important; /* 0s */
}

/* overlay na hover (przyciemnienie) */
.gold-fill-button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: var(--gold-hover-dark);
  opacity: 0;
  pointer-events:none;
  transition: none !important; /* 0s */
}
.gold-fill-button:hover::after{ opacity: 1; }

/* żeby treść była nad overlay */
.gold-fill-button > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   4. gold-image — ramka wokół widgetu Obraz (regulowana)
   Dodaj klasę do widgetu Image: gold-image
   ========================================================= */

/* usuwa szczelinę pod obrazkiem */
.gold-image .elementor-widget-container{
  line-height: 0;
}

/* dajemy ramkę na figure jeśli istnieje, a jak nie – na link/img */
.gold-image figure,
.gold-image a,
.gold-image img{
  display: inline-block;
  max-width: 100%;
  border-radius: var(--gold-radius);
}

/* RAMKA (gradient + grubość z --gold-image-border-width) */
.gold-image figure,
.gold-image a,
.gold-image img{
  border: var(--gold-image-border-width) solid transparent;

  background:
    linear-gradient(var(--gold-base), var(--gold-base)) padding-box,
    var(--gold-grad) border-box;

  background-size: 100% 100%, var(--gold-size-border);
  animation: goldFlowBorder var(--gold-speed) var(--gold-ease) infinite;

  box-shadow: inset 0 0 0 1px rgba(255,228,153,0.15);
}

/* jeśli jest figure -> nie dubluj ramki na img w środku */
.gold-image figure img{
  border: 0 !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
  display: block;

  /* radius pomniejszony o grubość ramki */
  border-radius: calc(max(0px, var(--gold-radius) - var(--gold-image-border-width)));
}

/* jeśli obraz jest w linku <a> -> nie dubluj na img */
.gold-image a img{
  border: 0 !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
  display: block;
  border-radius: calc(max(0px, var(--gold-radius) - var(--gold-image-border-width)));
}

/* =========================================================
   5. gold-text — gradientowy tekst bez ucinania PL znaków
   Dodaj klasę do nagłówka/tekstu (widget lub element): gold-text
   ========================================================= */
.gold-text,
.gold-text *{
  overflow: visible !important;
}

/* jeśli klasa jest na wrapperze widgetu — to targetujemy typowe elementy tekstowe */
.gold-text,
.gold-text .elementor-heading-title,
.gold-text .elementor-widget-container,
.gold-text .elementor-widget-container p,
.gold-text .elementor-widget-container span{
  display: inline-block;
  line-height: 1.25 !important;
}

/* gradient tekstu */
.gold-text,
.gold-text .elementor-heading-title,
.gold-text .elementor-widget-container p,
.gold-text .elementor-widget-container span{
  background: var(--gold-grad);
  background-size: var(--gold-size-fill);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   6. gold-rest — “reszta” (np. widget Button) gradient + hover ciemniej, 0s
   Dodaj klasę do dowolnego widgetu: gold-rest
   ========================================================= */

/* bazowo: gradientowe tło na typowych elementach UI wewnątrz widgetu */
.gold-rest .elementor-button,
.gold-rest a.elementor-button,
.gold-rest button,
.gold-rest .e-con-inner > a,
.gold-rest .elementor-widget-container > a{
  background: var(--gold-grad) !important;
  background-size: var(--gold-size-fill) !important;
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite !important;

  border: none !important;
  border-radius: var(--gold-radius) !important;

  transition: none !important; /* 0s */
}

/* hover: delikatne przyciemnienie (overlay-em się nie da na button bez pseudo, więc robimy solid) */
.gold-rest .elementor-button:hover,
.gold-rest a.elementor-button:hover,
.gold-rest button:hover{
  background: var(--gold-hover-solid) !important;
  animation: none !important;
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .gold-border,
  .gold-fill,
  .gold-fill-button,
  .gold-image figure,
  .gold-image img,
  .gold-text,
  .gold-text .elementor-heading-title,
  .gold-rest .elementor-button,
  .gold-rest a.elementor-button,
  .gold-rest button{
    animation: none !important;
  }
}

/* =========================================================
   FIX: gold-text nie ucina polskich znaków (ź/ś/ł/ą…)
   ========================================================= */

/* Zdejmujemy wszystko, co może ciąć */
.gold-text,
.gold-text *{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  clip-path: none !important;
}

/* Najczęściej ucina .elementor-heading-title (Heading widget) */
.gold-text .elementor-heading-title,
.gold-text{
  display: inline-block !important;

  /* DAJEMY WIĘCEJ PRZESTRZENI */
  line-height: 1.1 !important;     /* jeśli dalej minimalnie ucina -> 1.4 */
  padding-top: 0.10em !important;   /* kluczowe dla “ź” */
  padding-bottom: 0.12em !important;

  /* utrzymanie gradientu */
  background: var(--gold-grad);
  background-size: var(--gold-size-fill);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Jeśli klasa siedzi na wrapperze widgetu, a nie na samym tekście */
.gold-text .elementor-widget-container{
  overflow: visible !important;
  height: auto !important;
}

/* =========================================================
   gold-button — mocniejsze ściemnienie + zmiana koloru tekstu
   ========================================================= */

.gold-button .elementor-button{
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: var(--gold-radius);

  background: var(--gold-grad) !important;
  background-size: var(--gold-size-fill) !important;
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite !important;

  color: #000 !important; /* domyślnie czarny tekst */

  transition: none !important; /* 0s */
}

/* mocniejsze przyciemnienie */
.gold-button .elementor-button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(0,0,0,0.55); /* ← mocniej */
  opacity: 0;
  pointer-events:none;
  transition: none !important;
}

.gold-button .elementor-button:hover::after{
  opacity: 1;
}

/* tekst nad overlay */
.gold-button .elementor-button > *{
  position: relative;
  z-index: 1;
}

/* tekst biały na hover */
.gold-button .elementor-button:hover{
  color: #fff !important;
}

/* =========================================================
   gold-button-v2 — nie nadpisuje radiusu z ustawień widgetu
   ========================================================= */

.gold-button-v2 .elementor-button{
  position: relative !important;
  overflow: hidden !important;
  border: none !important;

  /* NIE ustawiamy border-radius — Elementor ma swoje */
  background: transparent !important;
  color: #2f2f2f !important;

  transition: none !important; /* 0s */
}

/* gradient jako warstwa pod spodem */
.gold-button-v2 .elementor-button::before{
  content:"";
  position:absolute;
  inset:0;

  /* bierze radius z buttona ustawionego w Elementorze */
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    #e7aa51,
    #ffe499,
    #8d5a1b,
    #e7aa51,
    #ac7031
  );
  background-size: 100% 600%;
  background-position: 50% 0%;
  animation: goldFlowVertical 8s ease-in-out infinite !important;

  pointer-events:none;
  z-index: 0;
}

/* przyciemnienie hover */
.gold-button-v2 .elementor-button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;

  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events:none;

  transition: none !important; /* 0s */
  z-index: 1;
}

.gold-button-v2 .elementor-button:hover::after{
  opacity: 1;
}

/* tekst na wierzchu */
.gold-button-v2 .elementor-button > *{
  position: relative;
  z-index: 2;
}

.gold-button-v2 .elementor-button:hover{
  color: #fff !important;
}

@keyframes goldFlowVertical{
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

/* =========================================================
   gold-divider — animowany gradient (działa niezależnie od border-top)
   ========================================================= */

.gold-divider .elementor-divider{
  position: relative;
}

/* wyłącz domyślną linię (border) Elementora */
.gold-divider .elementor-divider-separator{
  position: relative !important;
  display: block !important;
  border-top: none !important;
  background: transparent !important;
  height: var(--gold-divider-height, 2px) !important;
  overflow: hidden !important;
}

/* właściwa linia jako pseudo-element */
.gold-divider .elementor-divider-separator::before{
  content:"";
  position: absolute;
  inset: 0;

  background: var(--gold-grad);
  background-size: var(--gold-size-fill);
  background-position: 0% 50%;
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite !important;

  pointer-events: none;
}

/* =========================================================
   gold-border-image-rounded — wersja z zaokrąglonymi rogami
   ========================================================= */

.gold-border-image-rounded{
  position: relative;
  border-radius: 35px; /* możesz zmienić */
  isolation: isolate;
  overflow: hidden;
}

.gold-border-image-rounded::before{
  content:"";
  position:absolute;
  inset:0;
  padding: var(--gold-image-border-width);
  border-radius: inherit;

  background: var(--gold-grad);
  background-size: var(--gold-size-border);
  animation: goldFlow var(--gold-speed) var(--gold-ease) infinite;

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index:-1;
}

/* =========================================================
   gold-card — ruchomy gradient + border #FCCA65
   ========================================================= */

.gold-card{
  border: 2px solid #FCCA65;
  border-radius: 35px;
  overflow: hidden;

  background: linear-gradient(
    120deg,
    #0b0b0b,
    #1a1408,
    #7a5215,
    #7a5215,
    #1a1408,
    #0b0b0b
  );

  background-size: 400% 400%;
  animation: goldFlow 8s ease-in-out infinite;
}/* End custom CSS */