/*==================== GOOGLE FONTS ====================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*==================== VARIABLES CSS ====================*/
:root {
    --header-height: 3rem;

    /*========== Colors ==========*/
    /* Change favorite color */
    --hue-color: 240; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

    /* HSL color mode */
    --first-color: greenyellow; /* #5757e0 */
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: #E3E3E3;
    --text-color: #E3E3E3;
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: #1d1d35;
    --body-color: #000;
    --container-color: #1d1d35;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);
    --border-color: hsl(228, 99%, 98%);
    --first-color-icon-hero: #E3E3E3;
    --first-color-icon-hero-alt: greenyellow;
  

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== Margenes Bottom ==========*/
    /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;


    /*========== SERVICES COLORS ====*/
    --card-background-color: rgba(255, 255, 255, .015);
    --card-border-color: rgba(255, 255, 255, 0.1);
    --card-box-shadow-1: rgba(0, 0, 0, 0.05);
    --card-box-shadow-1-y: 3px;
    --card-box-shadow-1-blur: 6px;
    --card-box-shadow-2: rgba(0, 0, 0, 0.1);
    --card-box-shadow-2-y: 8px;
    --card-box-shadow-2-blur: 15px;
    --card-label-color: #FFFFFF;
    --card-icon-color: #D4D4D8;
    --card-icon-background-color: rgba(255, 255, 255, 0.08);
    --card-icon-border-color: rgba(255, 255, 255, 0.12);
    --card-shine-opacity: .1;
    --card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(204, 255, 0, 0) 0deg, #ccff00 25deg, rgba(204, 255, 0, 0.18) 295deg, rgba(204, 255, 0, 0) 360deg);
    --card-line-color: #2A2B2C;
    --card-tile-color: rgba(16, 185, 129, 0.05);
  
    --card-hover-border-color: rgba(255, 255, 255, 0.2);
    --card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
    --card-hover-box-shadow-1-y: 5px;
    --card-hover-box-shadow-1-blur: 10px;
    --card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
    --card-hover-box-shadow-2-y: 15px;
    --card-hover-box-shadow-2-blur: 25px;
    --card-hover-icon-color: #CCFF00;
    --card-hover-icon-background-color: rgba(154, 205, 50, 0.1);
    --card-hover-icon-border-color: rgba(154, 205, 50, 0.2);
  
    --blur-opacity: .01;
  

    &.toggle .grid3 * {
      transition-duration: 0s !important;
    }

}

/* Font size for large devices */
@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*==================== BASE ====================*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color); /* FONT COLOR */
}

h1, h2, h3, h4 {
  color: var(--title-color); 
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

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

/*==================== REUSABLE CSS CLASSES ====================*/
.section {
  padding: 2rem 0 4rem;
}

.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  line-height: 1; /* zmniejsza pionowy odstęp między liniami */
}

.section__titleQuote {
  font-size: 30px;
  color: var(--title-color);
  line-height: 1; /* zmniejsza pionowy odstęp między liniami */
}

.highlight {
  color: greenyellow;
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
}
.section__subtitle2 {
  display: block;
  font-size: var(--small-font-size);
  margin-top: -10px;
  margin-bottom: var(--mb-3);
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}

.section__title, 
.section__subtitle,
.section__subtitle2 {
  text-align: center;
}

/*==================== LAYOUT ====================*/
.container {
  max-width: 768px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
}

/*==================== NAV ====================*/
.nav{
  max-width: 968px;
  height: var( --header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle{
  color: var( --title-color);
  font-weight: var(--font-medium);
}

.nav__logo:hover{
  color: var(--first-color);
}

.nav__logo {
  display: inline-block; /* Zapewnia, że link zachowuje się jak blok, ale nie zajmuje całej szerokości */
  text-decoration: none; /* Usuwa domyślne podkreślenie linku */
}

.nav__logo-img {
  max-width: 100px; /* Ustaw szerokość obrazka, dostosuj do potrzeb */
  height: auto; /* Zachowuje proporcje obrazka */
  display: block; /* Usuwa ewentualne marginesy pod obrazkiem */
}

.nav__toggle{
  font-size: 1.1rem;
  cursor: pointer;
}

.nav_toggle:hover{
  color: var(--first-color);
}

.nav__item--mobile-only {
  display: none;
}

@media screen and (max-width: 767px){
  .nav__menu{
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: .3s;
  }
}

@media screen and (max-width: 767px) {
  .nav__item--mobile-only {
    display: block;
  }
}


.nav__list{
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav__link{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__link:hover{
  color: greenyellow;
}

.nav__icon{
  font-size: 1.2rem;
}

.nav__close{
  position: absolute;
  right: 1.3rem;
  bottom: .5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--first-color)
}

.nav__close:hover{
  color: var(--first-color-alt);
}

/* show menu */
.show-menu{
  bottom: 0;
}

/* Active link */
.active-link{
  color: var(--first-color);
}

/* Change background header */
.scroll-header{
  box-shadow: 0 -1px 4px rgba(0,0,0,.15);
}

/*==================== HOME ====================*/
.home__container{
  gap: 1rem;
}

.home__content{
  padding-top: 5rem;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}

.home__social{
  position: absolute;
  display: grid;
  grid-template-columns: 1/3;
  row-gap: 1rem;
  pointer-events: fill; /* BYLO AUTO */
}

.home__social-icon{
  font-size: 1.25rem;
  color: var(--first-color-icon-hero);

}

.home__social-icon:hover{
  color: var(--first-color-icon-hero-alt);

}

.home__blob{
  width: 200px;
  fill: var(--first-color);
}

.home__blob-img{
  width: 170px;
}

.home__data{
  padding-top: 0px;
}

.home__title{
  margin-top: -5px;
  font-size: var(--big-font-size);
  line-height: 1; /* zmniejsza pionowy odstęp między liniami */
}

.home__website{
  margin-bottom: 20px;
  font-size: 16px;
  color: greenyellow;
}

.home__subtitle{
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-0-75);
}

.home__discription{
  margin-top: 20px;
  margin-bottom: var(--mb-1);
}

.home__extra{
  font-size: var(--smaller-font-size);
  margin-top: var(--mb-1);
}

.home__scroll{
  display: none;
  z-index: 1;
}

.home__scroll-button{
  color: var(--first-color);
  transition: .3s;
}

.home__scroll-button:hover{
  transform: translateY(.25rem);
}

.home__scroll-mouse{
  font-size: 2rem;
}

.home__scroll-name{
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-weight: var(--font-medium);
  margin-right: var(--mb-0-25);
}

.home__scroll-arrow{
  font-size: 1.25rem;
}

/* Media query dla ekranów mniejszych niż 1024px */
@media screen and (max-width: 1023px) {
  .home__social {
    position: static; /* Anuluje position: absolute */
    display: flex;
    gap: 1rem;
  }
}

/* Poniżej 350px - ikony jedna pod drugą (kolumna) */
@media screen and (max-width: 540px) {
  .home__discription{
    margin-top: 20px;
    margin-bottom: var(--mb-2);
    text-align: justify;
    word-break: break-word;
    hyphens: auto;
    max-width: 75%;
  }
}

/* Poniżej 350px - ikony jedna pod drugą (kolumna) */
@media screen and (max-width: 350px) {
  .home__social {
    flex-direction: column;
    align-items: center; /* wyśrodkowanie w kolumnie */
    gap: 0.5rem;
  }
}

/*==================== BUTTONS ====================*/

.button{
  display: inline-block;
  background-color: var(--first-color);
  color: #E3E3E3;
  padding: 0.5rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  pointer-events: auto;
  transition: all 0.3s ease-in-out;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button--flex{
  display: inline-flex;
  align-items: center;
}

.button__icon{
  font-size: 1.25rem;
  margin-left: var(--mb-0-5);
  transition: .3s;
  transform: rotate(-45deg);
}

.button--hero:hover .button__icon {
  transform: rotate(0deg);
}

.button--hero{
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  background: #000;
  color: greenyellow;
  animation: fadeUp 0.8s ease-out both;
  animation-delay: 0.3s; /* możesz dostosować */
  border: solid 2px;
  border-radius: 100px;
  padding-left: 15px;
  padding-right: 15px;
}

.button--hero:hover{
  background: linear-gradient(to right, #2b2b2b, #3a3a3a, #4b4b4b);
  color: #e3e3e3; /* opcjonalnie lekka zmiana tekstu */
  transform: scale(1.02);
}

.button--contact:hover .button__icon {
  transform: rotate(0deg);
}

.button--contact{
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
  background: #000;
  color: greenyellow;
  animation: fadeUp 0.8s ease-out both;
  animation-delay: 0.3s; /* możesz dostosować */
  border: solid 2px;
  border-radius: 12px;
  padding: 8px;
}

.button--contact:hover{
  background: linear-gradient(to right, #2b2b2b, #3a3a3a, #4b4b4b);
  color: #e3e3e3; /* opcjonalnie lekka zmiana tekstu */
  transform: scale(1.02);
}

.ContactButton {
  width: 40%;
}

@media (max-width: 700px) {
  .ContactButton {
    width: 60%;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.button--small{
  padding: .75rem 1rem;
}

.button--link{
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
}

.button--link:hover{
  background-color: transparent;
  color: var(--first-color-alt);
}

/*==================== ABOUT ====================*/

.about__img{
  width: 200px;
  border-radius: .5rem;
  justify-self: center;
  align-self: center;
}

.about__discription{
  text-align: center;
  margin-bottom: var(--mb-2-5);
}

.about__info{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-2-5);
}

.about__info-title{
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.about__info-name{
  font-size: var(--small-font-size);
}

.about__info-title,
.about__info-name{
  display: block;
  text-align: center;
}

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

/* SERVICES NEW */

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  position: relative;
  z-index: 1;
}

.card2 {
  background-color: var(--background-color);
  /* box-shadow: 0px var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1), 0px var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2), 0 0 0 1px var(--card-border-color); */
  padding: 56px 16px 16px 16px;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: box-shadow .25s;
  z-index: 5;
  margin: 5px;
  border: 1px solid #1a1a1a;;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background-color: var(--card-background-color);
  }

  .icon {
    z-index: 2;
    position: relative;
    display: table;
    padding: 12px;

    &::after {
      content: '';
      position: absolute;
      inset: 4.5px;
      border-radius: 50%;
      background-color: var(--card-icon-background-color);
      border: 1px solid var(--card-icon-border-color);
      backdrop-filter: blur(2px);
      transition: background-color .25s, border-color .25s;
    }

    svg {
      position: relative;
      z-index: 1;
      display: block;
      width: 22px;
      height: 22px;
      transform: translateZ(0);
      color: greenyellow;
      transition: color .25s;
    }
  }

  h4 {
    z-index: 2;
    position: relative;
    margin: 12px 0 4px 0;
    font-family: var(--body-font);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    color: greenyellow;
  }

  p {
    z-index: 2;
    position: relative;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
  }

  .shine {
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s;

    &:before {
      content: '';
      width: 150%;
      padding-bottom: 150%;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      bottom: 55%;
      filter: blur(35px);
      opacity: var(--card-shine-opacity);
      transform: translateX(-50%);
      background-image: var(--card-shine-gradient);
    }
  }

  .background {
    border-radius: inherit;
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
    mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);

    .tiles {
      opacity: 0;
      transition: opacity .25s;

      .tile {
        position: absolute;
        background-color: var(--card-tile-color);
        animation-duration: 8s;
        animation-iteration-count: infinite;
        opacity: 0;

        &.tile-4,
        &.tile-6,
        &.tile-10 {
          animation-delay: -2s;
        }

        &.tile-3,
        &.tile-5,
        &.tile-8 {
          animation-delay: -4s;
        }

        &.tile-2,
        &.tile-9 {
          animation-delay: -6s;
        }

        &.tile-1 {
          top: 0;
          left: 0;
          height: 10%;
          width: 22.5%;
        }

        &.tile-2 {
          top: 0;
          left: 22.5%;
          height: 10%;
          width: 27.5%;
        }

        &.tile-3 {
          top: 0;
          left: 50%;
          height: 10%;
          width: 27.5%;
        }

        &.tile-4 {
          top: 0;
          left: 77.5%;
          height: 10%;
          width: 22.5%;
        }

        &.tile-5 {
          top: 10%;
          left: 0;
          height: 22.5%;
          width: 22.5%;
        }

        &.tile-6 {
          top: 10%;
          left: 22.5%;
          height: 22.5%;
          width: 27.5%;
        }

        &.tile-7 {
          top: 10%;
          left: 50%;
          height: 22.5%;
          width: 27.5%;
        }

        &.tile-8 {
          top: 10%;
          left: 77.5%;
          height: 22.5%;
          width: 22.5%;
        }

        &.tile-9 {
          top: 32.5%;
          left: 50%;
          height: 22.5%;
          width: 27.5%;
        }

        &.tile-10 {
          top: 32.5%;
          left: 77.5%;
          height: 22.5%;
          width: 22.5%;
        }
      }
    }

    @keyframes tile {

      0%,
      12.5%,
      100% {
        opacity: 1;
      }

      25%,
      82.5% {
        opacity: 0;
      }
    }

    .line {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .35s;

      &:before,
      &:after {
        content: '';
        position: absolute;
        background-color: var(--card-line-color);
        transition: transform .35s;
      }

      &:before {
        left: 0;
        right: 0;
        height: 1px;
        transform-origin: 0 50%;
        transform: scaleX(0);
      }

      &:after {
        top: 0;
        bottom: 0;
        width: 1px;
        transform-origin: 50% 0;
        transform: scaleY(0);
      }

      &.line-1 {
        &:before {
          top: 10%;
        }

        &:after {
          left: 22.5%;
        }

        &:before,
        &:after {
          transition-delay: .3s;
        }
      }

      &.line-2 {
        &:before {
          top: 32.5%;
        }

        &:after {
          left: 50%;
        }

        &:before,
        &:after {
          transition-delay: .15s;
        }
      }

      &.line-3 {
        &:before {
          top: 55%;
        }

        &:after {
          right: 22.5%;
        }
      }
    }
  }

  &:hover {
    box-shadow: 0px 3px 6px var(--card-hover-box-shadow-1), 0px var(--card-hover-box-shadow-2-y) var(--card-hover-box-shadow-2-blur) var(--card-hover-box-shadow-2), 0 0 0 1px var(--card-hover-border-color);

    .icon {
      &::after {
        background-color: var(--card-hover-icon-background-color);
        border-color: var(--card-hover-icon-border-color);
      }

      svg {
        color: var(--card-hover-icon-color);
      }
    }

    .shine {
      opacity: 1;
      transition-duration: .5s;
      transition-delay: 0s;
    }

    .background {

      .tiles {
        opacity: 1;
        transition-delay: .25s;

        .tile {
          animation-name: tile;
        }
      }

      .line {
        opacity: 1;
        transition-duration: .15s;

        &:before {
          transform: scaleX(1);
        }

        &:after {
          transform: scaleY(1);
        }

        &.line-1 {

          &:before,
          &:after {
            transition-delay: .0s;
          }
        }

        &.line-2 {

          &:before,
          &:after {
            transition-delay: .15s;
          }
        }

        &.line-3 {

          &:before,
          &:after {
            transition-delay: .3s;
          }
        }
      }
    }
  }
}

/* Media Queries */
@media (max-width: 768px) {
  .services__container {
    padding-right: 3rem;
    padding-left: 3rem;
    grid-template-columns: 1fr;
  }

  .grid3 {
    grid-template-columns: 1fr; /* Ustawiamy jedną kolumnę na urządzeniach mobilnych */
    
  }
}

.card {
  position: relative;
  width: auto;
  height: auto;
  border-radius: 15px;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 96%;
  height: 96.5%;
  z-index: 2;
  background: #000;
  backdrop-filter: blur(24px);
  border-radius: 15px;
  overflow: hidden;
  outline: 3px solid #000;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: greenyellow;
  opacity: 0.8;
  filter: blur(8px);
  animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }

  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }

  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }

  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}


/*==================== PORTFOLIO ====================*/

.portfolio {
  padding: 50px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.portfolio-header {
  text-align: center;
  margin-bottom: 40px;
}

.portfolio-header h1 {
  font-size: 3rem;
  font-weight: 300;
  margin-bottom: 10px;
}

.portfolio-header p {
  font-size: 1.1rem;
  color: #E3e3e3;
  max-width: 600px;
  margin: 0 auto;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.portfolio-item {
  position: relative;
  border-radius: 15px;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pierwszy element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(1) {
  grid-column: span 2;
}

/* czwarty element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(4) {
  grid-column: span 2;
}

/* piaty element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(5) {
  grid-column: span 2;
}

.portfolio-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.overlay { 
  position: absolute; /* Nakładka na obrazku */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15); /* Czarny kolor z przezroczystością (0.5 to 50%) */
  transition: opacity 0.3s ease; /* Płynne przejście */
}

.portfolio-info {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  padding: 20px;
  background: rgba(0, 0, 0, 0.75); /* Półprzezroczysty czarny overlay */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}


.portfolio-info h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 5px;

}

.portfolio-info p {
  font-size: 0.9rem;
  color: #b3b3b3;
}

.portfolio-item:hover .portfolio-info {
  opacity: 1;
}

.portfolio-item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.arrow {
  position: absolute;
  bottom: 20px;
  right: 40px;
  font-size: 1.5rem;
  color: #fff;
  transition: transform 0.8s ease;
}

.portfolio-item:hover .arrow {
  transform: rotate(-45deg); /* Obrót o 90 stopni, możesz dostosować kąt */
}

.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 2;
  transition: all 0.3s ease;
}

