/*
  [_spis] 
    [_var] 
      [_fonts_ladowanie]
      [_font_family]
      [_font_size]
      [_container] bez gutter
      [_spacing]
      [_icon_svg]
      [_radius]
      [_shaddow]
      [_grid]


      [_kolory]
      [_colors_theme] 
        [_default_theme]
      

    [_atomy]
        [_basic]
        [_container_class] max 1440px  
        [_gap_class]
        [_displayheadings]
        [_prose]
        [_links]
        [_skip_link]
        [_buttons] 
        [_radius_class]
        [_shaddow_class]
        [_owl_class]
        [_single_typo_class]
        [_formularze]
        [_utility_class] 
        [_wyrozniki_branzy]

    [_organizmy]
        [_grid_class]
        [_flex_class]

    [_molekuly]
        [_section_headings] 
        [_lista_z_ikonami]
        [_karta_ikona_po_lewej_tekst_po_prawej]
        [_card__counter]
        [_image__card]
        [_breadcrumbs]
        [_table2]
        [_opinie1]
        [_opinie2]
        [_social_list]
        [_accordion]
    

  */ 



/*[_var] */

/*[_fonts_ladowanie]*/

@font-face{
  font-family:"Work Sans";
  font-weight:1 1000;
  font-style:normal;
  src:url("../fonts/Work_Sans/WorkSans-VariableFont_wght.ttf") 
  format("truetype");
  font-display:swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}



