:root {

    /* ING Colors variables*/
    --color-ingViolet: #51499E;
    --color-ingOrange: #ff6200;
    --color-ingBlack: #0D0804;
    --color-ingWhite: #fff;
        /* New ING 2.0 colors */
    --color-ingViolet: #7724ff;
    --color-ingSky: #89D6FD;
    --color-ingMaroon: #4D0020;
    --color-ingRaspberry: #d40199;
    --color-ingBlush: #f689fd;
    --color-ingSun: #FFE100;

    --color-ingGrey01: #f7f4f1;
    --color-ingGrey02: #a69f98;
    --color-ingGrey03: #403b3b;
    --color-ingGrey04: #111010;
    
    

} 

.gh-outer-strong {
  padding: 0 clamp(20px, 8vw, 140px);
}
.gh-inner-strong {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Kolory tekstu i tła */
.color-ingViolet { color: var(--color-ingViolet); }
.bg-ingViolet { background-color: var(--color-ingViolet); }

.color-ingOrange { color: var(--color-ingOrange); }
.bg-ingOrange { background-color: var(--color-ingOrange); }

.color-ingBlack { color: var(--color-ingBlack); }
.bg-ingBlack { background-color: var(--color-ingBlack); }

.color-ingWhite { color: var(--color-ingWhite); }
.bg-ingWhite { background-color: var(--color-ingWhite); }

.color-ingSky { color: var(--color-ingSky); }
.bg-ingSky { background-color: var(--color-ingSky); }

.color-ingMaroon { color: var(--color-ingMaroon); }
.bg-ingMaroon { background-color: var(--color-ingMaroon); }

.color-ingRaspberry { color: var(--color-ingRaspberry); }
.bg-ingRaspberry { background-color: var(--color-ingRaspberry); }

.color-ingBlush { color: var(--color-ingBlush); }
.bg-ingBlush { background-color: var(--color-ingBlush); }

.color-ingSun { color: var(--color-ingSun); }
.bg-ingSun { background-color: var(--color-ingSun); }

.color-ingGrey01 { color: var(--color-ingGrey01); }
.bg-ingGrey01 { background-color: var(--color-ingGrey01); }

.color-ingGrey02 { color: var(--color-ingGrey02); }
.bg-ingGrey02 { background-color: var(--color-ingGrey02); }

.color-ingGrey03 { color: var(--color-ingGrey03); }
.bg-ingGrey03 { background-color: var(--color-ingGrey03); }

.color-ingGrey04 { color: var(--color-ingGrey04); }
.bg-ingGrey04 { background-color: var(--color-ingGrey04); }

/* Przykład dla font-24 / 16 */
.font-24-16 {
  font-size: 16px;
}
@media (min-width: 992px) {
  .font-24-16 {
    font-size: 24px;
  }
}

/* Przykład dla font-24 / 19 */
.font-24-19 {
  font-size: 19px;
}
@media (min-width: 992px) {
  .font-24-19 {
    font-size: 24px;
  }
}

/* Przykład dla font-36 / 32 */
.font-36-32 {
  font-size: 32px;
}
@media (min-width: 992px) {
  .font-36-32 {
    font-size: 36px;
  }
}

/* Przykład dla font-32 / 19 */
.font-32-19 {
  font-size: 19px;
}
@media (min-width: 992px) {
  .font-32-19 {
    font-size: 32px;
  }
}

/* Przykład dla font-80 / 44 */
.font-80-44 {
  font-size: 44px;
}
@media (min-width: 992px) {
  .font-80-44 {
    font-size: 80px;
  }
}

/* Przykład dla font-40 / 32 */
.font-40-32 {
  font-size: 32px;
}
@media (min-width: 992px) {
  .font-40-32 {
    font-size: 40px;
  }
}

/* Przykład dla font-48 / 32 */
.font-48-32 {
  font-size: 32px;
}
@media (min-width: 992px) {
  .font-48-32 {
    font-size: 48px;
  }
}

/* Przykład dla font-64 / 32 */
.font-64-32 {
  font-size: 32px;
}
@media (min-width: 992px) {
  .font-64-32 {
    font-size: 64px;
  }
}

/* Przykład dla font-80 / 32 */
.font-80-32 {
  font-size: 32px;
}
@media (min-width: 992px) {
  .font-80-32 {
    font-size: 80px;
  }
}

.ingDisplay {
    font-family: ING display, INGme, Helvetica, Arial;
}

.icon-responsive {
  height: 32px; /* domyślnie – mobile */
}

@media (min-width: 768px) { /* md breakpoint w Bootstrapie */
  .icon-responsive {
    height: 36px;
  }
}

.section {
    padding-block: 64px; /* dla wewnętrznego "oddechu" */
  }
  
  .section + .section {
    margin-top: -64px; /* kompensacja podwójnego paddingu */
  }


.promo-heading {
    font-family: 'ING display', sans-serif;
    font-size: 80px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-ingOrange);
    max-width: 10ch;
    margin: 0 auto;
  }
  

  .blobS {
    -webkit-mask-image: url('/assets/images/blobs/Blob_S.svg');
    -webkit-mask-size: cover;
    
    mask-image: url('/assets/images/blobs/Blob_S.svg');
    mask-size: cover;
    height: 50px;
    width: 144px;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    }
 .blobS:after {
    content: url('/assets/images/icons/Chevron\ Right\ Filled.svg');
    height: 23px;
    width: 23px;
 }   

   .oj-button {
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 50px;
    }
 .oj-button:after {
    content: url('/assets/images/icons/Chevron\ Right\ Filled.svg');
    height: 23px;
    width: 23px;
 } 
  