.cornerabout {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 2;
  transition: all 0.3s ease;
}

.fancy-heading {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
  
}

.fancy-headingCenter {
  position: relative;
  display: block;
  width: fit-content; /* Dopasowuje szerokość do zawartości */
  padding-top: 9px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 16px;
  margin: 0 auto 0px auto; /* Wyśrodkowanie horyzontalne */
  text-align: center; /* Wyrównanie tekstu w środku */
}


.fancy-headingQuote {
  position: relative;
  display: block;
  width: fit-content; /* Dopasowuje szerokość do zawartości */
  padding-top: 9px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 16px;
  margin: 10% auto 0px auto; /* Wyśrodkowanie horyzontalne */
  text-align: center; /* Wyrównanie tekstu w środku */
}
/* Początkowe pozycje – bardziej "na zewnątrz" */
.corner.tl {
  top: -3px;
  left: -3px;
  border-top: 2px solid yellowgreen;
  border-left: 2px solid yellowgreen;
}

.cornerabout.tl.about {
  top: 5px;
  left: 0px;
  border-top: 2px solid yellowgreen;
  border-left: 2px solid yellowgreen;
}


.corner.tr {
  top: -3px;
  right: -3px;
  border-top: 2px solid yellowgreen;
  border-right: 2px solid yellowgreen;
}

.corner.bl {
  bottom: -3px;
  left: -3px;
  border-bottom: 2px solid yellowgreen;
  border-left: 2px solid yellowgreen;
}

.corner.br {
  bottom: -3px;
  right: -3px;
  border-bottom: 2px solid yellowgreen;
  border-right: 2px solid yellowgreen;
}

.cornerabout.br.about {
  bottom: 15px;
  right: 0px;
  border-bottom: 2px solid yellowgreen;
  border-right: 2px solid yellowgreen;
}

/* Na hover – wjeżdżają na swoje miejsce (-3px) */
.portfolio-item:hover .corner.tl {
  top: -8px;
  left: -8px;
}

.portfolio-item:hover .corner.tr {
  top: -8px;
  right: -8px;
}

.portfolio-item:hover .corner.bl {
  bottom: -8px;
  left: -8px;
}

.portfolio-item:hover .corner.br {
  bottom: -8px;
  right: -8px;
}



.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  display: none; /* ukryte domyślnie */
  cursor: zoom-out;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 0px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.7);
}

/* Responsywność */
@media (max-width: 900px) {
  .portfolio-grid {
      grid-template-columns: 1fr;
  }

  .portfolio-grid .portfolio-item:nth-child(3) {
    grid-row: 4;
  }
  
  .portfolio-grid .portfolio-item:nth-child(4) {
    grid-row: 3;
  }


  .portfolio-header h1 {
      font-size: 2rem;
  }

  .portfolio-header p {
      font-size: 1rem;
  }

  
.portfolio-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  display: block;
}

  /* Pierwszy element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(1) {
  grid-column: span 1;
}

/* czwarty element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(4) {
  grid-column: span 1;
}

/* piaty element zajmuje dwa kafelki */
.portfolio-grid .portfolio-item:nth-child(5) {
  grid-column: span 1;
}
}



/*==================== CONTACT ME ====================*/
.contact__container{
  row-gap: 3rem;
}

.contact__information{
  display: flex;
  margin-bottom: var(--mb-2);
}

.contact__icon{
  font-size: 2rem;
  color: greenyellow;
  margin-right: var(--mb-0-75);
}

.contact__title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.contact__subtitle{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  user-select: text;    /* pozwala zaznaczyć */
}

.contact__content{
  background-color: #111111;
  border-radius: .5rem;
  border: 1px solid #1a1a1a;
  padding: .75rem 1rem .25rem;
}

.contact__label{
  font-size: var(--smaller-font-size);
  color: var(--title-color);
}

.contact__input{
  width: 100%;
  background-color: #111111;
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  padding: .25rem .5rem .5rem 0;
}

/*==================== FOOTER ====================*/
.footer{
  padding-top: 2rem;
}

.footer__container{
  row-gap: 3.5rem;
}

.footer__bg{
  background-color: var(--body-color);
  padding: 2rem 0 3rem;
}


.footer__title{
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}

.footer__subtitle{
  font-size: var(--small-font-size);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dwie równe kolumny */
  gap: 1.5rem; /* Odstępy między elementami */
}

.footer__link:hover{
  color: greenyellow;
}

