.stopkasekcja {
  width: 100%;
  max-width: none;
  background: #326e58;
  color: #ffffff;
}

.stopkasekcja,
.stopkasekcja * {
  box-sizing: border-box;
}

.stopkasekcja__main {
  padding: 88px 0 82px;
}

.stopkasekcja__container {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px 170px 1fr 280px;
  gap: 72px;
  align-items: start;
}

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

.stopkasekcja__logo {
  display: block;
  width: 96px;
  line-height: 0;
}

.stopkasekcja__logo img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: brightness(0) invert(1);
}
.stopkasekcja h3 {
  margin: 0 0 38px;
  color: #ffffff;
  font-family: "Fraunces", serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.stopkasekcja ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.stopkasekcja a,
.stopkasekcja p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.stopkasekcja a:hover {
  color: #ffffff;
  text-decoration: none;
}

.stopkasekcja__column--services ul {
  gap: 21px;
}

.stopkasekcja__info {
  display: grid;
  gap: 24px;
}

.stopkasekcja__info h3 {
  margin-bottom: 20px;
}

.stopkasekcja__info a,
.stopkasekcja__info p {
  color: #ffffff;
}

/* =========================================
   SOCIAL MEDIA - STOPKA
========================================= */

.stopkasekcja__socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
}

.stopkasekcja__socials a {
    position: relative;

    width: 38px;
    height: 38px;
    min-width: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.14);
    color: #fff;

    /* ukrywa f / in / ig */
    font-size: 0;
    line-height: 0;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


/* wspólna baza ikon */

.stopkasekcja__socials a::before {
    content: "";

    display: block;

    width: 17px;
    height: 17px;

    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* =========================================
   FACEBOOK
========================================= */

.stopkasekcja__socials a[href*="facebook.com"]::before {
    width: 16px;
    height: 18px;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.7 22v-8.2h2.8l.42-3.2H13.7V8.55c0-.93.26-1.56 1.61-1.56h1.72V4.13c-.3-.04-1.32-.13-2.51-.13-2.48 0-4.18 1.51-4.18 4.29v2.31H7.53v3.2h2.81V22h3.36Z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.7 22v-8.2h2.8l.42-3.2H13.7V8.55c0-.93.26-1.56 1.61-1.56h1.72V4.13c-.3-.04-1.32-.13-2.51-.13-2.48 0-4.18 1.51-4.18 4.29v2.31H7.53v3.2h2.81V22h3.36Z'/%3E%3C/svg%3E");
}


/* =========================================
   LINKEDIN
========================================= */

.stopkasekcja__socials a[href*="linkedin.com"]::before {
    width: 17px;
    height: 17px;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.1 7.6H2V22h3.1V7.6ZM3.55 2A1.82 1.82 0 1 0 3.55 5.64 1.82 1.82 0 0 0 3.55 2ZM22 13.73c0-4.34-2.31-6.36-5.4-6.36-2.49 0-3.6 1.37-4.22 2.33V7.6H9.27V22h3.11v-7.13c0-1.88.36-3.71 2.7-3.71 2.31 0 2.34 2.16 2.34 3.83V22H22v-8.27Z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.1 7.6H2V22h3.1V7.6ZM3.55 2A1.82 1.82 0 1 0 3.55 5.64 1.82 1.82 0 0 0 3.55 2ZM22 13.73c0-4.34-2.31-6.36-5.4-6.36-2.49 0-3.6 1.37-4.22 2.33V7.6H9.27V22h3.11v-7.13c0-1.88.36-3.71 2.7-3.71 2.31 0 2.34 2.16 2.34 3.83V22H22v-8.27Z'/%3E%3C/svg%3E");
}


/* =========================================
   INSTAGRAM
========================================= */

.stopkasekcja__socials a[href*="instagram.com"]::before {
    width: 18px;
    height: 18px;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.5 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.5 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}


/* =========================================
   HOVER
========================================= */

.stopkasekcja__socials a:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;

    transform: translateY(-3px);

    text-decoration: none;
}
.stopkasekcja__bottom {
  background: #fffdf9;
  padding: 28px 20px;
  text-align: center;
}