:root{
  
/*[_font_family]*/

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  
  --font-family-heading: "Poppins", var(--font-ui);
  --font-family-text: "Work Sans", var(--font-ui); 

  /*[_font_size] */
  /*czcionke ustaw w konfiguracji globalnej, z lokalna czcionka*/


  /* DISPLAY – do hero / mocnych nagłówków (klasy .display-1 ... .display-6) */

   --display-1-font-size: clamp(3rem, 6.5vw, 5rem);
  --display-1-font-weight: 600;
  --display-1-line-height: 1.12;
  --display-1-mt: 0;
  --display-1-mb: 0;

  --display-2-font-size: clamp(2.5rem, 5.0vw, 3.5rem);
  --display-2-font-weight: 600;
  --display-2-line-height: 1.14;
  --display-2-mt: 0;
  --display-2-mb: 0.5rem;

  --display-3-font-size: clamp(2.4rem, 4.0vw, 2.6rem);
  --display-3-font-weight: 600;
  --display-3-line-height: 1.3;
  --display-3-mt: 0;
  --display-3-mb: 0;

  --display-4-font-size: clamp(2.1rem, 3.0vw, 2.4rem);
  --display-4-font-weight: 600;
  --display-4-line-height: 1.4;
  --display-4-mt: 0;
  --display-4-mb: 0;

  --display-5-font-size: clamp(1.6rem, 2.4vw, 1.7rem);
  --display-5-font-weight: 600;
  --display-5-line-height: 1.5;
  --display-5-mt: 0;
  --display-5-mb: 0;

  --display-6-font-size: 1.6rem;
  --display-6-font-weight: 500;
  --display-6-line-height: 1.6;
  --display-6-mt: 0;
  --display-6-mb: 0;


--h1-font-size: clamp(2.2rem, 3.2vw, 2.9rem);
  --h1-font-weight: 700;
  --h1-line-height: 1.18;

  --h2-font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  --h2-font-weight: 700;
  --h2-line-height: 1.22;

  --h3-font-size: clamp(1.7rem, 2.1vw, 2.0rem);
  --h3-font-weight: 700;
  --h3-line-height: 1.28;

  --h4-font-size: clamp(1.6rem, 1.7vw, 1.8rem);
  --h4-font-weight: 700;
  --h4-line-height: 1.32;

  --h5-font-size: clamp(1.6rem, 1.4vw, 1.7rem);
  --h5-font-weight: 700;
  --h5-line-height: 1.36;

  --h6-font-size: clamp(1.6rem, 1.2vw, 1.6rem);
  --h6-font-weight: 700;
  --h6-line-height: 1.4;

  --body-text-font-size: 1.6rem;
  --body-text-font-weight : 500;
  --body-text-line-height: 1.5;

  --button-font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.3571)), 1.8rem);

  
  
  /*[_container] bez gutter*/
    --min-width: min(1200px, 100vw - 4rem);



  /*[_spacing] */
  
  /* --- UI / MICRO (STABLE – bez clamp) --- */
  --space-1: 0.4rem;   /* 4px  → icon ↔ text, checkbox, badge */
  --space-2: 0.8rem;   /* 8px  → small UI gaps, button inner spacing */
  --space-3: 1.2rem;   /* 12px → label ↔ input, list items */
  --space-4: 1.6rem;   /* 16px → base UI spacing */

  /* --- CONTENT / FLOW (SOFT clamp) --- */
  --space-5: clamp(2rem, 2.5vw, 2.4rem);
  /* ~20–24px → paragraphs, card padding, text blocks */

  --space-6: clamp(2.4rem, 3vw, 3.2rem);
  /* ~24–32px → heading ↔ content, block separation */

  /* --- SECTIONS / LAYOUT (FULL clamp) --- */
  --space-7: clamp(4.8rem, 4vw, 6.4rem);
  /* 48–64px → small section gap */

  --space-8: clamp(6.4rem, 6vw, 9.6rem);
  /* 64–96px → default section spacing */

  --space-9: clamp(9.6rem, 8vw, 12.8rem);
  /* 96–128px → large section / intro */

  --space-10: clamp(12.8rem, 12vw, 19.2rem);
  /* 128–192px → hero / super-hero */


  /* =====================================================
     ERGONOMIC ALIASES (praktyczne – używaj w CSS)
     ===================================================== */

  --s4:   var(--space-1);
  --s8:   var(--space-2);
  --s12:  var(--space-3);
  --s16:  var(--space-4);
  --s24:  var(--space-5);
  --s32:  var(--space-6);
  --s64:  var(--space-7);
  --s96:  var(--space-8);
  --s128: var(--space-9);
  --s192: var(--space-10);


  
  /*[_icon_svg]*/
    --iconSvgWidht: clamp(3.5rem, calc(3.5rem + ((1vw - 0.32rem) * 2.0833)), 5.5rem);
    --iconSvgHeight: clamp(3.5rem, calc(3.5rem + ((1vw - 0.32rem) * 2.0833)), 5.5rem); 
    --iconSvgPadding: clamp(1rem, calc(1rem + ((1vw - 0.32rem) * 1.0417)), 2rem); 

  
  /*[_radius] */
    --radius: 1.6rem;
    --radius-btn: 0.8rem;
    --radius-box: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.8333)), 2.4rem);
    
  
  /*[_shaddow] */
    --shadow: 0px 0px 5px rgba(0, 0, 0, 0.025), 0px 0px 40px rgba(0, 0, 0, 0.05);


  
  /* [_grid] */

    --grid-1: repeat(1, minmax(0,1fr));
    --grid-2: repeat(2, minmax(0,1fr));
    --grid-3: repeat(3, minmax(0,1fr));
    --grid-4: repeat(4, minmax(0,1fr));
    --grid-5: repeat(5, minmax(0,1fr));
    --grid-6: repeat(6, minmax(0,1fr));
    
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

  

  
  

}



:root{

/*[_kolory]*/  

/* kolory poziomu podstawowego */




/* 
kolor w menu to rgb z bialego opacity 0,66
kolor w tle, to svg, z czarnego 0,05 opacity
*/

--c-p-primary:  #0f57fb;
--c-p-accent:  #0f57fb;
--c-p-naglowek: #313c4d;
--c-p-czarny: #313c4d;
--c-p-bialy: #ffffff;
--c-p-bialy-75: rgb(255 255 255 / 75%);
--c-p-tekst: #484c50;
--c-p-gwiazda: #f0ad4e;
--c-p-tloszary: #f3f7ff;
--c-p-btnhover: #21252f;


/*pozniej w kolor theme sa kontekstowo dorabiane*/

/*kolory dla standardowej tresci, prose*/

/* kolor tla #0A1F44;*/ 
--c-bg: var(--c-p-tloszary);

/* kolor naglowkow */
--c-heading: var(--c-p-naglowek); 

/* kolor tekstow */
--c-text: var(--c-p-tekst);         

/* kolor link*/
--c-link: var(--c-p-primary);       

--c-heading-wyroznij: var(--c-p-gwiazda);
--c-heading-title: var(--c-p-tekst);

/*przycisk primary*/
--primary-btn-bg: var(--c-p-primary);
--primary-btn-text: var(--c-p-bialy);
--primary-btn-border: var(--c-p-primary);
--primary-btn-bg-hover: var(--c-p-btnhover);
--primary-btn-text-hover: var(--c-p-bialy);
--primary-btn-border-hover: var(--c-p-btnhover);
--primary-button-box-shadow: rgba(244, 248, 255, 0.1);

/*przycisk secondary*/
--secondary-btn-bg: transparent;
--secondary-btn-text: var(--c-p-bialy);
--secondary-btn-border: var(--c-p-primary);
--secondary-btn-bg-hover: var(--c-p-btnhover);
--secondary-btn-text-hover: var(--c-p-bialy);
--secondary-btn-border-hover: var(--c-p-btnhover);
--secondary-button-box-shadow: rgba(244, 248, 255, 0.1);

/*card counter*/
--card-counter-bg: var(--c-p-primary);
--card-counter-text: var(--c-p-bialy);

}