.footer__social{
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer__social:hover{
  color: greenyellow;
}

.footer__copy{
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
  margin-right: 15%;
  margin-left: 15%;
}

.footer__copy a{
color: greenyellow;
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social{
  color: #E3E3E3;
}
/*========== SCROLL UP ==========*/
.scrollup{
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: greenyellow;
  opacity: .8;
  padding: 0 .3rem;
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
}

.scrollup:hover{
  background-color: #E3E3E3;
}

.scrollup__icon{
  font-size: 1.5rem;
  color: #111111;
}


/* Show scroll */
.show-scroll{
  bottom: 5rem;
}



/*========== SCROLL BAR ==========*/
::-webkit-scrollbar{
  width: .60rem;
  background-color: var(--scroll-bar-color);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb{
  background-color: var(--scroll-thumb-color);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
  background-color: var(--text-color-light);
}

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 350px){
  .container{
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .nav__menu{
    padding: 2rem .25rem 4rem;
  }

  .nav__list{
    column-gap: 0;
  }

  .animated-button{
    display: none;
  }

  .home__content{
    grid-template-columns: .25fr 3fr;
  }

  .home__blob{
    width: 180px;
  }

  .skills__title{
    font-size: var(--normal-font-size);
  }

  .qualification__data{
    gap: .5rem;
  }
  .services__container{
    justify-content: center;
  }
  .services__content{
    padding-right: 3.5rem;
  }
  .services__modal{
    padding: 0 .5rem;
  }

  .services__icon{
    font-size: .5rem;
  }

  .project__img{
    width: 200px;
  }

  .testimonial__data,
  .testimonial__header{
    flex-direction: column;
    align-items: center;
  }

  .testimonial__img{
    margin-right: 0;
    margin-bottom: var(--mb-0-25);
  }

  .testimonial__data,
  .testimonial__description{
    text-align: center;
  }

}

/* For medium devices */
@media screen and (min-width: 568px){
  .home__content{
    grid-template-columns: max-content;
  }
  .home__data{
    grid-column: initial;
  }
  .home__img{
    order: 1;
    justify-self: center;
    width: 100%;
    height: 100%;
    
  }

  .animated-button{
    display: none;
  }

  .about__container,
  .skills__container,
  .portfolio__content,
  .project__container,
  .contact__container,
  .footer__container{
    grid-template-columns: repeat(2, 1fr);
  }

  .qualification__sections{
    display: grid;
    grid-template-columns: .6fr;
    justify-content: center;
  }
}

@media screen and (min-width: 767px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }

  body{
    margin: 0;
  }

  .section{
    padding: 2rem 0 2rem;
  }

  .sectionHome{
    padding: 4rem 0 0rem;
    position: relative; 
    width: 100%;
    height: 100vh;
  }

  .section__subtitle{
    margin-bottom: 3rem;
  }

  .section__subtitle2{
    margin-bottom: 2rem;
  }

  .header{
    top: 0;
    bottom: initial;
  }

  .header,
  .main,
  .footer__container{
    padding: 0 1rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
    column-gap: 1rem;
  }
  .nav__icon,
  .nav__close,
  .nav__toggle{
    display: none;
  }

  .nav__list{
    display: flex;
    column-gap: 2rem;
  }

  .nav__menu{
    margin-left: auto;
  }

  .change-theme{
    margin: 0;
  }

  .animated-button{
    margin: 0;
  }

  .home__container{
    row-gap: 5rem;
  }
  .home__content {
    padding-top: 14rem;
    column-gap: 2rem;
    align-items: center; 
    min-height: 50vh; 
  }
  .home__blob{
    width: 270px;
  }
  .home__scroll{
    display: block;
  }
  .home__scroll-button{
    margin-left: 3rem;
  }

  .about__container{
    column-gap: 5rem;
  }

  .about__img{
    width: 350px;
  }

  .about__discription{
    text-align: initial;
  }

  .about__info{
    justify-content: space-between;
  }

  .about__buttons{
    justify-content: initial;
  }

  .qualification__tabs{
    justify-content: center;
  }

  .qualification__button{
    margin: 0 var(--mb-1);
  }
  .qualification__sections{
    grid-template-columns: 1.5fr;
  }

  .qualification-icon{
    font-size: 20px;
    color: var(--first-color);
  }
  .services__container{
    grid-template-columns: repeat(3, 218px);
    justify-content: center;
  }
  .services__icon{
    font-size: 1.2rem;
  }
  .services__content{
    padding: 3rem 0 2rem 2.5rem;
  }
  .services__modal-content{
    width: 450px;
  }

  .portfolio__img{
    width: 320px;
  }
  .portfolio__content{
    align-items: center;
  }

  .poject{
    text-align: initial;
  }
  .project__bg{
    background: none;
  }

  .project__container{
    background-color: var(--first-color-second);
    border-radius: 1rem;
    padding: 3rem 2.5rem 0;
    grid-template-columns: 1fr max-content;
    column-gap: 3rem;
  }
  .project__data{
    padding-top: .8rem;
  }

  .footer__container{
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__bg{
    padding: 3rem 0 3.5rem;
  }
  .footer__links{
    flex-direction: column;
    column-gap: 2rem;
  }

  .footer__socials{
    justify-content: flex-end;
  }
  .footer__copy{
    margin-top: 4.5rem;
  }

}
/* For large devices */

@media screen and (min-width: 1024px){
  .header,
  .main,
  .footer__container{
    padding: 0;
  }

  .home__blob{
    width: 320px;
  }
  .home__social{
    transform: translateX(-6rem);
  }

  .services__container{
    grid-template-columns: repeat(3, 238px);
  }

  .portfolio__content{
    column-gap: 5rem;
  }

  .swiper-portfolio-icon{
    font-size: 3.5rem;
  }
  .swiper-button-prev{
    left: -3.5rem;
  }
  .swiper-button-next{
    right: -3.5rem;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: -4.5rem;
  }

  .contact__form{
    width: 460px;
  }

  .contact__input{
    grid-template-columns: repeat(2, 1fr);
  }
}



/*==================== REUSABLE CSS CLASSES ====================*/
.container2 {
  max-width: 1024px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid2 {
  display: grid;
  gap: 0px;
}


/*==================== BLUR PRICING TAB ====================*/

.blur-layer {
  position: absolute;
  left: 25%;
  width: 300px;
  height: 400px;
  background: radial-gradient(circle at center, #ADFF2F, transparent);
  filter: blur(150px);
  opacity: 0.3;
  z-index: 0;
}

.blur-layer2 {
  position: absolute;
  left: 80%;
  top: 40%;
  width: 1000px;
  height: 500px;
  background: radial-gradient(circle at center, #ADFF2F, transparent);
  filter: blur(220px);
  border: none;
  border-radius: 50%;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

/*==================== CARD PRICING ====================*/
.modal {
  margin-top: 20px;
  margin-bottom: 20px;
  width: auto;
  border-radius: 16px;
  display: flex; /* Włączamy Flexbox */
  flex-direction: column; /* Ustawiamy elementy w pionie */
  justify-content: center; /* Wyśrodkowanie w pionie */
  align-items: center; /* Wyśrodkowanie w poziomie */
}


.plan {
  background: linear-gradient(0deg,rgba(31, 31, 31, 1) 0%, rgba(0, 0, 0, 1) 100%);
  border: 2px solid rgba(68, 68, 68, 0.5);
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  text-align: left;
   /* Cień od dołu i z prawej */
  box-shadow: 3px 5px 10px 0px rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.plan h2 {
  display: inline-flex;
  font-size: 24px;
  margin-bottom: 10px;
}

.plan2 h2 {
  display: inline-flex;
  font-size: 24px;
  color: greenyellow;
}

.plan2 {
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
}
.plan p {
  font-size: 14px;
  color: #b0b0b0;
  margin-bottom: 20px;
}
.plan .price {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #E3E3E3;
}
.plan .price span {
  font-size: 16px;
  font-weight: normal;
}
.plan ul {
  list-style: none;
  margin-bottom: 20px;
}
.plan ul li {
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.imgcard{
  filter: invert(82%) sepia(92%) saturate(842%) hue-rotate(46deg) brightness(102%) contrast(95%);
}

.imgcardNone{
  filter: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(747%) hue-rotate(179deg) brightness(93%) contrast(90%);
}

/*==================== CARD PRICING MIDDLE ====================*/

.modalmiddle {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  width: auto;
  border-radius: 16px;
  display: flex; /* Włączamy Flexbox */
  flex-direction: column; /* Ustawiamy elementy w pionie */
  justify-content: center; /* Wyśrodkowanie w pionie */
  align-items: center; /* Wyśrodkowanie w poziomie */
  
}


.planmiddle {
  background: linear-gradient(0deg,rgba(31, 31, 31, 1) 0%, rgba(0, 0, 0, 1) 100%);
  border: 1px solid rgba(102, 255, 0, 0.8);
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  text-align: left;
   /* Cień od dołu i z prawej */
  box-shadow: 3px 5px 10px 0px rgba(255, 255, 255, 0.1);
  z-index: 1;
}
.planmiddle h2 {
  display: inline-flex;
  font-size: 24px;
  margin-bottom: 10px;
}

.planmiddle h2 {
  display: inline-flex;
  font-size: 24px;
  color: greenyellow;
}

.plan2 {
  display: flex; /* Zmień na flex, aby kontener zajmował pełną szerokość */
  justify-content: space-between; /* Przesuwa elementy na prawo */
  width: 100%; /* Upewnij się, że kontener ma wystarczającą szerokość */
}
.planmiddle p {
  font-size: 14px;
  color: #b0b0b0;
  margin-bottom: 20px;
}
.planmiddle .price {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #FFFFFF;
}
.planmiddle .price span {
  font-size: 16px;
  font-weight: normal;
}
.planmiddle ul {
  list-style: none;
  margin-bottom: 20px;
}
.planmiddle ul li {
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

/* MIDDLE CARD END */

hr {
  width: 100%;
  border: none;
  height: 1px;
  background: #5f5f5f67;
  margin: 20px auto; /* <-- auto wyśrodkuje poziomo */
}

.popular-label {
  top: 5px;
  right: 0px;
  background-color: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  gap: 8px;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 2px;
  padding-left: 12px;
  border: 1px solid greenyellow;
  animation: fadeUp 1s ease 0.5s forwards;
  opacity: 0;
  border-radius: 9999px;
  font-size: 14px;
  z-index: 10;
  margin-bottom: 10px;
}


/*==================== CARD 1 BUTTON NEW ====================*/
button {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* Ciemniejszy gradient domyślny: czarno-szary, symetryczny */
 /*  background: linear-gradient(135deg, #0d0d0d, #333333, #0d0d0d); */
  color: white;
  padding: 1em 1em;
  border: 1px solid;
  border-radius: 8px;
  border-color: #888888;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease; /* Płynne przejście gradientu i borderu */
}

/* SVG startuje po lewej stronie */
.svg-wrapper {
  position: absolute;
  top: 50%;
  left: 2.3em;
  transform: translateY(-50%) translateY(2px);
  transition: left 0.4s ease, transform 0.4s ease;
}

button:hover .svg-wrapper {
  left: 50%; /* przesuwa SVG na środek */
  transform: translate(-50%, -50%) translateY(2px) scale(1.1); /* wyśrodkowanie */
}

button:hover {
  /* Przezroczyste tło i border przy hoverze */
  background: transparent;
  border-color: #888888;
}

button svg {
  width: 24px;
  height: 24px;
  fill: rgba(155, 153, 153, 0);
  transition: fill 0.3s ease;
}

button:hover svg {
  color: greenyellow;
  fill: #000;
}

button span {
  transform: translateY(2px);
  transition: opacity 0.2s ease;
}

button:hover span {
  opacity: 0; /* tekst znika przy hover */
}
/*==================== CARD NEW END ====================*/

/*==================== INFO CARD PRICING ====================*/

/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-block;
  margin-bottom: 0px;
  margin-left: 5px;
}

/* Icon styling */
.icon-pricing {
  width: 18px;
  height: 18px;
  background-image: url('../img/icons/info-circle4.svg'); /* Ścieżka do ikony SVG/PNG */
  color: #E3E3E3;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon:hover {
  transform: rotate(360deg) scale(1.2);
}

/* Tooltip styling */
.tooltip {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  font-size: 14px;
  line-height: 1.4;
}

/* Tooltip Arrow */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: bounce 0.6s ease;
}

/* Bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-30px);
  }
  60% {
    transform: translateX(-50%) translateY(-15px);
  }
}

/*==================== BTN OLD ==================== */
.btn {
  margin-top: 2rem;
  margin-bottom: 2rem;
  z-index: 2 !important;
  height: 3.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border:none;
  border-radius: 100px;
  background: linear-gradient(98deg, #ffffff, #adff2f, #1a1a1a);
  background-size: 300% 100%;
  animation: animate 3s ease infinite;
  font-size: var(--font-medium);
  font-weight: 600;
  color: #E3E3E3;
  cursor: pointer;
  padding-left: 15px;
  padding-right: 15px;
}

.btn::after {
  content: "";
  height: calc(100% - 3px); 
  width: calc(100% - 3px);  
  position: absolute;
  top: 50%;                  
  left: 50%;                
  transform: translate(-50%, -50%); 
  z-index: -1 !important;
  border-radius: 100px;
  background: #000;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 100px;
  background: linear-gradient(98deg, #ffffff, #adff2f, #1a1a1a);
  background-size: 300% 100%;
  animation: animate 3s ease infinite;
  filter: blur(15px);
  opacity: 0.4;
  z-index: -2;
}

@keyframes animate {
  to {
      background-position: 0% 0%;
  }
  50% {
      background-position: 90% 0%;
  }
  100% {
      background-position: 0% 0%;
  }
}
/*==================== HERO + ICONS ====================*/

.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  max-height: 760px;
  width: 100%;
  overflow: hidden;
}

.parallax{
  transition: transform 1s linear;
}


/* Media query dla ekranów mniejszych niż 770px */
@media screen and (max-width: 766px) {
  .hero {
    display: none; /* Ukrywa sekcję .hero */
  }
  .home.sectionHome {
    position: relative; /* Ustawia kontekst dla pseudoelementu */
    background-image: url('../img/fractalmaze1.webp');
    background-size: cover; /* Dopasowanie obrazu */
    background-position: center; /* Wyśrodkowanie obrazu */
    background-repeat: no-repeat; /* Bez powtarzania */
  }
  .home.sectionHome::before {
    content: ''; /* Wymagane dla pseudoelementu */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Kolor overlay (czarny z przeźroczystością 50%) */
    z-index: 1; /* Overlay nad tłem, ale pod zawartością */
  }
  .home__container {
    position: relative; /* Zapewnia, że zawartość jest nad overlay */
    z-index: 2; /* Wyższy z-index niż overlay */
    padding-bottom: 80px;
  }
}

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 390px) {
  .container2 {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .card__content {
    padding: 2rem 1.25rem;
    border-radius: 1rem;
  }

  .blur-layer {
    position: absolute;
    left: 25%;
    width: 100px;
    height: 300px;
    background: radial-gradient(circle at center, #ccff00, transparent);
    filter: blur(150px);
    opacity: 0.3;
    z-index: 0;
  }
  
}

/* For medium devices */
@media screen and (min-width: 568px) {
  .card__container2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .card__content {
    grid-template-rows: repeat(2, max-content);
  }
  .card__button {
    align-self: flex-end;
  }
}

/* For large devices */
@media screen and (min-width: 968px) {
  .container2 {
    margin-left: auto;
    margin-right: auto;
  }
  .card {
    /* padding-top: 1rem; */
    align-items: center;
  }
  .card__container2 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card__header-circle {
    margin-bottom: var(--mb-1-25);
  }
  .card__header-subtitle {
    font-size: var(--small-font-size);
  }
}

/*==================== FAQ ====================*/
.faq__container {
  padding: 2rem 0;
}

.faq__columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

.faq__data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.section__title2 {
  font-size: var(--h1-font-size);
  margin-bottom: 1rem;
  text-align: left;
  color: #F5F5F5 !important;
}

.section__title2 span {
  font-size: inherit; /* Zapewnia, że <span> ma ten sam rozmiar co h2 */
  line-height: inherit; /* Dopasowuje linię */
}

.faq__description {
  font-size: var(--small-font-size);
  text-align: left;
  margin-bottom: 10px;
  color: #E3E3E3 !important;
}

.faq__accordion {
  display: grid;
  row-gap: 0.75rem;
}

.faq__accordion-item {
  background-color: #111111;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 6px;
  padding: 0.75rem 0.5rem;
}

.faq__accordion-item:hover {
  background-color: #111111;
  border: 1px solid greenyellow;
  border-radius: 6px;
  padding: 0.75rem 0.5rem;
}


.faq__accordion-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.faq__accordion-title {
  font-size: var(--normal-font-size);
  padding: 0 0 0 2rem;
  line-height: 1.3;
}

.faq__accordion-arrow {
  display: inline-flex;
  padding: 0.2rem;
  color: white;
  border-radius: 2px;
  font-size: 18px;
  margin-left: auto;
  transition: 0.3s;
}

.faq__accordion-arrow i {
  transition: 0.4s;
}

.faq__accordion-description {
  font-size: var(--smaller-font-size);
  padding: 0.75rem 2rem 0 2rem;
  line-height: 1.4;
}

.faq__accordion-content {
  overflow: hidden;
  height: 0;
  transition: all 0.25s ease;
}

.accordion-open {
  box-shadow: 0 8px 24px hsla(228, 66%, 45%, 0.1);
}

.accordion-open .faq__accordion-arrow i {
  transform: rotate(-180deg);
  color: greenyellow;
}

/* Responsywność */
@media screen and (max-width: 768px) {
  .faq__columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .faq__data {
    display: flex;
    flex-direction: column;
    align-items: center; /* Wyśrodkowanie elementów w pionie */
    text-align: center;
    width: 100%; /* Zapewnia pełną szerokość */
  }

  .section__title2 {
    text-align: center;
    margin-left: 0; /* Usuwa wszelkie marginesy, które mogą przesuwać */
    margin-right: 0;
    width: 100%; /* Pełna szerokość dla wyśrodkowania */
  }

  .section__title2 span {
    display: inline; /* Zapewnia, że <span> nie zaburza układu */
    margin: 0; /* Usuwa potencjalne marginesy */
  }

  .faq__description {
    text-align: center;
    width: 100%;
  }

  .animated-button2 {
    align-self: center;
  }
}

/*==================== FAQ BUTTON ====================*/
.animated-button2 {
  position: relative; /* TO ZMIENIEONE NA ABSOLUTE */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 25px;
  border: 2px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin-top: 20px; /* MARGIN LEFT DODANY I Z INDEX */
}

.animated-button2 svg {
  position: absolute;
  width: 20px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button2 .arr-1 {
  right: 16px;
}

.animated-button2 .arr-2 {
  left: -25%;
}

.animated-button2 .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button2 .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button2:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button2:hover .arr-1 {
  right: -25%;
}

.animated-button2:hover .arr-2 {
  left: 16px;
}

.animated-button2:hover .text {
  transform: translateX(12px);
}

.animated-button2:hover svg {
  fill: #212121;
}

.animated-button2:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button2:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}


/*==================== BUTTON MENU ====================*/

.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 25px;
  border: 2px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin-left: 100px;
}

.animated-button svg {
  position: absolute;
  width: 20px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}


@media (max-width: 768px) {
  .animated-button {
    display: none;
  }
}

/* SCROLL DOWN */
.scrolldown {
  --color: white;
  --sizeX: 30px;
  --sizeY: 50px;
  position: absolute; /* Zmiana na absolutne pozycjonowanie */
  top: 85%; /* 85% od góry sekcji hero */
  left: 50%; /* Centrowanie w poziomie */
  transform: translateX(-50%); /* Przesunięcie o połowę szerokości elementu */
  width: var(--sizeX);
  height: var(--sizeY);
  border: calc(var(--sizeX) / 10) solid var(--color);
  border-radius: 50px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}

/* Reszta kodu bez zmian */
.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: var(--color);
  border-radius: 100%;
  animation: scrolldown-anim 2s infinite;
  box-sizing: border-box;
  box-shadow: 0px -5px 3px 1px #2a547066;
}

@keyframes scrolldown-anim {
  0% {
    opacity: 0;
    height: 6px;
  }
  40% {
    opacity: 1;
    height: 10px;
  }
  80% {
    transform: translate(0, 20px);
    height: 10px;
    opacity: 0;
  }
  100% {
    height: 3px;
    opacity: 0;
  }
}

.chevrons {
  padding: 6px 0 0 0;
  margin-left: -3px;
  margin-top: 48px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chevrondown {
  margin-top: -6px;
  position: relative;
  border: solid var(--color);
  border-width: 0 3px 3px 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
  animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
  animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}


/* Media query dla urządzeń mobilnych (np. ekrany do 768px) */
@media (max-width: 768px) {
  .scrolldown {
    top: 90%; /* Przesunięcie niżej, np. 90% od góry sekcji */
    --sizeX: 24px; /* Mniejszy rozmiar dla mobilnych */
    --sizeY: 40px; /* Mniejszy rozmiar dla mobilnych */
  }

  .scrolldown::before {
    bottom: 25px; /* Dostosowanie pozycji kropki dla mniejszego kontenera */
    width: 5px; /* Mniejszy rozmiar kropki */
    height: 5px; /* Mniejszy rozmiar kropki */
    margin-left: -2.5px; /* Centrowanie kropki */
  }

  .chevrons {
    margin-top: 38px; /* Dostosowanie pozycji chevronów */
    width: 24px; /* Mniejsza szerokość dla spójności */
  }

  .chevrondown {
    width: 8px; /* Mniejszy rozmiar chevronów */
    height: 8px; /* Mniejszy rozmiar chevronów */
    border-width: 0 2px 2px 0; /* Cieńsze linie dla chevronów */
  }
}
/* ABOUT NEW */ 

.text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  line-height: 25px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.responsive-cell-block {
  min-height: 75px;
  position: relative; /* Ustawia punkt odniesienia dla backdrop */
  overflow: hidden; /* Zapobiega wychodzeniu backdrop poza kartę */
}

.backdrop {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 50% 50%,
      #0000 20%,
      #0000 64%,
      #fff 100%
  );
  background-size: 3px 3px;
  z-index: 0; /* Backdrop za treścią karty */
}

.responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  justify-content: flex-start;
}

.responsive-container-block.bigContainer {
  padding-top: 0px;
  padding-right: 50px;
  padding-bottom: 0px;
  padding-left: 50px;
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px;
}

.responsive-container-block.Container {
  max-width: 1100px;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.mainImg {
  width: 100%;
  height: 500px;
  object-fit: contain;
}

.blueDots {
  position: absolute;
  top: 150px;
  right: 15%;
  z-index: -1;
  left: auto;
  width: 80%;
  height: 500px;
  object-fit: cover;
}

.imgContainer {
  position: relative;
  width: 48%;
}

.responsive-container-block.textSide {
  width: 48%;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  z-index: 1; /* TUTAJ USTAWIA SIE GDZIE MA BYC ABOUT US */
}

.text-blk.heading {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
}

.text-blk.headingCenter {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.text-blk.subHeading {
  font-size: var(--normal-font-size);
  line-height: 26px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px;
  color: rgb(153, 153, 153);
  text-align: justify;
  text-justify: inter-word;
}

.cardImg {
  max-width: 24px;
  max-height: 24px;
  width: 24px !important;
  height: 24px !important;
  filter: invert(82%) sepia(92%) saturate(842%) hue-rotate(46deg) brightness(102%) contrast(95%);
}

.cardImgContainer {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.cardImgContainer, .cardText {
  position: relative;
  z-index: 1; /* Treść karty nad backdrop */
}

.responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-right: 25px;
  padding-bottom: 15px;
  padding-left: 0px;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: 0px;
}

.text-blk.cardHeading {
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
}

.text-blk.cardSubHeading {
  color: rgb(153, 153, 153);
  line-height: 22px;
}


#ixvck {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

.redDots {
  position: absolute;
  bottom: -350px;
  right: -100px;
  height: 500px;
  width: 400px;
  object-fit: cover;
  top: auto;
}



@media (max-width: 1024px) {
  .responsive-container-block.Container {
    position: relative;
    align-items: flex-start;
    justify-content: center;
  }

  .mainImg {
    bottom: 0px;
  }

  .imgContainer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    width: 60%;
  }

  .responsive-container-block.textSide {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    width: 70%;
  }

  .responsive-container-block.Container {
    flex-direction: column-reverse;
  }

  .imgContainer {
    position: relative;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
  }

  .responsive-container-block.textSide {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    width: 100%;
  }

  .responsive-container-block.Container {
    flex-direction: row-reverse;
  }

  .responsive-container-block.Container {
    flex-direction: column-reverse;
  }
}

@media (max-width: 768px) {
  .responsive-container-block.textSide {
    width: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .text-blk.subHeading {
    text-align: center;
    font-size: 17px;
    max-width: 520px;
  }

  .text-blk.heading {
    text-align: center;
  }

  .imgContainer {
    opacity: 0.8;
  }

  .imgContainer {
    height: 500px;
  }

  .imgContainer {
    width: 30px;
  }

  .responsive-container-block.Container {
    flex-direction: column-reverse;
  }

  .responsive-container-block.Container {
    flex-wrap: nowrap;
  }

  .responsive-container-block.textSide {
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
  }

  .imgContainer {
    width: 90%;
  }

  .imgContainer {
    height: 450px;
    margin-top: 5px;
    margin-right: 33.9062px;
    margin-bottom: 0px;
    margin-left: 33.9062px;
  }

  .redDots {
    display: none;
  }

  .explore {
    font-size: 16px;
    line-height: 14px;
  }

  .backdrop {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: #101010;
    background-size: 3px 3px;
    z-index: 0; /* Backdrop za treścią karty */
  }
  
}

@media (max-width: 500px) {
  .imgContainer {
    position: static;
    height: 450px;
  }

  .mainImg {
    height: 100%;
  }

  .blueDots {
    width: 100%;
    left: 0px;
    top: 0px;
    bottom: auto;
    right: auto;
  }

  .imgContainer {
    width: 100%;
  }

  .responsive-container-block.textSide {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .responsive-container-block.Container {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow-x: visible;
    overflow-y: visible;
  }

  .responsive-container-block.bigContainer {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding: 0 30px 0 30px;
    margin-bottom: -20px;
  }

  .redDots {
    display: none;
  }

  .text-blk.subHeading {
    font-size: 16px;
    line-height: 23px;
    text-align: justify;
    word-break: break-word;
    hyphens: auto;
  }

  .text-blk.heading {
    font-size: 28px;
    line-height: 28px;
  }

  .responsive-container-block.textSide {
    margin-top: 40px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .imgContainer {
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 100%;
    position: relative;
  }

  .explore {
    padding-top: 17px;
    padding-right: 0px;
    padding-bottom: 17px;
    padding-left: 0px;
    width: 100%;
  }

  #ixvck {
    width: 90%;
    margin-top: 40px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-size: 15px;
  }

  .blueDots {
    bottom: 0px;
    width: 100%;
    height: 80%;
    top: 10%;
  }

  .text-blk.cardHeading {
    font-size: 16px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 8px;
    margin-left: 0px;
    line-height: 25px;
  }

  .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
  }
}


/* ABOUT NEW RESPONSIVE */

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

body {
  margin: 0;
}

.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }
}


/* BADGE */

.badge {
  display: inline-flex; /* Zmieniono z block na flex */
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 48px;
  animation: fadeUp 1s ease 0.5s forwards;
  opacity: 0;
  z-index: 5000;
}

.badge-circle {
  width: 8px;
  height: 8px;
  background: greenyellow;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px greenyellow, 0 0 12px greenyellow;
}

.badge-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

/* Dodana animacja fadeUp */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}


/* HOW ITS WORKS? */

.qualification {
  position: relative;
}

.containerSTEP {
  max-width: 800px;
  width: 100%;
  text-align: center;
  margin-top: 100px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  z-index: 2;
}

h1 {
  font-size: 2rem;
  margin-bottom: 0px;
  font-weight: bold;
  max-width: 500px;
  margin-right: auto;
}

.subtitle {
  font-size: 0.9rem;
  margin-bottom: 100px;
  opacity: 0.8;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.step {
  flex: 1;
  min-width: 250px;
  text-align: center;
  padding: 20px;
  position: relative;
}

.step:nth-child(2) {
  margin-top: 40px;
}

.step:nth-child(3) {
  margin-top: 80px;
}

.step-number {
  font-size: 10rem;
  font-weight: bold;
  position: absolute;
  top: -95px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 1;
  background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(173,255,47,1) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.step-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  margin-top: 30px;
}

.step-description {
  font-size: 0.9rem;
  opacity: 0.7;
  position: relative;
  z-index: 2;
}

/* Style dla kształtów */
.shape {
  position: absolute;
  border-radius: 12px; /* Prostokąty z zaokrąglonymi rogami */
  z-index: 1;
  animation: float 6s ease-in-out infinite, fadeIn 1s ease-in-out;
  pointer-events: none;
}

.shape-1 { 
  width: 600px; 
  height: 140px; 
  top: 20%; 
  left: -5%; 
  transform: rotate(0deg); 
  animation-delay: 0.3s, 0s; 
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.06) 50%, transparent 100%);
}
.shape-2 { 
  width: 500px; 
  height: 120px; 
  top: 75%; 
  right: 0%; 
  transform: rotate(0deg); 
  animation-delay: 0.5s, 0s; 
  background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.06) 50%, transparent 100%);
}
.shape-3 { 
  width: 300px; 
  height: 80px; 
  bottom: 10%; 
  left: 10%; 
  transform: rotate(0deg); 
  animation-delay: 0.4s, 0s; 
  background: linear-gradient(to right, rgba(139, 92, 246, 0.15), transparent); 
}
.shape-4 { 
  width: 200px; 
  height: 60px; 
  top: 15%; 
  right: 20%; 
  transform: rotate(0deg); 
  animation-delay: 0.6s, 0s; 
  background: linear-gradient(to right, rgba(245, 158, 11, 0.15), transparent); 
}
.shape-5 { 
  width: 150px; 
  height: 40px; 
  top: 10%; 
  left: 25%; 
  transform: rotate(0deg); 
  animation-delay: 0.7s, 0s; 
  background: linear-gradient(to right, rgba(6, 182, 212, 0.15), transparent); 
}

/* Animacje */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rotate)); }
  50% { transform: translateY(-20px) rotate(var(--rotate)); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsywność */
@media (max-width: 768px) {
  h1 {
      font-size: 1.5rem;
      margin-bottom: -10px;
  }

  .subtitle {
      max-width: 80%;
      font-size: 0.8rem;
      margin-bottom: 30px;
  }

  .steps {
      flex-direction: column;
      align-items: center;
  }

  .step {
      min-width: 100%;
  }

  .step:nth-child(2),
  .step:nth-child(3) {
      margin-top: 0;
  }

  .step-number {
      top: -5px;
      font-size: 4rem;
  }

  .step-title {
      font-size: 1rem;
  }

  .step-description {
      margin-left: 10%;
      margin-right: 10%;
      font-size: 0.85rem;
  }

  .shape-1 { width: 300px; height: 70px; }
  .shape-2 { width: 250px; height: 60px; }
  .shape-3 { width: 150px; height: 40px; }
  .shape-4 { width: 100px; height: 30px; }
  .shape-5 { width: 75px; height: 20px; }
}

@media screen and (max-width: 540px) {
  .containerSTEP {
    margin-top: 60px;
    padding: 0 16px;
  }

  .steps {
    flex-direction: column;
    gap: 40px;
  }

  .step {
    padding: 16px;
    margin-top: 0 !important;
  }

  .step-number {
    font-size: 5rem;
    top: -60px;
  }

  .step-title {
    font-size: 1.1rem;
    margin-top: 20px;
  }

  .step-description {
    font-size: 0.85rem;
  }

  .section__title {
    font-size: 1.2rem;
    line-height: 1.2;
    padding: 0 12px;
  }

  .section__subtitle2 {
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 0 12px;
    width: auto;
  }

  .shape {
    display: none;
  }
}


/* LOGO */

.companies-section {
  color: #fff;
  padding: 20px 20px;
  text-align: center;
  pointer-events: none;
}

.tech-section {
  position: flex;
  color: #fff;
  padding: 0px 20px;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}

.containerLogo {
  max-width: 1200px;
  margin: 0 auto;
}

.logos-wrapper {
  overflow: hidden; /* Ukrywa loga poza kontenerem */
  position: relative; /* Potrzebne do pozycjonowania gradientów */
}

/* Gradienty po bokach */
.logos-wrapper::before,
.logos-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px; /* Szerokość gradientu */
  z-index: 1; /* Gradienty nad logotypami */
}

