
.flex_column.moj-kafelek  {
    
background: #ffffff !important;
    padding: 15px !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.1) !important;
    color: #333 !important;
	font-size:0.85em;
    margin-bottom: 20px !important;
    float: left !important;
    margin-top: 0 !important; /* Fix dla problemu z przesunięciem */
}
.flex_column.gbox_dark
{
background-color:#1d72b8!important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.1) !important;
    color: #fff !important;
    margin-bottom: 20px !important;
    float: left !important;
    margin-top: 0 !important; /* Fix dla problemu z przesunięciem */
}
.flex_column.moj-kafelek h4.av-special-heading-tag, .main_color .gbox_dark h4.av-special-heading-tag
{font-size:1.16em;}
.alternate_color .flex_column.moj-kafelek h4.av-special-heading-tag
{color:#333!important;}

/* 2. DESKTOP (Szerokie ekrany) - 6 KAFELKÓW lub 5 */
@media only screen and (min-width: 1224px) {
    .flex_column.moj-kafelek {
        width: 15% !important;
        margin-left: 2% !important;
        clear: none !important;
    }
	
    .flex_column.moj-kafelek:nth-child(6n+1)  { margin-left: 0 !important; clear: both !important; }
}



/* 4. TABLETY (PIONOWO) - 3 KAFELKI */
@media only screen and (min-width: 768px) and (max-width: 1223px) {
    .flex_column.moj-kafelek, 
	.flex_column[class*="krok-"],.flex_column.gbox_dark {
        width: 31.3% !important;
        margin-left: 3% !important;
        clear: none !important;
    }
	
    .flex_column.moj-kafelek:nth-child(3n+1), .flex_column[class*="krok-"]:nth-child(3n+1),.flex_column.gbox_dark:nth-child(3n+1), .flex_column.gbox_product:nth-child(3n+1) { margin-left: 0 !important; clear: both !important; }
}

/* 5. SMARTFONY - 2 KAFELEK */
@media only screen and (max-width: 767px) {
     .flex_column.moj-kafelek, .flex_column[class*="krok-"],.flex_column.gbox_dark {
        width: 48.5% !important;
        margin-left: 3% !important;
        clear: none !important;
    }
	
    .flex_column.moj-kafelek:nth-child(2n+1),.flex_column[class*="krok-"]:nth-child(2n+1) { margin-left: 0 !important; clear: both !important; }
}
/* 6. SMARTFONY - 1 KAFELEK */
@media only screen and (max-width: 479px) {
    .flex_column.moj-kafelek, .flex_column.gbox_product,.flex_column.gbox_product2,.flex_column[class*="krok-"] , .flex_column.gbox_dark {
        width: 100% !important;
        margin-left: 0 !important;
        clear: both !important;
    }
	
}

/* 1. KONTENER GŁÓWNY (Baza) */
.flex_column.krok-01, .flex_column.krok-02, .flex_column.krok-03, .flex_column.krok-04, .flex_column.krok-05 {
    overflow: visible !important;
    background: #f3fbff !important; /* Usuwamy tło, jeśli zostało wybrane w edytorze */
    border: 1px solid #DAF3FF;
	padding: 25px 25px 50px !important; /* Większy odstęp góra/dół */
	  border-radius: 15px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.05) !important; /* Wyraźniejszy cień */
   margin-bottom:20px;
}

/* 2. KAFELEK (Tło, Cień, Zaokrąglenie) - Celujemy w wewnętrzną warstwę */
.flex_column.krok-01 .av-inner-column, 
.flex_column.krok-02 .av-inner-column, 
.flex_column.krok-03 .av-inner-column, 
.flex_column.krok-04 .av-inner-column, 
.flex_column.krok-05 .av-inner-column {
    
 
   position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

/* 3. NUMERACJA (Pod kafelkiem) */
.flex_column.krok-01::before, .flex_column.krok-02::before, .flex_column.krok-03::before, .flex_column.krok-04::before, .flex_column.krok-05::before {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    bottom: -25px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
	 /* Zmiana fontu zgodnie z życzeniem */
   font-family: "poppins", Helvetica, Arial, sans-serif;
    font-size: 180px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
	

    color: #c2e2fa !important;
    z-index: 1 !important; /* Pod kafelkiem */
    pointer-events: none;
}

/* 4. TREŚĆ NUMERÓW */
.flex_column.krok-01::before { content: "01" !important; }
.flex_column.krok-02::before { content: "02" !important; }
.flex_column.krok-03::before { content: "03" !important; }
.flex_column.krok-04::before { content: "04" !important; }
.flex_column.krok-05::before { content: "05" !important; }

/* 5. TREŚĆ WEWNĄTRZ (Teksty i ikony na samej górze) */
.flex_column[class*="krok-"] .av-inner-column > * {
    position: relative !important;
    z-index: 10 !important;
}



.gbox .av-subheading.av-subheading_below {margin-top:20px;font-size:0.9em;line-height:1.3em;}






    