/*[_colors_theme]*/

/*wstrzykiwanie konfiguracji sekcji*/
.is_odd.default,
.primary{
        /* kolor tla #0A1F44;*/ 
        --c-bg: var(--c-p-primary);

        /* kolor naglowkow */
        --c-heading: var(--c-p-bialy); 

        /* kolor tekstow */
        --c-text: var(--c-p-bialy-75);         

        /* kolor linkow*/
        --c-link: var(--c-p-bialy);       

        /* kolor border, kolor separatora */
        --c-border: var(--c-p-bialy-75);

        /* heading */
        --c-heading-wyroznij: var(--c-p-gwiazda);
        --c-heading-title: var(--c-p-bialy); 

        /*przycisk primary*/
        --primary-btn-bg: var(--c-p-bialy) ;
        --primary-btn-text: var(--c-p-primary) ;
        --primary-btn-border: var(--c-p-bialy) ;
        --primary-btn-bg-hover: var(--c-p-tloszary);
        --primary-btn-text-hover: var(--c-p-primary);
        --primary-btn-border-hover: var(--c-p-tloszary);
        --primary-button-box-shadow: rgba(244, 248, 255, 0.1);
        --primary-button-opacity-hover: 0.8;

        /*przycisk secondary*/
        --secondary-btn-bg: transparent ;
        --secondary-btn-text: var(--c-p-bialy);
        --secondary-btn-border: var(--c-p-bialy);
        --secondary-btn-bg-hover: transparent;
        --secondary-btn-text-hover: inherit;
        --secondary-btn-border-hover: var(--c-p-bialy);
        --primary-button-outline-box-shadow: rgba(62, 162, 250, 0.1);
        --secondary-button-opacity-hover: 0.8;

        /*card counter*/
        --card-counter-bg: var(--c-p-bialy);
        --card-counter-text: var(--c-p-primary);

}


.is_even.default,
.secondary
{

        /*pozniej w kolor theme sa kontekstowo dorabiane*/

        /* kolor tla #0A1F44;*/ 
        --c-bg: var(--c-p-tloszary);

        /* kolor naglowkow */
        --c-heading: var(--c-p-naglowek); 

        /* kolor tekstow */
        --c-text: var(--c-p-tekst);         

        /* kolor linkow*/
        --c-link: var(--c-p-primary);       

        /* kolor border, kolor separatora */
        --c-border: var(--c-p-tekst);        

        /* heading */
        --c-heading-wyroznij: var(--c-p-primary);
        --c-heading-title: var(--c-p-naglowek); 

        /*przycisk primary*/
        --primary-btn-bg: var(--c-p-primary);
        --primary-btn-text: var(--c-p-bialy) ;
        --primary-btn-border: var(--c-p-primary) ;
        --primary-btn-bg-hover: var(--c-p-btnhover);
        --primary-btn-text-hover: var(--c-p-bialy);
        --primary-btn-border-hover: var(--c-p-btnhover);
        --primary-button-box-shadow: rgba(244, 248, 255, 0.1);
        --primary-button-opacity-hover: 1;

        /*przycisk secondary*/
        --secondary-btn-bg: transparent ;
        --secondary-btn-text: var(--c-p-primary);
        --secondary-btn-border: var(--c-p-primary);
        --secondary-btn-bg-hover: var(--c-p-btnhover);
        --secondary-btn-text-hover: inherit;
        --secondary-btn-border-hover: var(--c-p-btnhover);
        --primary-button-outline-box-shadow: rgba(62, 162, 250, 0.1);
        --secondary-button-opacity-hover: 1;

        /*card counter*/
        --card-counter-bg: var(--c-p-primary);
        --card-counter-text: var(--c-p-bialy);

}


