/* Google Fonts – przeniesione do header.php (preload async), @import blokował render */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff'),
       url('../fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}








body {
    overflow-x: hidden; /* blokuje scroll w poziomie */
}



html {
    font-size: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-family: 'Satoshi';
}

::selection {
  background-color: var(--pink); /* kolor tła zaznaczenia */
  color: #ffffff;           /* kolor tekstu */
}
.full {
max-width: 1440px;
width: 100%;
padding: 0rem 2rem;
margin-left: auto;
    margin-right: auto;
}
.full.karuzela-no-right-margin {
    padding: 0rem;
}

.sekcja-7.karuzela-no-right-margin {
    margin-left: 4rem;
}
.misot-carousel-track {
    margin-right: 4rem;
}
.opakowane {
  max-width: 1000px;
  width: 100%;
padding: 0rem 2rem;
margin-left: auto;
    margin-right: auto;
}
.wpcf7-spinner {
    display:none;
}
h1, h2 {
    font-family: 'Satoshi';
}
h2.space-mono {
font-family: "Space Grotesk", sans-serif;
}

.btn {
    padding-left: 50px;
    position: relative;
    background-color: var(--pink);
    color: white;
    text-transform: uppercase;
    font-family: 'Space Grotesk';
    font-size: 1.6rem;
    padding: 1.2rem 1.6rem 1.2rem 3.5rem;
    border-radius: 15px;
}
.btn:hover {
    background-color: var(--blue);
    color: white;
}
.btn::before {
    content: '';
    position: absolute;
    left: 1.6rem;
    top: 55%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow.png');
    background-repeat: no-repeat;
    z-index: 1;
}
.btn {
    position: relative;
    background-color: var(--pink);
    color: white;
    text-transform: uppercase;
    font-family: 'Space Grotesk';
    font-size: 1.6rem;
    border-radius: 15px;
    overflow: hidden; /* maskuje strzałki */
    text-align: left;
}

/* wspólne style strzałek */
.btn::before,
.btn::after {
    content: "";
    position: absolute;
    top: 56%;
    width: 20px;
    height: 20px;
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-btn.svg');
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

a.niebieski.btn::before, a.niebieski.btn::after {
  background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-blue.svg');
}


/* STRZAŁKA A – widoczna w kwadracie */
.btn::before {
    left: 1.6rem;
    opacity: 1;
}

/* STRZAŁKA B – start poza kwadratem i ukryta */
.btn::after {
    left: 1.6rem;
    opacity: 0;
    transform: translateX(20px) translateY(-50%);
}

/* HOVER – A wyjeżdża w lewo i znika */
.btn:hover::before {
    transform: translateX(-22px) translateY(-50%);
    opacity: 0;
}

/* HOVER – B wjeżdża do kwadratu i staje się widoczna */
.btn:hover::after {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
}

.nazwa-sekcji span {
    width: fit-content;
    background-color: var(--pink);
    color: white;
    font-family: 'Space Grotesk';
    font-size: 1.4rem;
    padding: 8px 4px;
    border-radius: 2px;
    margin-bottom: 3.2rem;
    display: flex;
}
.kontakt-sekcja .nazwa-sekcji {
    text-transform: uppercase;
}
.szablon-oferta .sekcja-2 .nazwa-sekcji {
    text-transform: uppercase;
}
.blue-bg span {
  background-color: var(--blue);
}





:root {
  --pink: #DB0A7F;
  --black: #231F20;
  --blue: #1268B2;
  --ecru: #EDEBE5;
  --granat: #083A67;
  --szary: #BCBDC0;
  --white: #F5F6F8;
  --fiolet: #030917;
}
a.trans.btn {
    background-color: transparent;
    color: var(--pink);
    border: 1px solid var(--pink);
    display: flex;
    width: fit-content;
}
a.trans.btn:hover {
    background-color: var(--pink);
    color: white;
    border: 1px solid var(--pink);
}
a.trans.btn:before, a.trans.btn:after {
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-pink.svg');
}
a.trans.btn:hover:before, a.trans.btn:hover:after {
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-btn.svg');
}

a.niebieski.btn {
    background-color: transparent;
    border: 1px solid var(--blue);
    color: var(--blue);
    font-weight: 700;
}


a.niebieski.btn:hover {
    background-color: var(--pink);
    color: white;
    border: 1px solid var(--pink);
}
a.niebieski.btn:hover:before, a.niebieski.btn:hover:after {
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-btn.svg');
}


a.minimal.btn {
    border: 0px;
}
a.minimal.btn {
    background-color: transparent;
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 0.4em;
    position: relative;
    display: inline-block;
    padding: 1.2rem 3.2rem 1.2rem 0rem;
    transition: color 0.35s ease;
    font-weight: 700;
    font-size: 1.4rem;
}

a.minimal.btn::before,
a.minimal.btn::after {
    content: "";
    position: absolute;
    top: 56%;
    right: 1.6rem; /* strzałka po prawej stronie przycisku, tuż za tekstem */
    width: 20px;
    height: 20px;
    background-image: url('https://misot.pl/wp-content/uploads/2025/12/arrow-blue.svg');
    background-repeat: no-repeat;
    transform: translateY(-50%);
    transition: transform 0.35s ease, opacity 0.35s ease;
    left: 85%;

}

a.minimal.btn::before {
    opacity: 1;
}

a.minimal.btn::after {
    opacity: 0;
    transform: translateX(20px) translateY(-50%);
}

a.minimal.btn:hover::before {
    transform: translateX(-22px) translateY(-50%);
    opacity: 0;
}

a.minimal.btn:hover::after {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
}








input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    border: 0px;
    border-radius: 5px;
    display: flex;
}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    width: 48%;
}
textarea.wpcf7-form-control.wpcf7-textarea, input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
  background-color: #D9D9D9;
    color: black;