.card {
    border-radius: 24px; 
    padding: 24px; 
    gap: 24px; 
    color: #333;
    transition: box-shadow 0.5s ease, all 0.5s ease;
}
a.card:hover {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
  background:rgba(241, 235, 229, 1)
} 

.card-title {
  font-weight: 700; font-size: 24px; line-height: 150%;  text-align: center;
}

.card-description {
  font-size: 16px;
  line-height: 1.5;
}


.wrapper.horizontal .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  padding: 0;
  }
  .wrapper.horizontal .item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  }
  .step_number {
  -webkit-box-pack: unset;
  -ms-flex-pack: unset;
  justify-content: unset;
    position: relative;
  }
  .step_numberValue {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-weight: 700;
  border-radius: 50%;
  font-size: 19px;
  background-color: #DCDCEB;
  color: #525199 !important;
  border: none !important;
  }
  .wrapper.horizontal.left-position .item:not(:last-child) .step_number:after,  
  .wrapper.vertical .step_number:after {
  content: '';
  position: absolute;
  border: 0.5px solid #a8a8a8;
  opacity: .4;
  }
    .wrapper.horizontal.left-position .step_number:after {
  left: 40px;
  right: 9px;
  top: 50%;
  }
    .wrapper.horizontal .headTitle, .block_how_to_start>.wrapper.vertical .headTitle {
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
  
  }
    .wrapper.horizontal.left-position .innerText .content_area p {
  padding-right: 20px;
  }
  
  .item ul li::marker {
  color: var(--color-ingOrange);
  }
  
  .content_area li {
  margin-bottom: 16px;
  }
  
  .wrapper.horizontal .items {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  }
  .wrapper.horizontal .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  }
    .innerText {
  padding-left: 16px;
  }
  .wrapper.horizontal .head,
  .wrapper.horizontal .body {
  padding-right: 0;
  }

    .wrapper.horizontal.left-position .innerText .content_area p {
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  }
  .wrapper.horizontal.left-position .step_number:after {
  left: 15px;
  right: auto;
  top: 40px;
  bottom: 7px;
  height: auto;
  margin-left: 0;
  }

  .disclaimer-text {
  font-size: 12px;
  color: #333;
}
  
    
  
  
  /* Responsywny rozmiar fontu na mobile */
  @media (max-width: 768px) {
    .promo-heading {
      font-size: 44px;
    }
  }