/*[_default_theme]*/

header,
footer{
  background-color: var(--c-bg);
}

section{
  color: var(--c-text);
  background-color: var(--c-bg);
}

.text2{ 
  color: var(--c-text);
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
  color: var(--c-heading);
}

a:not(.button){
  color: var(--c-link);
  transition: opacity 0.3s ease;
}

a:not(.button):hover{
  opacity:0.7;
}

.section-heading__title{
  color: var(--c-heading-title); 
}

.section-heading__head{
  color: var(--c-heading);
}

.h1 em, h1 em,
.h2 em, h2 em,
.h3 em, h3 em,
.h4 em, h4 em,
.h5 em, h5 em,
.h6 em, h6 em{
  color:var(--c-heading-wyroznij);
  font-style: normal;
}

.button{
    background-color: var(--primary-btn-bg);
    color:var(--primary-btn-text);
    border:1px solid var(--primary-btn-border);
    -webkit-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
    -moz-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
    box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-box-shadow);
    transition: opacity 0.3s;
}

.button:hover{
  background-color: var(--primary-btn-bg-hover);
  color: var(--primary-btn-text-hover);
  border: 1px solid var(--primary-btn-border-hover); 
  opacity: var(--primary-button-opacity-hover);
}



.button--outline{
    background-color: var(--secondary-btn-bg);
    color:var(--secondary-btn-text);
    border:1px solid var(--secondary-btn-border);
   -webkit-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-outline-box-shadow);
   -moz-box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-outline-box-shadow);
   box-shadow: 0px 0px 0px clamp(0.2rem, calc(0.2rem + ((1vw - 0.32rem) * 0.4167)), 0.6rem) var(--primary-button-outline-box-shadow);
   transition: opacity 0.3s;
  }

.button--outline:hover{
  background-color: var(--secondary-btn-bg-hover);
  color: var(--secondary-btn-text-hover);
  border: 1px solid var(--secondary-btn-border-hover); 
  opacity: var(--secondary-button-opacity-hover);

}


/*[_atomy] */


/*[_basic] */


*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}


img{
  position: relative;
  z-index: 1;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 10. Dostępność – focus widoczny tylko gdy trzeba */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body{
  font-size: var(--body-text-font-size);
  font-weight: var(--body-text-font-weight);
  line-height: var(--body-text-line-height);
  font-family: var(--font-family-text);
  text-align:left;
  margin:0; 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%; /* iOS */
  -moz-tab-size: 4;
  tab-size: 4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--c-bg);
  color:var(--c-text);
}


/*[_container_class] max 1440px */ 
/*nie potrzeba paddingow, rynny, ta klasa odpowiada normalnej container*/
.section_inner_wrap{
  width: var(--min-width);
  max-width: var(--min-width);
  margin-left: auto;
  margin-right: auto;
}


/*[_gap_class] */

section{
  padding-block-start: var(--s96);
  padding-block-end: var(--s96);
  position: relative;
}



@media screen and (max-width: 768px) {
  section{
    padding-block-start: var(--s64);
    padding-block-end: var(--s64);
  }

}

section > div > *:not(:nth-last-child) { 
  padding-bottom: var(--s32);
}

section > div > * + * { 
   margin-top: var(--s64);
} 