font-weight: 700;
    padding: 17px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
    border: 0px;
    border-radius: 10px;
    width: 100%;
}
.wpcf7-form-control-wrap {
    position: relative;

}
form.wpcf7-form p {
    line-height: 1.2;
}
.form-submit {
    border: 0px;
    color: var(--blue);
    font-family: 'Space Grotesk';
    background-color: transparent;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    text-decoration: underline;
    padding: 20px 0px;
}





.stopa {
    display: flex;
}
ul#menu-dokumenty {
    display: flex;
    gap: 3rem;
    font-size: 1.4rem;
    list-style: none;
        padding: 0px;
}
ul#menu-dokumenty a {
    color: white;
}
.social-col {
    display: flex;
    flex-direction: column;
}
.social-col p {
    margin-top: 2rem;
}
.social-col .phone, .social-col .mailto {
    font-size: 2rem;
    color: white;
    text-decoration: none;
}
.social-col .linkedin img {
    height: 17px;
    filter: invert(1);
}
.social-col p {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 500;
}
.cont-stop .phone, .cont-stop .mailto {
    font-size: 1.8rem;
    display: flex;
}
.dane-col p {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 400;
}
.tech-col {
    text-align-last: right;
}

button.kontrast {
    background-color: white;
    color: var(--black);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.5rem;
    border: 0px;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 3rem;
    text-align-last: center;
}


button.size {
    background-color: transparent;
    color: white;
    border: 0px;
    font-size: 2rem;
}
button.size.light {
  font-weight: 300;
}
button.size.mediun {
  font-weight: 500;
}
button.size.black {
  font-weight: 800;
}