.logos-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #000, transparent); /* Gradient od czarnego do przezroczystego */
}

.logos-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #000, transparent); /* Gradient od czarnego do przezroczystego */
}

.logos-row {
  width: 100%;
  margin-bottom: 20px;
}

.logos-track {
  display: flex;
  align-items: center;
  white-space: nowrap; /* Zapobiega zawijaniu logotypów */
}

/* Górny rząd - przesuwanie w prawo */
.logos-row-top .logos-track {
  animation: scroll-right 20s linear infinite;
}

/* Dolny rząd - przesuwanie w lewo */
.logos-row-bottom .logos-track {
  animation: scroll-left 20s linear infinite;
}

.logos-track img {
  margin: 0 20px;
  max-width: 100px;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  filter: grayscale(100%) invert(100%) brightness(2) contrast(1.5);
  /* Blokowanie przeciągania i zaznaczania */
  -webkit-user-drag: none; /* Dla przeglądarek WebKit (Safari, Chrome) */
  user-select: none; /* Blokuje zaznaczanie */
  -webkit-user-select: none; /* Dla przeglądarek WebKit */
  -moz-user-select: none; /* Dla Firefox */
  -ms-user-select: none; /* Dla Edge */
}

/* Animacje przesuwania */
@keyframes scroll-right {
  0% {
      transform: translateX(-50%);
  }
  100% {
      transform: translateX(0%);
  }
}