/*[_displayheadings]*/
/*klasy wielkosci dla ui*/
    .display-1{
        font-size: var(--display-1-font-size);
        font-weight: var(--display-1-font-weight);
        line-height: var(--display-1-line-height);
        margin-top: var(--display-1-mt);
        margin-bottom: var(--display-1-mb);
    }

    .display-2{
        font-size: var(--display-2-font-size);
        font-weight: var(--display-2-font-weight);
        line-height: var(--display-2-line-height);
        margin-top: var(--display-2-mt);
        margin-bottom: var(--display-2-mb);
    }

    .display-3{
        font-size: var(--display-3-font-size);
        font-weight: var(--display-3-font-weight);
        line-height: var(--display-3-line-height);
        margin-top: var(--display-3-mt);
        margin-bottom: var(--display-3-mb);
    }

    .display-4{
        font-size: var(--display-4-font-size);
        font-weight: var(--display-4-font-weight);
        line-height: var(--display-4-line-height);
        margin-top: var(--display-4-mt);
        margin-bottom: var(--display-4-mb);
    }

    .display-5{
        font-size: var(--display-5-font-size);
        font-weight: var(--display-5-font-weight);
        line-height: var(--display-5-line-height);
        margin-top: var(--display-5-mt);
        margin-bottom: var(--display-5-mb);
    }

    .display-6{
        font-size: var(--display-6-font-size);
        font-weight: var(--display-6-font-weight);
        line-height: var(--display-6-line-height);
        margin-top: var(--display-6-mt);
        margin-bottom: var(--display-6-mb);
    }


/*[_prose] */

/*klasy wielkosci dla content*/

article.page{
  margin-block-start: var(--s96);
  margin-block-end: var(--s96);
}

.prose{
  max-width: 70ch;
  text-wrap: pretty;
}


.prose .h1,
.prose h1{
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  font-family: var(--font-family-heading);
  margin: 0;
  text-wrap: balance;
}

.prose .h2,
.prose h2{
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  font-family: var(--font-family-heading);
  margin-block-start: var(--s64);
  margin-block-end: var(--s8);
  text-wrap: balance;
}

.prose .h3,
.prose h3{
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  font-family: var(--font-family-heading);
  margin-block-start: var(--s32);
  margin-block-end: var(--s8);
  text-wrap: balance;
}

.prose .h4,
.prose h4{
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  font-family: var(--font-family-heading);
  margin-block-start: var(--s24);
  margin-block-end: var(--s8);
  text-wrap: balance;
}

.prose .h5,
.prose h5{
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  font-family: var(--font-family-heading);
  margin-block-start: var(--s24);
  margin-block-end: var(--s8);
  text-wrap: balance;
}

.prose .h6,
.prose h6{
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  font-family: var(--font-family-heading);
  margin-block-start: var(--s24);
  margin-block-end: var(--s8);
  text-wrap: balance;
}

.prose ul,
.prose ol{
  margin-block-start: var(--s24);
  margin-block-end: var(--s24);
  padding-inline-start: var(--s24);
}

.prose li{
  list-style-position: inside;
}

.prose blockquote{
  margin-block-start: var(--s64);
  margin-block-end: var(--s64);
  padding-inline-start: var(--s32);
  padding-inline-end: var(--s32);
}

.prose figure{
  margin-block-start: var(--s32);
  margin-block-end: var(--s32);
}

.prose figcaption{
  text-align: center;
}

/*[_links] */

a{
  text-decoration: underline;
}

/*[_skip_link]*/
#skip_link{
  position: absolute;
  left: -1000px;
  
}

/*[_buttons] */

.button{
    font-size: var(--button-font-size);
    transition-property: color .35s cubic-bezier(.374, .176, .25, 1), border-color .35s cubic-bezier(.368, .182, .25, 1), background-color .35s cubic-bezier(.386, .188, .25, 1);
    padding-bottom: var(--s12);
    padding-top: var(--s12);
    padding-left: var(--s24);
    padding-right: var(--s24);
    border-radius: var(--radius-btn);
    letter-spacing: 1px;
    text-decoration:none;
}


/* [_radius_class] */
.border-radius{
  border-radius: var(--radius);
}

/* [_shaddow_class] */
.box-shadow{
  box-shadow: var(--shadow);
}




/* [_owl_class] */

.owl-1 > * + * { 
   margin-top: var(--s8);
}

.owl-2 > * + * { 
   margin-top: var(--s16);
}

.owl-3 > * + * { 
   margin-top: var(--s24);
}

.owl-4 > * + * { 
   margin-top: var(--s32);
}

.owl-4{
  color:inherit;
}

.owl-l > * + * { 
   margin-top: var(--s64);
}

.owl-6 > * + * { 
   margin-top: var(--s96);
}


/*[_formularze]*/

input,
textarea{
  border-radius: var(--radius);
  padding:1.2rem 1.6rem;
  border: 1px solid var(--c-border);
  font-family: var(--font-family-text);
}