.copy p {
  font-size: 1.4rem;
}
.w-gore button {
    background-color: transparent;
    border: 0px;
    color: white;
    font-size: 1.4rem;
    display: flex;
    gap: 7px;
    align-items: center;
    align-content: center;
    float: right;
    font-weight: 700;
    font-family: 'Space Grotesk';
    text-transform: uppercase;
    text-decoration: underline;
}
.stopa-2 {
    padding-top: 4%;
}
.stopa {
  padding-top: 4%;
  gap: 4rem;
}
.stopa-2 {
    display: flex;
    align-items: center;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

#sekcja-13 {
    background-image: url(https://misot.pl/wp-content/themes/blankslate/assets/kula.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto;
    background-blend-mode: darken;
}



.footer {
  display: flex;
  flex-wrap: wrap;
}

.footer .full.stopa > div {
  flex: 1;
}

.social-col {
width: 22%;
padding: 10px;
}
.dane-col {
  width: 22%; padding: 10px;
}
.tech-col {
  width: 22%; padding: 10px; text-align: center;
}
.logo-col {
  width: 22%;
}
    .stopa {
        flex-wrap: nowrap;
    }
.logo-col img {
    width: 12rem;
}
    .stopa-2 {
        justify-content: space-between;
    }

.dokumenty, .w-gore {
  width: 40%;
}
.copy {
  width: 20%;
}


ul {
    list-style: disc;
    padding-left: 2rem;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: var(--blue);
    border: 0px;
    padding: 2rem;
    margin: 0px;
    margin-top: 3rem;
    color: white;
    font-size: 1.6rem;
    font-family: 'Satoshi';
}


.btn:active {
    color: white !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}
a.niebieski.btn:active {
    color: white !important;
    background-color: var(--pink) !important;
    border-color: var(--pink) !important;
}
a.minimal.btn:active {
    background-color: transparent!important;
    color: var(--blue)!important;
    text-decoration: underline;
    text-underline-offset: 0.4em;
    position: relative;
    display: inline-block;
    padding: 1.2rem 3.2rem 1.2rem 0rem;
    transition: color 0.35s ease;
    font-weight: 700;
    font-size: 1.4rem;
}


input[type="checkbox"] {
    appearance: initial;
    width: 16px;
    height: 16px;
    border: 1px solid #BCBDC0;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    line-height: 1.3;
    margin-top: 2rem;
}

input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: -0.2rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 2px;
        font-weight: 800;
        line-height: 1.7;
}
/*
.wpcf7 .wpcf7-submit:disabled {
    cursor: pointer;
}
*/

.slide-up {
  opacity: 0;
  transform: translateY(50px);
}

.slide-up.is-visible {
  animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





@media (max-width:1024px) {

body {
    overflow-x: hidden; /* blokuje scroll w poziomie */
}

.stopa {
    display: flex;
    flex-wrap: wrap;
}
.social-col {
    order: 3;
    width: 47%;
}
.tech-col {
    order: 2;
    width: 47%;
}
.logo-col {
    width: 47%;
}
.dane-col {
    width: 47%;
    order: 3;
}
.dane-col p {
    text-align: right;
}
    .stopa {
        justify-content: space-between;
    }
.dokumenty, .w-gore {
    width: 38%;
}
.copy {
  width: 15%;
}
	
.sekcja-7.karuzela-no-right-margin {
    margin-left: 0rem;
}	
	

}

@media (max-width: 820px) {
    .dokumenty, .w-gore {
        width: 37%;
    }
}


/* Na mobilce: ostatnia kolumna (np. tech-col) ma być druga */
@media (max-width: 768px) {
  .footer .social-col { order: 1; }
  .footer .dane-col  { order: 2; }
  .footer .tech-col  { order: 3; }
  .footer .copy     { order: 4; }
  /* Dodaj order dla każdej kolumny, by ustalić ich kolejność */


        .copy {
        width: 20%;
    }

    .dokumenty, .w-gore {
        width: 34%;
    }
ul#menu-dokumenty {
    gap: 1rem;
}
}



@media (max-width: 600px) {
  .w-gore.mob {
    width: 100%;
    justify-content: center;
    margin-top: 3rem;
}
.logo-col {
        width: 40%;
    }
    .social-col, .dane-col {
        width: 100%;
    }
    .dane-col p {
      text-align: left;
    }
    .social-col p {
    font-size: 1.8rem;
}
.stopa-2 {
    display: flex;
    flex-direction: column;
    padding: 0px;
        padding-top: 7.2rem;
}
.dokumenty, .copy {
    width: 100%;
    justify-items: center;
}
ul#menu-dokumenty {
    flex-direction: column;
    align-items: center;
}


#sekcja-13 {
    padding-bottom: 26rem;
}
.modal-footer {
    display: none;
}
.modal-header {
    border: 0px;
    margin-bottom: -10rem;
    z-index: 9999999999;
}
}


.social-col .phone, .social-col .mailto {
    font-size: 2rem;
}