@keyframes scroll-left {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-50%);
  }
}

/* Klasy dla animacji pojawiania się */
.visible {
  opacity: 0.45 !important;
}

/* Responsywność */
@media (max-width: 768px) {
  h2 {
      font-size: 1.2rem;
  }

  .logos-track img {
      max-width: 80px;
      margin: 0 15px;
  }

  .logos-row {
      margin-bottom: 15px;
  }

  .logos-wrapper::before,
  .logos-wrapper::after {
      width: 50px; /* Mniejsza szerokość gradientu na mniejszych ekranach */
  }
}



/* ------------------- QUOTE -------------- */

.quote {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.quote::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 760px) {
  .quote {
    padding: 1rem; /* Zmniejszony padding */
    margin-bottom: 50px;
  }
}

.containerQuote {
  display: flex;
  gap: 8rem;
  max-width: 1000px;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 60px;
}

.form-box {
  flex: 1;
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 1.5rem 2.5rem 1rem 2.5rem;
  border: 1px solid rgba(173, 255, 47, 0.2);
  box-shadow: 0 0 40px rgba(173, 255, 47, 0.1);
}

.form-box h1 {
  font-size: 2.0rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
  line-height: 1.1; /* Zmniejsza odstęp między liniami */
}

.form-box p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 2rem;
}

form input {
  max-width: 100%;
  padding-top: 0.8rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  margin-bottom: 0rem;
  border: 1px solid rgba(227, 227, 227, 0.2);
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 1rem;
}

form .message-input {
  width: 100%;
  height: 120px;
  padding: 1rem;
  border: 1px solid rgba(227, 227, 227, 0.2);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-family: var(--body-font);
  font-size: 1rem;
  resize: vertical; /* lub 'none' jeśli nie chcesz możliwości rozciągania */
  line-height: 1.5;
}

.input-row {

      display: block;
      width: 100%;
      gap: 1rem;
      box-sizing: border-box;
      margin-bottom: 15px; /* Dodaje odstęp między polami */
}

.submit-btn {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 300px; /* Maksymalna szerokość przycisku */
  padding: 0.8rem 1rem;
  margin: 15px auto; /* Centrowanie przycisku z marginesami góra/dół */
  border: 1px solid #ADFF2F;
  background: radial-gradient(circle at center, rgba(173, 255, 47, 0.1) 2%, transparent 80%);
  color: #ADFF2F;
  border-radius: 40px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block; /* Zapewnia centrowanie przy margin: auto */
}

.submit-btn:hover {
  background: radial-gradient(circle at center, rgba(227, 227, 227, 0.25) 30%, transparent 80%);
  color: #fff;
  border: 1px solid #E3E3E3
}

.info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-box ul {
  list-style: none;
  padding: 0;
}

.info-box li {
  margin-top: 10px;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.info-box li::before {
  content: '\2713';
  color: greenyellow;
  font-size: 15px;
  font-weight: bold;
  border: solid 1px greenyellow;
  border-radius: 50px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 8px;
}

.info-box p {
  font-size: 1rem;
  margin-top: 1rem;
  color: #ccc;
  margin-left: 3rem;
}

.info-box .phone {
  font-size: 1.5rem;
  color: greenyellow;
  font-weight: bold;
}

/* CHECK BOX QUOTE */

.checkbox-wrapper {
  --checkbox-size: 20px;
  --checkbox-color: greenyellow;
  --checkbox-shadow: rgba(72, 255, 0, 0.3);
  --checkbox-border: greenyellow;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 5px;
}

.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-wrapper .checkmark {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--checkbox-border);
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px var(--checkbox-shadow);
  overflow: hidden;
}

.checkbox-wrapper .checkmark::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--checkbox-color), greenyellow);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0) rotate(-45deg);
}

.checkbox-wrapper input:checked ~ .checkmark::before {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.checkbox-wrapper .checkmark svg {
  width: 0;
  height: 0;
  color: #1a1a1a;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.checkbox-wrapper input:checked ~ .checkmark svg {
  width: 12px;
  height: 12px;
  transform: rotate(360deg);
}

.checkbox-wrapper:hover .checkmark {
  border-color: var(--checkbox-color);
  transform: scale(1.1);
  box-shadow:
    0 0 20px var(--checkbox-shadow),
    0 0 40px var(--checkbox-shadow),
    inset 0 0 10px var(--checkbox-shadow);
}

.checkbox-wrapper input:checked ~ .checkmark {
  animation: pulse 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px var(--checkbox-shadow);
  }
  50% {
    transform: scale(0.9);
    box-shadow:
      0 0 30px var(--checkbox-shadow),
      0 0 50px var(--checkbox-shadow);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px var(--checkbox-shadow);
  }
}

.checkbox-wrapper .label {
  margin-left: 10px;
  color: var(--checkbox-color);
  font-size: 14px;
  text-shadow: 0 0 10px var(--checkbox-shadow);
  opacity: 0.9;
  transition: all 0.3s;
}

.checkbox-wrapper:hover .label {
  opacity: 1;
  transform: translateX(5px);
}


/* ICON QUOTE */
.IconQuote {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.05;
  background-image: url('../img/icons/bg-quote-1.svg'); /* Ścieżka do ikony SVG/PNG */
  filter: brightness(1000%) contrast(100%);
  pointer-events: none;
}
.IconQuote2 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.03;
  background-image: url('../img/icons/bg-quote-3.svg'); /* Ścieżka do ikony SVG/PNG */
  filter: brightness(1000%) contrast(100%);
  pointer-events: none;
}
.IconQuote3 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.03;
  background-image: url('../img/icons/bg-quote-5.svg'); /* Ścieżka do ikony SVG/PNG */
  filter: brightness(1000%) contrast(100%);
  pointer-events: none;
}

/* Opcje rozmiaru i pozycji tła z użyciem zmiennych CSS */
.IconQuote--size-contain {
  background-size: contain;
}

.IconQuote--size-auto {
  background-size: auto;
}

.IconQuote--size-custom {
  background-size: var(--bg-size, 50%); /* Domyślnie 50%, można nadpisać */
}

.IconQuote--position-custom {
  background-position: var(--bg-position-x, 50%) var(--bg-position-y, 50%); /* Domyślnie centrum, można nadpisać */
}

/* QUOTE LOGO */

.logoquote {
  display: flex;
  justify-content: left; /* teraz logo też będzie na środku */
  padding-bottom: 1.5rem;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10;
}

.quote__logo {
  display: inline-block;
  text-decoration: none;
}