input[type="checkbox"]{
  border: 1px solid var(--c-border);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width:100%;
}

label{
  font-variant: small-caps;
  font-family: var(--font-family-text);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.form__wrap .button{
  float: right;
  border:0;
  font-weight:normal;
}

.zgody label{
    display:inline;
}

.wpcf7-list-item{
  margin-left:0;
}


/*[_utility_class]*/
.hidden{
  display:none !important;
}

/*[_wyrozniki_branzy]*/

section.default.is_odd::before,
section.primary::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  width: 100%;
  height: 100%;
  /* right: calc(-50% - 500px); */
  top: calc(50% - 200px);
  background-color: var(--c-p-bialy-75);
  /* background: radial-gradient(circle, rgba(81,116,255,.55), rgba(81,116,255,0) 60%); */
  /* filter: blur(16px); */
 opacity: 0.1;
  -webkit-mask: url("../images/wrench.svg") no-repeat left / contain;
  mask: url("../images/wrench.svg") no-repeat left / contain;
}


.section_r_onas.default.is_odd::before,
.section_r_onas.primary::before,
.section_s_content7.default.is_odd::before,
.section_s_content7.primary::before,
.section_r_dane_kontakt.default.is_odd::before,
.section_r_dane_kontakt.primary::before
{
   -webkit-mask: url("../images/wrench.svg") no-repeat right / contain;
  mask: url("../images/wrench.svg") no-repeat right / contain;
}


/*[_organizmy]*/

/*[_grid_class]*/

.placeholder {
  background: #f2f2f2;
  border: 2px dashed #ccc;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #999;
}


  .grid-1{
     display: grid;
     grid-template-columns: var(--grid-1);
     width:100%;
     gap:var(--s64);
  }

  .grid-2{
     display: grid;
     grid-template-columns: var(--grid-2);
     width:100%;
     gap:var(--s64);
  }

  .grid-3{
     display: grid;
     grid-template-columns: var(--grid-3);
     width:100%;
     gap:var(--s64);
  }

  .grid-4{
     display: grid;
     grid-template-columns: var(--grid-4);
     width:100%;
     gap:var(--s64);
  }

  .grid-5{
     display: grid;
     grid-template-columns: var(--grid-5);
     width:100%;
     gap:var(--s64);
  }

  .grid-6{
     display: grid;
     grid-template-columns: var(--grid-6);
     width:100%;
     gap:var(--s64);
  }

  .grid-2-1{
     display: grid;
     grid-template-columns: var(--grid-2-1);
     width:100%;
     gap:var(--s64);
  }

   .grid-1-2{
     display: grid;
     grid-template-columns: var(--grid-1-2);
     width:100%;
     gap:var(--s64);
  }

  .grid-3-1{
     display: grid;
     grid-template-columns: var(--grid-3-1);
     width:100%;
     gap:var(--s64);
  }

   .grid-1-3{
     display: grid;
     grid-template-columns: var(--grid-1-3);
     width:100%;
     gap:var(--s64);
  }
 
  .grid-2-3{
     display: grid;
     grid-template-columns: var(--grid-2-3);
     width:100%;
     gap:var(--s64);
  }

  .grid-3-2{
     display: grid;
     grid-template-columns: var(--grid-3-2);
     width:100%;
     gap:var(--s64);
  }


/*
  @media screen and (max-width: 992px) {
   .grid-2,
   .grid-3,
   .grid-4,
   .grid-5,
   .grid-6{
     display:grid;
     grid-template-columns: var(--grid-1);
   }
 }
*/
  

/* [_flex_class] */ 
.flex-row{
   display: flex;
   flex-direction: row; 
   justify-content: flex-start;
   flex-wrap: wrap;
   gap:var(--s16);
}

.flex-column{
   display: flex;
   flex-direction: column; 
   justify-content: flex-start;
   flex-wrap: wrap;
   gap:var(--s16);
}

.flex-center{
  justify-content: center;
}

@media (max-width: 768px) {
  .flex-responsive {
    flex-direction: column;
  }
}



/*[_molekuly]*/

/*[_section_headings] */

.section-heading{
  display: flex;
  flex-direction: column;
  gap: 0.8rem; 
  justify-content: flex-start;
  align-items: center;
  width:100%;
}