.stopkasekcja__bottom p {
  color: #6b6b6b;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
/* =========================================================
   DEKORACJE
   ========================================================= */

.ctasekcja__decor {
    position: absolute;
    z-index: 1;

    pointer-events: none;

    will-change: transform;
}


/* =========================================================
   FALE
   ========================================================= */

.ctasekcja__decor--wave-left,
.ctasekcja__decor--wave-right {
    width: 42px;
    height: 26px;

    opacity: 0.35;
}


.ctasekcja__decor--wave-left::before,
.ctasekcja__decor--wave-right::before {
    content: "";

    display: block;

    width: 42px;
    height: 26px;

    background:
        radial-gradient(
            circle at 4px 18px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        ),
        radial-gradient(
            circle at 16px 8px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        ),
        radial-gradient(
            circle at 28px 18px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        );
}


/* LEWA FALA */

.ctasekcja__decor--wave-left {
    left: 19%;
    top: 13%;

    animation: ctaDecorWaveLeft 8s ease-in-out infinite;
}


/* PRAWA FALA */

.ctasekcja__decor--wave-right {
    right: 18%;
    bottom: 19%;

    animation: ctaDecorWaveRight 9.5s ease-in-out infinite;
    animation-delay: -2.5s;
}


/* =========================================================
   KÓŁKA
   ========================================================= */

.ctasekcja__decor--circle-left,
.ctasekcja__decor--circle-right {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fac24a;

    opacity: 0.25;
}


/* LEWE KÓŁKO */

.ctasekcja__decor--circle-left {
    left: 14%;
    bottom: 19%;

    animation: ctaDecorCircleLeft 10s ease-in-out infinite;
    animation-delay: -4s;
}


/* PRAWE KÓŁKO */

.ctasekcja__decor--circle-right {
    right: 20%;
    top: 11%;

    background: #ead9bf;

    animation: ctaDecorCircleRight 11s ease-in-out infinite;
    animation-delay: -6s;
}


/* =========================================================
   ANIMACJE
   ========================================================= */


/* lekko lewo/prawo + góra */

@keyframes ctaDecorWaveLeft {

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

    50% {
        transform: translate(16px, -8px);
    }
}


/* bardziej pionowo */

@keyframes ctaDecorWaveRight {

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

    50% {
        transform: translate(-12px, -15px);
    }
}


/* delikatny diagonal */

@keyframes ctaDecorCircleLeft {

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

    50% {
        transform: translate(10px, -14px);
    }
}


/* spokojne unoszenie */

@keyframes ctaDecorCircleRight {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(17px);
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ctasekcja__decor {
        animation: none !important;
    }
}

@media (max-width: 1180px) {
  .stopkasekcja__container {
    grid-template-columns: 140px 150px 1fr 250px;
    gap: 50px;
  }

  .stopkasekcja a,
  .stopkasekcja p {
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  .stopkasekcja__container {
    grid-template-columns: 1fr 1fr;
    gap: 50px 70px;
  }

  .stopkasekcja__brand {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  /* Kluczowa poprawka: rozciągamy całą sekcję stopki na 100% szerokości okna przeglądarki */
  .stopkasekcja {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    overflow: hidden;
  }

  .stopkasekcja__main {
    padding: 64px 0 58px;
  }

  .stopkasekcja__container {
    /* min() dopasowuje szerokość linków i zapobiega przyklejaniu się tekstu do krawędzi ekranu */
    width: min(100% - 32px, 1180px);
    grid-template-columns: 1fr;
    gap: 38px;
    margin: 0 auto; /* Wyśrodkowuje zawartość wewnątrz rozciągniętej stopki */
  }

  .stopkasekcja h3 {
    margin-bottom: 22px;
    font-size: 24px;
  }

  .stopkasekcja ul {
    gap: 15px;
  }

  .stopkasekcja__info {
    gap: 18px;
  }

  .stopkasekcja__socials {
    margin-top: 14px;
  }
}