.quote__logo-img {
  max-width: 100px;
  height: auto;
  display: block;
}

.external-btn {
  width: calc(50% - 4rem); /* dopasowuje się do szerokości form-box, biorąc pod uwagę gap */
  height: 50px;
  padding: 0rem 0rem;
  margin-top: 0rem;
  background: transparent;
  color: #ADFF2F;
  border: 2px solid #ADFF2F;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.external-btn:hover {
  background: #ADFF2F;
  color: #000;
}

.external-button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.external-button {
  width: calc(50% - 4rem); /* dopasowuje się do szerokości form-box, biorąc pod uwagę gap */
  --primary-color: #e3e3e3;
  --hovered-color: #ADFF2F;
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 14px;
  gap: 0.5rem;
  align-items: center;
  z-index: 10;
}

.external-button p {
  margin: 0;
  position: relative;
  font-size: 14px;
  color: var(--primary-color);
}

.external-button::after {
  position: absolute;
  content: "";
  width: 0;
  right: 0; /* <-- zmiana z left: 0 */
  bottom: -7px;
  background: var(--hovered-color);
  height: 2px;
  transition: 0.3s ease-out;
  transform-origin: right; /* <-- nowo dodane */
}


.external-button:hover::after {
  width: 100%;
}

.external-button:hover p::before {
  width: 100%;
}

.external-button:hover svg {
  transform: translateX(4px); /* <-- był +4px */
  color: var(--hovered-color);
}

.external-button svg {
  color: var(--primary-color);
  transition: 0.2s;
  position: relative;
  width: 15px;
  transition-delay: 0.2s;
  rotate: 180deg;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}
@media (max-width: 900px) {
  .containerQuote {
    flex-direction: column;
    gap: 2rem;
  }

  .external-button {
    display: none;
  }
}



/* features-button */

.features-button {
  font-size: 12px;
  color: #E3E3E3; /* Bardziej kontrastowy kolor */
  font-family: var(--body-font);
  font-weight: 400;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.features-button:focus,
.features-button:hover {
  color: #adff2f; /* Wyraźniejszy kolor po najechaniu */
}

.features-button:focus:after,
.features-button:hover:after {
  width: 0%; /* Pasek znika */
  left: 50%; /* Zwijanie do środka */
}

.features-button:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 0%; /* Pasek zaczyna od lewej */
  position: absolute;
  width: 100%; /* Pasek widoczny domyślnie */
  height: 3px; /* Grubszy pasek dla widoczności */
  background-color: rgba(173, 255, 47, 0.3); /* Zielony pasek */
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}

/* Future table */