.section-heading__title::before{
  content: "//";
  color: var(--c-p-accent);
  font-weight: bold;;
}

.section-heading__title{
  font-size: var(--display-6-font-size);
  font-weight: bold;
  line-height: var(--display-6-line-height);
  font-family: var(--font-family-heading);
  text-transform:uppercase;
  padding:0;
  margin:0;
  order:-1;
  margin-bottom: var(--s32);

}

.section-heading__head{
  text-align: center;
  font-size: var(--display-1-font-size);
  font-weight: var(--display-1-font-weight);
  line-height: var(--display-1-line-height);
  font-family: var(--font-family-heading); 
  max-width: 800px;
}

.section-heading__head2{
  font-size: var(--h3-font-size);
}

.section-heading__desc{
  font-size: var(--display-5-font-size);
  font-weight: normal;
  line-height: var(--display-5-line-height);
  font-family: var(--font-family-heading);
  padding:0;
  margin:0;
  margin-top: var(--s32);
 
}


 

@media screen and (max-width: 600px) {
 
  .section-heading__head{
    font-size: var(--display-2-font-size);
    font-weight: var(--display-2-font-weight);
    line-height: var(--display-2-line-height);  
  }

  .section-heading__desc{
    font-size: var(--display-6-font-size);
    font-weight: normal;
    line-height: var(--display-6-line-height);
  }

}

.section-heading .cta__buttons{
     margin-top: var(--s32);
}


/*[_normal_list] */

.normal__list{
  padding:0;
  margin:0;
  width:100%;
}

.normal__list li{
  width:100%;
  list-style-type:none;
  display:flex;
  flex-direction:column;
  gap:var(--s16);
  align-content:flex-start;
  justify-content:flex-start;
  padding:var(--s16);  
  border-bottom: 1px solid var(--c-border);
}


/*[_lista_z_ikonami]*/
.icon__list{
  padding:0;
  margin:0;
  width:100%;
}

/*
.icon__list li:nth-child(odd) {
  background-color: #f2f2f2;
}*/

.icon__list .h6{
  margin-bottom: var(--s16);
  display:block;
}

.icon__list li{
  list-style-type:none;
  display:grid;
  grid-template-columns: 20px auto;
  gap:var(--s8);
  align-content:center;
  justify-content:flex-start;
  padding:var(--s8);  
}

.icon__list li svg{
  margin-top:2px;
  width:24px;
  height:24px;
}


/*[_karta_ikona_po_lewej_tekst_po_prawej]*/


.cart__list{
  padding:0;
  margin:0;
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--s32);
  justify-content:flex-start;
  align-content:flex-start;
}

/*
.icon__list li:nth-child(odd) {
  background-color: #f2f2f2;
}*/

.cart__list li{
  list-style-type:none;
  display:grid;
  grid-template-columns: auto 1fr;
  gap:var(--s24);
  align-content:flex-start;
  padding:var(--s24);  
  border-radius:var(--radius-box);
  height:100%;
}

.cart__list li svg{
  margin-top:3px;
}

 @media screen and (max-width: 768px) {
   .cart__list{
     grid-template-columns: var(--grid-1);
   }
 }



/*[_card__counter]*/

.card__title{
  font-size: var(--display-5-font-size);
  font-weight: var(--display-5-font-weight);
  line-height: var(--display-5-line-height);
  color: var(--c-heading);
}

.card__desc{
  font-size: var(--display-6-font-size);
  font-weight: var(--display-6-font-weight);
  line-height: var(--display-6-line-height);
}

.card__counter{
     counter-reset: card__counter; 
     display: grid;
     grid-template-columns: var(--grid-2);
     width:100%;
     gap:var(--s16);
}

.card__counter__item{
  counter-increment: card__counter;  
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  width:100%;
  height:100%;
  position:relative;
  gap:var(--s16);
  font-size: 1.6rem;
  background-color: var(--c-surface);
  padding: var(--s24) var(--s12);
  /* border: 1px solid var(--c-p-border); */
  /* border-radius: var(--radius); */
  
}

.card__counter__item::before{
  content:counter(card__counter);
  display:flex;
  flex-shrink: 0;
  justify-content: center;
  align-items:center;
  font-size:1.6rem;
  font-weight: bold;
  flex-wrap:nowrap;
  width:5rem;
  height:3rem;
  background: var(--card-counter-bg);
  color: var(--card-counter-text);
  border-radius:0.4rem;
  
}



/*[_image__card]*/
.image__cards{

}

.image__cards img{
  max-width:100%;
  height:auto;
}

.image__cards__card{
  gap: var(--s32);
}

/*[_breadcrumbs] */
.breadcrumb_last{
  color: white;
}

/*[_table2]*/

.table2-wrap{
  display:flex;
  flex-direction:row;
  width:100%;
  justify-content:center;
}

.table2{
  width: 100%;
  max-width:900px;
}

.table2-row{
  gap:0;
}

.table2-head{
  font-weight:bold;
  padding:var(--s16);
  border:1px solid var(--c-border);
}

.table2-head:nth-child(2){
  justify-content:flex-end;
  flex-direction:row;
  border-left:none;
  text-align:right;
}

.table2-column{
    padding:var(--s16);
    border-bottom:1px solid var(--c-border);
    border-left:1px solid var(--c-border);
    border-right:1px solid var(--c-border);
}

.table2-column:nth-child(2){
  justify-content:flex-end;
  flex-direction:row;
  border-left:none;
  text-align:right;
}

.table2-head{
  border-color:   var(--c-border);
  color: var(--c-text);
}

.table2-column{
  border-color:   var(--c-border);
  color: var(--c-text);
  
}


/*[_opinie1]*/

.opinie1__stars svg{
  width: 30px;
  height: 30px;
}

.opinie1_gwiazda_pelna{
  fill:gold;
  stroke: gold;
}

.opinie1_gwiazda_pusta{
  stroke: gold;
}

/*[_opinie2]*/

.opinia2_wrap {
}

.opinia2 {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.opinia2 > * + * { 
   margin-top: var(--s96);
}

.opinia2__cytat_wrap {
}

.opinia2__cytat {
  font-size:var(--h4-font-size);
  font-weight:var(--h4-font-weight);
  line-height:var(--h4-line-height);
}



.opinia2__podpis_pojemnik {
 max-width:320px;
  margin-left:auto;
  margin-right:auto;
  gap:var(--s24);
  grid-template-columns:50px auto;
  background:red;
  border-radius:50px;
  padding:6px 32px 6px 8px;
}

.opinia2__podpis_pojemnik__img img{
  border-radius:50%;
  max-width:50px;
}

.opinia2__podpis_pojemnik__podpis {
  line-height:1;
  gap:0;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
}

.secondary .opinia2__podpis_pojemnik__podpis .h6{
  color:white;
}

.opinia2__podpis_pojemnik__podpis p{
  font-size:1.4rem;
  margin:0;
  
}

/*[_social_list]*/

.social__icon {

}

.social__icon__header {

}

.social__icon__list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

.social__icon__list li svg{
  fill:var(--c-primary);
}

.social__icon__facebook svg{
  width: 3.5rem;
  height: 3.5rem;
}

.social__icon__instagram svg{
  width: 3.6rem;
  height: 3.6rem;
}

.social__icon__youtube svg{
  width: 4rem;
  height: 4rem;
  position: relative;
  top: -2px;
}


/*[_accordion]*/



.faq__accordion {

}

.faq__tab_content {

}


.faq__tab_description_wrap {
  overflow: hidden;
  height: auto;
  opacity: 1; 
  transition: height 1s ease, opacity 1s ease; 
}

.faq__tab_content--hidden .faq__tab_description_wrap {
  height: 0;
  opacity: 0;
}

.faq__tab_title_wrap {
  position: relative;
  cursor: pointer;
}

.faq__tab_title {
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight) ;
  line-height: var(--h6-line-height);
  max-width: 80%;
}

.faq__tab_icon svg {
  position: absolute;
  right: 3.8rem;
  top: -0.8rem;
  cursor: pointer;
  width: 4.2rem;
  height: 4.2rem;
}

@media screen and (max-width: 768px) {
  .faq__tab_icon svg {
    right: 0;
  }
}

.faq__tab_icon--open svg{
  transform: rotate(180deg);
}

.faq__tab_icon--close {

}

.faq__tab__image {

}

.faq__tab_description_wrap {

}

.faq__tab_description {
  max-width: 80%;
}