.feature-table {
  width: 100%;
  margin-top: 80px;
  border-collapse: collapse;
  background-color: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.feature-table th { /* ramki do okola */
  border: none;
  padding: 12px;
  text-align: center;
}

.feature-table td {
  border: 1px solid #5f5f5f67;
  border-left: none;
  border-right: none;
  padding: 10px;
  text-align: center;
}

.feature-table td.Growth{
  background-color: rgba(173, 255, 47, 0.15);
  border: 2px solid greenyellow;
  border-top: 1px solid #5f5f5f67;
  border-bottom: 1px solid #5f5f5f67;
}

.feature-table th.GrowthBottom {
  background-color: rgba(173, 255, 47, 0.15);
  border: 2px solid greenyellow;
  border-top: 1px solid #5f5f5f67;
}

.feature-table th.GrowthTop {
  background-color: rgba(173, 255, 47, 0.15);
  border: 2px solid greenyellow;
  border-bottom: 1px solid #5f5f5f67;
}

.feature-table th.Top {
  color: #fff;
}

.feature-table th.TopOne {
  color: greenyellow;
  font-size: 32px;
  font-weight: 800;
}

.feature-table td.TopOne {
  color: greenyellow;
  font-size: 26px;
  font-weight: 800;
  padding-top: 35px;
}

.feature-table th:first-child,
.feature-table td:first-child {
  text-align: left;
  width: 40%;
}

.feature-table td > div {
  display: inline-block;
margin-bottom: -4px;
  height: 100%;
}

.feature-table th:not(:first-child),
.feature-table td:not(:first-child) {
  width: 13%;
}

.feature-table th {
  background-color: #000;
  color: greenyellow;
  font-weight: 600;
}

.feature-table td .check {
  color: greenyellow;
  font-weight: bold;
}

.feature-table td .x {
  color: #e3e3e3;
  font-weight: bold;
}

@media (max-width: 480px) {
  .feature-table th:first-child,
  .feature-table td:first-child {
    width: 50%;
    font-size: 12px;
  }

  .feature-table th.TopOne {
    width: 50%;
    font-size: 22px;
  }

  .feature-table td.TopOne {
    width: 50%;
    font-size: 18px;
  }

  .feature-table th:not(:first-child),
  .feature-table td:not(:first-child) {
    width: 16%;
    font-size: 14px;
    padding: 10px 4px;
  }
}

.featureQuote {
  display: flex;
  gap: 1rem;
  max-width: 900px;
  width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 540px) {
  .featureQuote {
    display: flex;
    gap: 1rem;
    max-width: 900px;
    width: auto;
    flex-wrap: wrap;
    margin-bottom: 100px;
  }
}

/* TITLES TABLE */

.growth-desc {
  font-size: 11px;
  color: gray;
}

.price-prefix {
  font-weight: normal;
}

.price-amount {
  font-weight: bold;
  color: yellowgreen;
}

/* BUTTON BUY NOW */

.buttonGlow {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--clr);
  color: #000;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 5px;
  padding: 0.35rem 0.5rem;
  padding-left: 10px;
  padding-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.buttonGlow__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.buttonGlow:hover {
  background-color: #e3e3e3;
}

.buttonGlow:hover .buttonGlow__icon-wrapper {
  color: greenyellow;
}

.buttonGlow__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.buttonGlow:hover .buttonGlow__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.buttonGlow:hover .buttonGlow__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

@media (max-width: 600px) {
  .buttonGlow {
    font-size: 0.75rem;
    padding: 0.5rem;
    flex-direction: column; /* ikona nad tekstem */
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    width: auto; /* możesz też dać 100% jeśli chcesz pełną szerokość */
    max-width: 120px; /* ograniczamy szerokość */
    white-space: normal; /* pozwól na zawijanie tekstu */
  }

  .buttonGlow__icon-wrapper {
    width: 22px;
    height: 22px;
  }

  .buttonGlow__icon-svg {
    width: 8px;
  }
}

/* BUTTON BUY NOW 2*/

.buttonGlow2 {
  width: 90px;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  background-color: #e3e3e3;
  color: #000;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 5px;
  padding: 0.35rem 0.5rem;
  padding-left: 10px;
  padding-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.buttonGlow2__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.buttonGlow2:hover {
  background-color: greenyellow;
}

.buttonGlow2:hover .buttonGlow2__icon-wrapper {
  color: #e3e3e3;
}

.buttonGlow2__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.buttonGlow2:hover .buttonGlow2__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.buttonGlow2:hover .buttonGlow2__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

@media (max-width: 600px) {
  .buttonGlow2 {
    font-size: 0.75rem;
    padding: 0.5rem;
    flex-direction: column; /* ikona nad tekstem */
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    width: 80%; /* możesz też dać 100% jeśli chcesz pełną szerokość */
    max-width: 120px; /* ograniczamy szerokość */
    white-space: normal; /* pozwól na zawijanie tekstu */
  }

  .buttonGlow2__icon-wrapper {
    width: 22px;
    height: 22px;
  }

  .buttonGlow2__icon-svg {
    width: 8px;
  }
}


/* LOGO */

.logof {
  display: flex;
  justify-content: left; /* teraz logo też będzie na środku */
  padding-bottom: 0rem;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10;
}

.f__logo {
  display: inline-block;
  text-decoration: none;
}

.f__logo-img {
  max-width: 100px;
  height: auto;
  display: block;
}

/* feature button under table */

.fbutton {
  width: 100%; /* dopasowuje się do szerokości form-box */
  height: 50px;
  margin-top: 0rem;
  background: transparent;
  color: #ADFF2F;
  border: 2px solid #ADFF2F;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex; /* Upewniamy się, że jest flex */
  justify-content: flex-start; /* Wyrównanie do lewej */
  align-items: center; /* Pionowe wyśrodkowanie zawartości */
  z-index: 15;
}

.fbutton {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.fbutton {
  width: auto; /* dopasowuje się do szerokości form-box */
  --primary-color: #e3e3e3;
  --hovered-color: #ADFF2F;
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 14px;
  gap: 0.5rem;
  align-items: center;
  padding-left: 5px;
  justify-content: flex-start; /* Wyrównanie do lewej */
  z-index: 10;
}

.fbutton p {
  margin: 0;
  position: relative;
  font-size: 14px;
  color: var(--primary-color);
}

.fbutton::after {
  position: absolute;
  content: "";
  width: 0;
  right: 0;
  bottom: -7px;
  background: var(--hovered-color);
  height: 2px;
  transition: 0.3s ease-out;
  transform-origin: right;
}

.fbutton:hover::after {
  width: 100%;
}

.fbutton:hover p::before {
  width: 100%;
}

.fbutton:hover svg {
  transform: translateX(4px);
  color: var(--hovered-color);
}

.fbutton svg {
  color: var(--primary-color);
  transition: 0.2s;
  position: relative;
  width: 15px;
  transition-delay: 0.2s;
  rotate: 180deg;
}

@media (max-width: 760px) {
  .fbutton {
    display: none; /* Ukrywa button */
  }
}

/* Privacy-policy */

.Privacy {
  max-width: 900px;
  width: 100%;
  margin: 20px auto; /* Changed to auto for horizontal centering */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 50px;
  border-radius: 8px;
}

.Privacy h1 {
  font-size: 3rem;
  color: greenyellow;
  margin-top: 50px;
  margin-bottom: 20px;
}

.Privacy h2{
 font-size: 1.5rem;
 margin-top: 20px;
 color: #E3E3E3;
}

.Privacy p{
  font-size: 1rem;
  color: #E3E3E3;
}

.Privacy ul {
  padding-left: 20px;
  list-style-type: square;
}

/* Terms */

.Terms {
  max-width: 900px;
  width: 100%;
  margin: 20px auto; /* Changed to auto for horizontal centering */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 50px;
  border-radius: 8px;
}

.Terms h1 {
  font-size: 3rem;
  color: greenyellow;
  margin-top: 50px;
  margin-bottom: 20px;
}

.Terms h2{
 font-size: 1.5rem;
 margin-top: 20px;
 color: #E3E3E3;
}

.Terms p{
  font-size: 1rem;
  color: #E3E3E3;
}

.Terms ul {
  padding-left: 20px;
  list-style-type: square;
}

/* ERROR 404 Page */

#error-404 {
  max-width: 900px;
  margin: auto;
  padding-top: 25vh;
  padding-left: 30px;
  padding-right: 30px;
}

.containerError {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.text-column,
.image-column {
  flex: 1;
}

.text-column {
  text-align: left;
}

.text-column h1 {
  font-size: 48px;
  color: #e3e3e3;
  margin-bottom: 0px;
}

.tekst {
  color: greenyellow;
  font-weight: bold;
  font-size: 1.2em;
  letter-spacing: 2px;
}

.text-column p {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.text-column .button {
  display: inline-block;
  text-decoration: none;
  color: #000;
  background-color: greenyellow;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

.image-column img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Media query dla ekranów do 768px (tablety) */
@media (max-width: 768px) {
  #error-404 {
      max-width: 600px;
      padding: 50px;
  }

  .containerError {
      flex-direction: column;
      gap: 30px;
      padding-top: 50px;
  }

  .text-column {
      text-align: center;
  }

  .text-column h1 {
      font-size: 36px;
  }

  .text-column p {
      font-size: 16px;
  }

  .image-column img {
      max-width: 80%;
      margin: 0 auto;
  }
}

/* Media query dla ekranów do 480px (telefony) */
@media (max-width: 480px) {
  #error-404 {
      max-width: 100%;
      padding: 20px;
  }

  .text-column h1 {
      font-size: 28px;
  }

  .text-column p {
      font-size: 14px;
      margin-bottom: 15px;
  }

  .text-column .button {
      font-size: 14px;
      padding: 8px 16px;
  }

  .image-column img {
      max-width: 100%;
  }
}


  /* BENTO GRID */

.bento-section {
  width: 100%;
  max-width: 1000px;
  padding: 2rem;
  background-color: #000;
  margin: auto;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.bento-item {
  background-color: #111;
  border-radius: 16px;
  transition: transform 0.3s ease;
  height: 300px;
  border: solid 1px #1a1a1a;
  position: relative;
  overflow: hidden; /* dla efektów tła */
  display: flex;
  align-items: flex-end; /* tekst od dołu */
  justify-content: center;
  padding: 0 2rem 2rem 2rem;
}

.bento-item:hover {
  transform: scale(1.02);
}

/* Layout siatki */
.item-1 {
  grid-column: 1 / 2;
  grid-row: 1;
}
.item-2 {
  grid-column: 2 / 4;
  grid-row: 1;
}
.item-3 {
  grid-column: 1 / 3;
  grid-row: 2;
}
.item-4 {
  grid-column: 3 / 4;
  grid-row: 2;
}

/* Spójny layout dla treści */
.bento-content-bottom {
  text-align: left;
  width: 100%;
  max-width: 100%;
  z-index: 5;
}

/* Tytuł i opis */
.titleBento {
  font-size: 16px;
  font-weight: 600;
  color: #e3e3e3;
  display: block;
  margin-top: 5px;
}

.descriptionBento {
  font-size: 14px;
  color: #8a8a8a;
  display: block;
  margin-top: 5px;
}

.highlightBento {
  position: relative; /* Bazowy kontekst dla pseudo-elementu */
  font-size: 120px;
  font-weight: 900;
  color: greenyellow;
  text-align: center;
  padding-top: 10px;
  margin-bottom: -20px;
  text-shadow: 0 0 8px rgba(173, 255, 47, 0.5);
  display: block;
  background-image: url('../img/bento/text48h50bigger.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.highlightBento::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1; /* Teraz działa jak trzeba */
  pointer-events: none;
}

/* Bazowe tło z ziarnistością */
.bento-gradient-bg {
  background: linear-gradient(135deg, #0a0a0a 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.bento-gradient-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

.bento-custom-bg {
  background: linear-gradient(to right, #222, #111);
}


.bento-svg-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.item-1 .bento-svg-bg {
  background-image: url('../img/bento/text48h50bigger.svg');
}


.item-3 .bento-svg-bg {
  background-image: url('../img/bento/new.svg');
  top: 20px;
  z-index: 1;
  margin-left: 22%;
}

.item-3 {
  display: flex;
  align-items: bottom; 
  justify-content: space-between; 
}
.item-3 .bento-content-bottom {
  width: 50%; 
}

.item-2 {
  position: relative;
  width: 100%;
  height: 300px;
}

.bento-svg-bgg {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.item-2 .bento-svg-bgg {
  background-image: url('../img/bento/sale12.svg');
  background-position: right top !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  right: 3%;
  width: 420px;
  height: 100%;
  z-index: 1;
}

.item-4 .bento-svg-bgg {
  background-image: url('../img/bento/progress.svg');
  background-position: right top !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  right: 5%;
  width: 140px;
  height: 100%;
  z-index: 0;
}

.titleBento,
.descriptionBento {
    position: relative; /* Tworzy nowy kontekst układania */
    z-index: 10; /* Wyższy niż z-index: 0 dla bento-svg-bgg */
}

.tile2 {
  width: calc(100% + 4rem); /* Dodajemy 2rem + 2rem paddingu z lewej i prawej */
  height: calc(100% + 2rem); /* Dodajemy 2rem paddingu z dołu */
  background-image: 
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  position: absolute;
  top: -2rem; /* Przesuwamy w górę, aby zniwelować padding */
  left: -2rem; /* Przesuwamy w lewo, aby zniwelować padding */
  z-index: 0; /* Upewniamy się, że tło jest pod treścią */
}

canvas {
  position: absolute;
  top: -2rem; /* Przesuwamy w górę, aby zniwelować padding */
  left: -2rem; /* Przesuwamy w lewo, aby zniwelować padding */
  width: calc(100% + 4rem); /* Rozszerzamy na pełną szerokość + padding */
  height: calc(100% + 2rem); /* Rozszerzamy na pełną wysokość + padding */
  z-index: 0; /* Upewniamy się, że canvas jest pod treścią */
}

    .tile {
      position: absolute;
      top: -2rem; /* Przesuwamy w górę, aby zniwelować padding */
      left: -2rem; /* Przesuwamy w lewo, aby zniwelować padding */
      width: calc(100% + 4rem); /* Rozszerzamy na pełną szerokość + padding */
      height: calc(100% + 2rem); /* Rozszerzamy na pełną wysokość + padding */
      background-color: transparent; /* Przezroczyste tło kafelka */
      background-image: 
        repeating-radial-gradient(circle at 0 100%, transparent 0, rgba(255,255,255,0.05) 20px);
      opacity: 0.4; /* Lekka przezroczystość całego kafelka */
    }

.tile-new {
    position: absolute;
    top: -2rem; /* Przesuwamy w górę, aby zniwelować padding */
    left: -2rem; /* Przesuwamy w lewo, aby zniwelować padding */
    width: calc(100% + 4rem); /* Rozszerzamy na pełną szerokość + padding */
    height: calc(100% + 2rem); /* Rozszerzamy na pełną wysokość + padding */
    background-color: transparent; /* Przezroczyste tło kafelka */
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent),
        linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.03) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.03) 75%, transparent);
    background-size: 40px 40px; /* Rozmiar siatki */
    opacity: 0.4; /* Lekka przezroczystość całego kafelka */
    z-index: 0; /* Upewniamy się, że tło jest pod treścią */
}
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-item {
    height: auto;
    min-height: 280px; /* Poprawiona minimalna wysokość */
    padding: 1rem;
    flex-direction: column;
    justify-content: flex-end;
  }

  .item-1,
  .item-2,
  .item-3,
  .item-4 {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  .item-4 .bento-svg-bgg {
  background-image: url('../img/bento/progress.svg');
  background-position: top right !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  height: 100%;
  z-index: 0;
}

.item-2 .bento-svg-bgg {
  background-image: url('../img/bento/sale12.svg');
  background-position: right top !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  right: 3%;
  width: 360px;
  height: 100%;
  z-index: 1;
}

.item-3 .bento-svg-bg {
  background-image: url('../img/bento/new.svg');
  top: 20px;
  z-index: 1;
  margin-left: 22%;
  width: 90%;
}

  .item-3 .bento-content-bottom {
    width: 100%; /* Poprawka: tekst nie zawija się zbyt wcześnie */
  }
}

@media (max-width: 500px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-item {
    height: auto;
    min-height: 280px; /* Poprawiona minimalna wysokość */
    padding: 1rem;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* wysokosc kafelka 3   .item-3 {
    min-height: 380px;
  } */

  .item-1,
  .item-2,
  .item-4 {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

.item-3 {
  grid-column: span 1 !important;
  grid-row: auto !important;
  display: flex;
  flex-direction: column; /* ustawia elementy pionowo */
  min-height: 380px;
}

.item-3 .animated-button3 {
  top: 5%;
}
  .item-4 .bento-svg-bgg {
  background-image: url('../img/bento/progress.svg');
  background-position: top right !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  width: 60%;
  height: 100%;
  z-index: 0;
}

.item-2 .bento-svg-bgg {
  background-image: url('../img/bento/sale12.svg');
  background-position: right top !important;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  right: 3%;
  width: 85%;
  height: 100%;
  z-index: 1;
}

.item-3 .bento-svg-bg {
  background-image: url('../img/bento/new.svg');
  top: 20px;
  z-index: 1;
  margin-left: 22%;
  width: 75%;
}

  .item-3 .bento-content-bottom {
    width: 100%; /* Poprawka: tekst nie zawija się zbyt wcześnie */
  }
}

/*==================== Kafelek3 BUTTON ====================*/
.animated-button3 {
  position: absolute; /* TO ZMIENIEONE NA ABSOLUTE */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 25px;
  border: 2px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  z-index: 5;
  right: 12%;
  top: 65%;
}

.animated-button3 svg {
  position: absolute;
  width: 20px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button3 .arr-1 {
  right: 16px;
}

.animated-button3 .arr-2 {
  left: -25%;
}

.animated-button3 .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button3 .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button3:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button3:hover .arr-1 {
  right: -25%;
}

.animated-button3:hover .arr-2 {
  left: 16px;
}

.animated-button3:hover .text {
  transform: translateX(12px);
}

.animated-button3:hover svg {
  fill: #212121;
}

.animated-button3:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button3:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

/* PRICING BUTTON NEW */

.pricing-button {
  --primary-color: #111;
  --secondary-color: #e3e3e3;
  --hoverarrow-color: greenyellow;
  --hover-color: #2c2c2c;
  --arrow-width: 10px;
  --arrow-stroke: 2px;
  box-sizing: border-box;
  border: 1px solid greenyellow;
  border-radius: 24px;
  color: var(--secondary-color);
  padding: 0.8em 1.2em;
  background: var(--primary-color);
  display: flex;
  transition: 0.2s background;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
  width: fit-content; /* lub np. max-content */
  margin: 0 auto;
}

.pricing-button .arrow-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-button .arrow2 {
  margin-top: 1px;
  width: var(--arrow-width);
  background: var(--primary-color);
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}

.pricing-button .arrow2::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: solid var(--secondary-color);
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  display: inline-block;
  top: -3px;
  right: 3px;
  transition: 0.2s;
  padding: 3px;
  transform: rotate(-45deg);
}

.pricing-button:hover {
  background-color: var(--hover-color);
  border: 1px solid #e3e3e3;
}

.pricing-button:hover .arrow2 {
  background: var(--secondary-color);
}

.pricing-button:hover .arrow2:before {
  right: 0;
}

/* PRICING BUTTON MIDDLE NEW */

.pricing-buttonMiddle {
  --primary-color: #2c2c2c;
  --secondary-color: #e3e3e3;
  --hoverarrow-color: #e3e3e3;
  --hover-color: #2c2c2c;
  --arrow-width: 10px;
  --arrow-stroke: 2px;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  border-radius: 24px;
  color: var(--secondary-color);
  padding: 0.8em 1.2em;
  background: var(--primary-color);
  display: flex;
  transition: 0.2s background;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
  width: fit-content; /* lub np. max-content */
  margin: 0 auto;
}

.pricing-buttonMiddle .arrow-wrapper1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-buttonMiddle .arrow3 {
  margin-top: 1px;
  width: var(--arrow-width);
  background: var(--primary-color);
  height: var(--arrow-stroke);
  position: relative;
  transition: 0.2s;
}

.pricing-buttonMiddle .arrow3::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: solid var(--secondary-color);
  border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
  display: inline-block;
  top: -3px;
  right: 3px;
  transition: 0.2s;
  padding: 3px;
  transform: rotate(-45deg);
}

.pricing-buttonMiddle:hover {
  background-color: var(--hover-color);
  border: 1px solid greenyellow;
}

.pricing-buttonMiddle:hover .arrow3 {
  background: var(--secondary-color);
}

.pricing-buttonMiddle:hover .arrow3:before {
  right: 0;
}


/* HOW MUCH COST WEBSITE */

    
.how-much {
  max-width: 1000px;
  margin: 150px auto;
  padding: 40px 30px;
  text-align: left;
}

.how-much h1 {
  color: #adff2f; /* zielonkawo */
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.how-much h2 {
  color: #ff4c4c;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.how-much p {
  color: #dddddd;
  font-size: 16px;
  line-height: 1.6;
}

/* Separator z datą */
.date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.date-label {
  white-space: nowrap;
  font-weight: bold;
  color: #adff2f;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.separator-line {
  flex-grow: 1;
  height: 1px;
  background-color: #555;
}

/* Kolumny */
.content-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
  gap: 30px;
}

.column-image {
  flex: 1 1 40%;
}

.column-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.column-text {
  flex: 1 1 50%;
}

.column-text h3 {
  margin-top: 0;
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 10px;
}

.column-text p {
  color: #cccccc;
  font-size: 16px;
  line-height: 1.5;
}

/* Responsywność */
@media (max-width: 768px) {
  .content-columns {
    flex-direction: column;
    align-items: center;
  }

  .column-image,
  .column-text {
    flex: 1 1 100%;
    margin: 0;
  }

  .how-much {
    padding: 30px 20px;
  }
}

    /* TABLE COMPERE NEW */

       table {
            border-collapse: collapse;
            margin: auto;
            margin-top: 20px;
            table-layout: fixed; /* Stały układ tabeli */
        }
        th, td {
            border: 1px solid #5f5f5f67;
            border-left: none;
            border-right: none;
            padding: 8px;
            text-align: center;
            width: 30%; /* Równa szerokość dla Zasoby i aktywnej kolumny */
        }
        /* Kolumna Zasoby zawsze widoczna */
        .resources {
            display: table-cell;
            width: 70%;
            text-align: left;
            vertical-align: middle;
        }

        .resources .tooltip-container{
          margin-bottom: -3px;
        }
        .resources2 {
            display: table-cell;
            width: 70%;
            text-align: left;
            color: greenyellow;
            font-weight: 600;
            font-size: 22px;
        }
        /* Ukryj kolumny przełączane domyślnie */
        .column {
            display: none;
        }
        /* Pokaż aktywną kolumnę */
        .column.active {
            display: table-cell;
        }
        /* Style dla przycisków radiowych */
        .radio-inputs {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            border-radius: 0.5rem;
            background-color: #e3e3e3;
            box-sizing: border-box;
            box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
            padding: 0.25rem;
            width: 300px;
            font-size: 14px;
            margin: auto;
        }
        .radio-inputs .radio {
            flex: 1 1 auto;
            text-align: center;
        }
        .radio-inputs .radio input {
            display: none;
        }
        .radio-inputs .radio .name {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            border: none;
            padding: .5rem 0;
            color: rgba(51, 65, 85, 1);
            transition: all .15s ease-in-out;
        }
        .radio-inputs .radio input:checked + .name {
            background-color: #c0f040;
            font-weight: 900;
        }

        .table1 td .check {
        color: greenyellow;
        font-weight: bold;
        }

        .table1 td .x {
          color: #e3e3e3;
          font-weight: bold;
        }

  

        /* Domyślnie tabele i radio-inputs są ukryte */
        .table1, .feature-table, .radio-inputs {
            display: none;
        }

        /* Poniżej 650px wyświetlamy table1 i radio-inputs */
        @media screen and (max-width: 650px) {
            .table1 {
                display: block;
            }
            .radio-inputs {
              display: flex;
            }
        }

        /* Powyżej 650px wyświetlamy feature-table */
        @media screen and (min-width: 651px) {
            .feature-table {
                display: table;
            }
        }




        /* CHECK BOX CONTACT FORM */

        /* Kontener pola */
        .fs-checkbox-field {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        /* Ukrywamy natywny checkbox */
        .fs-checkbox {
          position: absolute;
          opacity: 0;
        }

        /* Stylujemy "fałszywy" checkbox poprzez pseudo-element */
        .fs-checkbox + label {
          position: relative;
          padding-left: 1.5rem;
          cursor: pointer;
        }

        .fs-checkbox + label::before {
          content: '';
          position: absolute;
          left: 0;
          top: 2px;
          width: 1rem;
          height: 1rem;
          border: 1px solid greenyellow;
          border-radius: 6px;
          background-color: #000;
          transition: background-color 0.2s, border-color 0.2s;
        }

        .fs-checkbox:checked + label::before {
          background-color: greenyellow;
          border-color: #e3e3e3;
        }

        .fs-checkbox:checked + label::after {
          content: '✔';
          position: absolute;
          left: 3px;
          top: 2px;
          font-size: 0.7rem;
          color: #000;
        }

        .fs-label {
        color: #e3e3e3;
        font-size: 0.9rem; /* możesz zmienić na mniejszą lub większą wartość */
       }



       /* CONTACT NEW SECTION */

      .contact-section {
            background: #000;
            padding: 0;
            max-width: 1100px;
            width: 100%;
            display: flex;
            overflow: hidden;
            margin: 0 auto;
        }

        .contact-info {
            background: #000;
            padding: 60px 50px;
            flex: 1;
            color: #e3e3e3;
            display: flex;
            flex-direction: column;
            justify-content: center;   /* 🔹 wyśrodkowanie pionowe */
        }

        .contact-info h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: #e3e3e3;
        }

        .contact-info p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #b3b3b3;
            margin-bottom: 20px;
            max-width: 75%;
        }

        .contact-details {
            margin-bottom: 50px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            padding: 15px 20px;
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            width: fit-content;
        }

        .contact-item:hover {
            background: rgba(173, 255, 47, 0.1);
            transform: translateX(5px);
        }

        .contact-icon {
            width: 20px;
            height: 20px;
            margin-right: 15px;
            fill: greenyellow;
        }

        .contact-text {
            font-size: 1rem;
            color: #e3e3e3;
        }

        .social-media {
            display: flex;
            gap: 15px;
            margin-left: 20px;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #e3e3e3;
            background: rgba(51, 51, 51, 0.3);
        }

        .social-icon.facebook {
            background: rgba(51, 51, 51, 0.3);
        }

        .social-icon.twitter {
            background: rgba(51, 51, 51, 0.3);
        }

        .social-icon.instagram {
            background: rgba(51, 51, 51, 0.3);
        }

        .social-icon:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(173, 255, 47, 0.3);
            background: rgba(173, 255, 47, 0.1);
        }

        .contact-form-container {
            background: linear-gradient(135deg, #000 0%, #111 100%);
            padding: 30px 0px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 25px;

            border: 1px solid transparent;
            background-image: linear-gradient(#000, #000),
                              linear-gradient(90deg, lime, greenyellow);
            background-origin: border-box;
            background-clip: padding-box, border-box;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #e3e3e3;
            font-size: 0.95rem;
        }

        .form-input {
            width: 100%;
            padding: 15px 18px;
            border: 2px solid #444;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #1a1a1a;
            color: #e3e3e3;
        }

        .form-input:focus {
            outline: none;
            border-color: greenyellow;
            background: #1a1a1a;
            box-shadow: 0 0 0 3px rgba(173, 255, 47, 0.1);
        }

        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }

        .submit-btn {
            background: greenyellow;
            color: #000;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

        .submit-btn:hover {
            background: #9acd32;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(173, 255, 47, 0.3);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

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

            .contact-info,
            .contact-form-container {
                padding: 40px 5px;
                margin-right: 10px;
                margin-left: 10px;
            }

            .contact-info h2 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
    .contact-text2 {
        font-size: 12px !important;
    }
}


        /* FORM NEWFORM */
.NEWFORM {
  width: 100%;
  margin: auto;
  padding-top: 0px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.NEWFORM input {
  padding: 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid rgba(227, 227, 227, 0.2);
  background: #111;
  color: #e3e3e3;
}

.NEWFORM textarea {
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 36px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid rgba(227, 227, 227, 0.2);
  background: #111;
  color: #e3e3e3;
}

.NEWFORM input::placeholder,
.NEWFORM textarea::placeholder {
  color: #e3e3e3;
  font-size: 16px;
  font-family: var(--body-font);
}

.NEWFORM label {
  color: #e3e3e3;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}




/* MODALCONTACT */
.modalcontact {
  display: none; /* ukryty domyślnie */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.modalcontact:target {
  display: block; /* pokazuje modal gdy w URL jest #modalcontact */
}

.modalcontact-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  max-width: 300px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: #000;
}

.modalcontact-content h2{
  text-align: center;
  font-size: 16px;
  color: #000 !important;
}

.modalcontact-content p{
  text-align: center;
  font-size: 16px;
  color: #000 !important;
}

.modalcontact .modalcontact-content {
  color: #000 !important;
}

.modalcontact-close-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 15px;
  background: greenyellow;
  color: black;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

/* MODALCONTACT QUOTE*/
.modalcontact2 {
  display: none; /* ukryty domyślnie */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.modalcontact2:target {
  display: block; /* pokazuje modal gdy w URL jest #modalcontact */
}

.modalcontact2-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  max-width: 300px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: #000;
  height: 50%;
}

.modalcontact2-content h2{
  text-align: center;
  font-size: 16px;
  color: #000 !important;
}

.modalcontact2-content p{
  text-align: center;
  font-size: 16px;
  color: #000 !important;
}

.modalcontact2 .modalcontact2-content {
  color: #000 !important;
}

.modalcontact2-close-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 15px;
  background: greenyellow;
  color: black;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

@media (max-width: 480px) {
    .modalcontact-content,
    .modalcontact2-content {
        height: 50% !important; /* zmniejsza wysokość modali */
        margin: 25% auto !important; /* przesuwa nieco niżej, żeby wyglądało lepiej */
        font-size: 14px !important; /* delikatnie mniejszy tekst, opcjonalnie */
        max-width: 90% !important; /* dopasowanie do węższego ekranu */
        padding: 15px !important;
    }

    .modalcontact-content h2,
    .modalcontact2-content h2 {
        font-size: 14px !important;
    }

    .modalcontact-content p,
    .modalcontact2-content p {
        font-size: 13px !important;
    }
}

/* FORM NEWFORMQUOTE */
.NEWFORMQUOTE {
  width: 100%;
  margin: auto;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.NEWFORMQUOTE input {
  padding: 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid rgba(227, 227, 227, 0.2);
  background: #111;
  color: #e3e3e3;
}

.NEWFORMQUOTE textarea {
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 36px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid rgba(227, 227, 227, 0.2);
  background: #111;
  color: #e3e3e3;
}

.NEWFORMQUOTE input::placeholder,
.NEWFORMQUOTE textarea::placeholder {
  color: #e3e3e3;
  font-size: 16px;
  font-family: var(--body-font);
}

.NEWFORMQUOTE label {
  color: #e3e3e3;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* testimonials */
    .testimonialNew {
      max-width: 900px;
      margin: 40px auto;
    }

    .conTes {
      display: grid;
      grid-template-columns: 70% 30%;
      gap: 20px;
      margin-left: 0px;
      margin-right: 20px;
    }

    .cardTes {
      background-color: #000;
      border: 1px solid rgba(227, 227, 227, 0.2);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .testimonialCardTes {
      height: 100%;
    }

    .ctaLinkTes {
      text-decoration: none;
      color: inherit;
      display: block;
      height: 100%;
      transition: background-color 0.3s ease;
    }

    .ctaLinkTes:hover .ctaTes {
      background-color: #1a1a1a;
    }

    .ctaTes {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .ctaTes h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

    .ctaTes span {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.9rem;
    }

    .profileTes {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      
    }

    .profileTes img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      filter: grayscale(100%);
    }

    .profileInfoTes .nameTes {
      font-weight: bold;
      font-size: 1.1rem;
    }

    .profileInfoTes .titleTes {
      font-size: 0.9rem;
      color: greenyellow;
    }

    .quoteTes {
      font-size: 1rem;
      color: #e3e3e3;
      line-height: 1.6;
      margin-bottom: 30px;
    }

    .arrowsTes {
      display: flex;
      gap: 10px;
    }

    .arrowBtnTes {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #1a1a1a;
      color: #fff;
      border: none;
      font-size: 1.3rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }

    .arrowBtnTes:hover {
      background-color: #333;
    }

    .greentalk {
      color: greenyellow;
    }

    @media (max-width: 870px) {
      .conTes {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        margin-left: 25px;
        height: 500px;
      }
    }


    /*==================== MENU ABOUT NEW ====================*/

.animatedAbout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 25px;
  border: 2px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  margin-left: 10px;
  margin-top: 40px;
  margin-bottom: 10px;
}

.animatedAbout svg {
  position: absolute;
  width: 20px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animatedAbout .arr-1 {
  right: 16px;
}

.animatedAbout .arr-2 {
  left: -25%;
}

.animatedAbout .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animatedAbout .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animatedAbout:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animatedAbout:hover .arr-1 {
  right: -25%;
}

.animatedAbout:hover .arr-2 {
  left: 16px;
}

.animatedAbout:hover .text {
  transform: translateX(12px);
}

.animatedAbout:hover svg {
  fill: #212121;
}

.animatedAbout:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animatedAbout:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

/* HOW MUCH COST WEBSITE? */

/* CONTACT BOX */
.contact-box {
  display: flex;
  align-items: center;        /* 🔹 centruje pionowo wszystko */
  justify-content: space-between;
  background-color: #202020;
  border-radius: 12px;
  padding: 8px 12px;
  max-width: 400px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 15px;
}

.contact-item2 {
  display: flex;
  align-items: center;        /* 🔹 centruje ikonę i tekst w pionie */
  gap: 8px;
}

.contact-icon2 {
  width: 24px;
  height: 24px;
  fill: greenyellow;
  flex-shrink: 0;
}

.contact-text2 {
  font-size: 14px;
  color: #e3e3e3;
  line-height: 1;
}

.contact-btn2 {
  background: #000;
  color: white;
  border: 1px solid yellowgreen;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;        /* 🔹 środek pionowy tekstu w przycisku */
  justify-content: center;
  width: 100px;             /* 🔹 stała szerokość */
  text-align: center;       /* 🔹 tekst wyśrodkowany */
  padding: 16px 0;  
  
  font-size: 16px;
  white-space: nowrap; /* zapobiega łamaniu tekstu */
  
}

.contact-btn2:hover {
  background-color: #000;
}