/* IMPORT FONTS */

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* RESRT CSS */
* {
    box-sizing: border-box;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* DLACZEGO WARTO */

/* Miło */

.milo {
    height: 370px;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
}

@media (max-width: 1399px) {
    .milo {
        height: 150px;
        font-size: 36px;
        line-height: 48px;
    }
    
    .milo__text {
        width: 280px;
        text-align: center;
    }
}

/* OPINIE */

.opinie {
    background-color: #EBE1E2;
    display: flex;
    gap: 150px;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.opinie__text {
    width: 650px;
}

.opinie__text__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    margin-bottom: 36px;
    font-size: 20px;
    line-height: 27px;
}

.opinie__text__sub {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 20px;
}

@media (max-width: 1399px) {
    .opinie {
        gap: 24px;
        padding: 70px 0;
    }
    
    .opinie__text {
        width: 200px;
    }
    
    .opinie__text__paragraph {
        font-family: 'Nunito Sans', sans-serif;
        margin-bottom: 36px;
        font-size: 16px;
        line-height: 22px;
    }

    .opinie__text__sub {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: bold;
        font-size: 16px;
    }
}

/* ZALETY */

.pros {
    width: 1320px;
    margin: auto;
    gap: 120px;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
}

.pros__heading {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pros__heading__header {
    font-size: 48px;
    font-family: "Lexend Deca", sans-serif;
    margin-bottom: 35px;
}

.pros__heading__subheader {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    line-height: 27px;
    max-width: 560px;
}

.pros__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 0px;
}

.pros__list__item {
    font-family: "Nunito Sans", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 312px;
    gap: 17px;
    text-align: center;
}

.pros__list__item__icon-container {
    width: 129px;
    height: 129px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pros__list__item__icon-container svg {
}

.pros__list__item__heading {
    font-size: 24px;
    font-weight: bold;
}

.pros__list__item__description {
    font-size: 20px;
    line-height: 27px;
}

@media (max-width: 1399px) {
    .pros {
        width: 280px;
        gap: 64px;
        padding: 56px 0;
    }

    .pros__heading__header {
        font-size: 39px;
        line-height: 55px;
        margin-bottom: 26px;
    }

    .pros__heading__subheader {
        font-size: 16px;
        line-height: 22px;
    }

    .pros__list {
        display: flex;
        flex-direction: column;
        gap: 88px 0px;
    }

    .pros__list__item {
        width: 100%;
    }

    .pros__list__item__description {
        font-size: 16px;
        line-height: 22px;
    }
}

/* RECYKLING */

.recycling {
    overflow-x: hidden;
    position: relative;
}

.recycling__info {
    position: absolute;
    width: 450px;
    left: calc((100vw - 1320px) / 2);
    top: 7vw;
}

.recycling__info__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 24px;
}

.recycling__info__description {
    font-family: "Nunito Sans", sans-serif;
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 60px;
    font-weight: 600;
}

.recycling__info__icons {
    display: flex;
    justify-content: space-between;
}

.recycling__video {
    max-width: 1920px;
    margin: auto;
    width: 100%;
    display: block;
}

@media (min-width: 1921px) {
    .recycling {
        position: relative;
    }
    
    .recycling:after {
        content: ' ';
        background: linear-gradient(90deg, rgba(231,231,231,1) calc( ( 100vw - 1920px ) / 2 ), rgba(231,231,231,0) calc( ( ( 100vw - 1920px ) / 2 ) + 100px ), rgba(231,231,231,0) calc( ( 100vw - ( 100vw - 1920px ) / 2 ) - 100px ), rgba(231,231,231,1) calc( 100vw - ( 100vw - 1920px ) / 2 ) );
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (max-width: 1399px) {
    .recycling__info {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        padding: 50px calc((100vw - 280px) / 2);
        background-color: #ebebeb;
    }

    .recycling__info__description {
        font-size: 21px;
    }

    .recycling__info__icons svg {
        width: 80px;
    }

    .recycling__video {
        position: relative;
        width: 183%;
        margin: none;
        max-width: none;
        left: -65%;
    }
}

/* TYLKO OWOC */

.tylko-owoc {
    background-color: #eaf1cf;
    display: flex;
    flex-direction: column;
}

.tylko-owoc__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    width: 648px;
    padding: 86px 0;
}

.tylko-owoc__info__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 36px;
}

.tylko-owoc__info__description {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    width: 100%;
    line-height: 27px;
}

.tylko-owoc__info__logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tylko-owoc__info__logos img {
    width: 212px;
}

.tylko-owoc__info__logos svg {
    width: 224px;
}

.tylko-owoc__photo {
    height: 642px;
    background-position: center;
    background-size: cover;
}

@media (max-width: 1399px) {
    .tylko-owoc__info {
        order: 2;
        width: 280px;
        padding: 50px 0;
    }

    .tylko-owoc__info__heading {
        font-family: "Lexend Deca", sans-serif;
        font-size: 44px;
        margin-bottom: 36px;
    }

    .tylko-owoc__info__description {
        font-family: "Nunito Sans", sans-serif;
        font-size: 16px;
        width: 100%;
        line-height: 22px;
        margin-bottom: 50px;
    }

    .tylko-owoc__info__logos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 50px;
    }

    .tylko-owoc__info__logos img {
        width: 152px;
        position: relative;
        left: 10px;
    }

    .tylko-owoc__info__logos svg {
        width: 160px;
    }

    .tylko-owoc__photo {
        order: 1;
        height: 125px;
    }
}

/* BABCIE */

.babcie {
    display: grid;
    grid-template-columns: 1fr 536px 136px 312px 24px 312px 1fr;
    grid-template-rows: 240px 24px 391px;
    gap: 0px 0px;
    grid-auto-flow: row;
    padding: 125px 0;
}

.babcie__info {
    grid-area: 1 / 2 / 4 / 3;
}

.babcie__info__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    line-height: 66px;
    margin-bottom: 24px;
}

.babcie__info__paragraph {
    font-family: "Nunito Sans", sans-serif;
    line-height: 27px;
    font-size: 20px;
}

.babcie__photo--1 {
    grid-area: 1 / 4 / 2 / 5;
}

.babcie__photo--2 {
    grid-area: 1 / 6 / 2 / 7;
}

.babcie__photo--3 {
    grid-area: 3 / 4 / 4 / 7;
}

.babcie__photo--1,
.babcie__photo--2,
.babcie__photo--3 {
    background-size: cover;
    background-position: center;
}

@media (max-width: 1399px) {
    .babcie {
        grid-template-columns: 1fr 128px 24px 128px 1fr;
        grid-template-rows: auto 140px 24px 228px;
        padding: 46px 0 0 0;
    }

    .babcie__info {
        grid-area: 1 / 2 / 1 / 5;
    }
    .babcie__photo--1 {
        grid-area: 2 / 1 / 2 / 3;
    }

    .babcie__photo--2 {
        grid-area: 2 / 4 / 2 / 6;
    }

    .babcie__photo--3 {
        grid-area: 4 / 1 / 4 / 6;
    }

    .babcie__info__heading {
        font-size: 42px;
        line-height: 58px;
        margin-bottom: 24px;
    }

    .babcie__info__paragraph {
        font-family: "Nunito Sans", sans-serif;
        line-height: 22px;
        font-size: 16px;
        margin-bottom: 60px;
    }
}

/* HEADING CAROUSEL */

body {
    width: 100vw;
    overflow-x: hidden;
}

.heading--carousel {
    /*! display: flex; */
    height: 738px;
    overflow: hidden;
    width: 100vw;
    /*! margin-right: -100vw; */
}

.heading--carousel__slide {
    width: 100vw;
}

.heading--carousel__slide {
    padding: 160px calc((100vw - 1320px) / 2);
    color: white;
    height: 100%;
}

.heading--carousel__slide__header {
    max-width: 536px;
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 24px;
}

.heading--carousel__slide__paragraph {
    font-family: "Nunito Sans", sans-serif;
    font-size: 24px;
    line-height: 34px;
    max-width: 536px;
}

.heading--carousel__slide:nth-of-type(1) {
    background-image: url(../img/baner_soki.jpg);
    background-size: cover;
    background-position: center;
}

.heading--carousel__slide:nth-of-type(2) {
    background-image: url(../img/baner_smoothie.jpg);
    background-size: cover;
    background-position: center;
}

.heading--carousel__breadcrumbs {
    margin-bottom: 84px;
}

.heading--carousel__breadcrumbs a {
    text-decoration: none;
    color: white;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
}

.heading--carousel__breadcrumbs a:not(:last-child):after {
    content: " / ";
}

@keyframes carouseling {
    0%,
    40%,
    100% {
        transform: translateX(0);
    }

    50%,
    90% {
        transform: translateX(-100%);
    }
}

@media (max-width: 1399px) {
    .heading--carousel {
        display: flex;
        height: 812px;
        overflow: hidden;
    }

    .heading--carousel__slide {
    }

    .heading--carousel__slide {
        padding: 120px calc((100vw - 280px) / 2);
        color: white;
    }

    .heading--carousel__slide__header {
        max-width: 100%;
        font-family: "Lexend Deca", sans-serif;
        font-size: 36px;
        margin-bottom: 24px;
    }

    .heading--carousel__slide__paragraph {
        font-family: "Nunito Sans", sans-serif;
        font-size: 16px;
        line-height: 22px;
        max-width: 100%;
    }

    .heading--carousel__slide:nth-of-type(1) {
        background-image: url(../img/baner_soki_mob.jpg);
        background-size: cover;
        background-position: center;
    }

    .heading--carousel__slide:nth-of-type(2) {
        background-image: url(../img/baner_smoothie_mob.jpg);
        background-size: cover;
        background-position: center;
    }

    .heading--carousel__breadcrumbs {
        margin-bottom: 84px;
        display: none;
    }

    .heading--carousel__breadcrumbs a {
        text-decoration: none;
        color: white;
        font-family: "Nunito Sans", sans-serif;
        font-size: 14px;
    }

    .heading--carousel__breadcrumbs a:not(:last-child):after {
        content: " / ";
    }
}

/* BOTTOM PHOTO */

.bottom-photo {
    height: 600px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    align-items: center;
}

.bottom-photo__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 45px;
    max-width: 760px;
    text-align: center;
}

.bottom-photo__paragraph {
    font-family: "Nunito Sans", sans-serif;
    font-size: 24px;
    line-height: 34px;
    max-width: 410px;
    text-align: center;
    margin-bottom: 115px;
}

.bottom-photo__link {
    font-family: "Nunito Sans", sans-serif;
    color: white;
    background-color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 20px;
    transition: 0.3s;
}

.bottom-photo__link:hover {
    color: black;
    background-color: white;
}

@media (max-width: 1399px) {
    .bottom-photo {
        height: 470px;
    }

    .bottom-photo__heading {
        font-family: "Lexend Deca", sans-serif;
        font-size: 36px;
        font-weight: 400;
        margin-bottom: 45px;
        max-width: 280px;
    }

    .bottom-photo__paragraph {
        font-family: "Nunito Sans", sans-serif;
        font-size: 16px;
        line-height: 22px;
        max-width: 280px;
        text-align: center;
        margin-bottom: 60px;
    }

    .bottom-photo__link {
        font-family: "Nunito Sans", sans-serif;
        color: white;
        background-color: black;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 15px 20px;
        transition: 0.3s;
    }
}

/* ELEMENTY STRONY OFERTA */

.oferta__soki__info {
    background-color: #a21656;
    display: grid;
    grid-template-columns: 1fr 760px 112px 336px 112px 1fr;
    grid-template-rows: 236px;
    padding: 40px 0;
}

.oferta__soki__info__list {
    grid-area: 1 / 2;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
}

.oferta__soki__info__list__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.oferta__soki__info__list__item__link {
    flex-grow: 0 !important;
}

.oferta__soki__info__character {
    grid-area: 1 / 4;
    background-image: url(../img/Jabco_hero4.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.oferta__soki__info:hover .oferta__soki__info__character {
    background-image: url(../img/Jabco_hero4b.png);
}

.oferta__smoothie__info {
    background-color: #abc446;
    display: grid;
    grid-template-columns: 300fr 1096px 24px 223px 277fr;
    grid-template-rows: 70px 101px 338px 22px 48px;
}

.oferta__smoothie__info__list {
    grid-area: 2 / 2 / 4 / 3;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 1fr 1fr;
    gap: 48px 24px;
}

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

.oferta__smoothie__info__list__item__ingredients,
.oferta__soki__info__list__item__ingredients {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 24px;
}

.oferta__smoothie__info__list__item__more,
.oferta__soki__info__list__item__more {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    margin-bottom: 24px;
    line-height: 20px;
}

.oferta__smoothie__info__list__item__link,
.oferta__soki__info__list__item__link {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 12px;
    color: white;
    text-decoration: none;
    font-family: "Nunito Sans", sans-serif;
    font-family: 16px;
    font-weight: 400;
}

.oferta__smoothie__info__character {
    grid-area: 3 / 4 / 5 / 4;
    background-image: url(../img/Jabco_hero3.png);
    animation: zen 5s infinite;
    transform-origin: bottom center;
    transform: rotate(2deg) translateY(0px);
}

@keyframes zen {
    0% {
        transform: rotate(2deg) translateY(0px);
        background-image: url(../img/Jabco_hero3.png);
    }

    50% {
        transform: rotate(-2deg) translateY(-10px);
        background-image: url(../img/Jabco_zen.png);
    }

    100% {
        transform: rotate(2deg) translateY(0px);
    }
}

@media (max-width: 1399px) {
    .oferta__smoothie__info,
    .oferta__soki__info {
        grid-template-columns: 1fr 280px 1fr;
        grid-template-rows: auto 244px;
        padding: 50px 0;
    }

    .oferta__smoothie__info__list,
    .oferta__soki__info__list {
        grid-area: 1 / 2;
        display: flex;
        flex-direction: column;
    }

    .oferta__soki__info__list__item {
        margin-bottom: 70px;
    }

    .oferta__smoothie__info__character,
    .oferta__soki__info__character {
        grid-area: 2 / 2;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center right;
    }
    
    @media (max-width: 1400px) {

        .oferta__soki__info__character {
            animation: cheers 2s infinite;
        }
        
        @keyframes cheers {
                0%, 100% {
        background-image: url(../img/Jabco_hero4.png);
    }
    
    50% {
        background-image: url(../img/Jabco_hero4b.png);
    }
        }
    }

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

    .oferta__smoothie__info__list__item__ingredients,
    .oferta__soki__info__list__item__ingredients {
        font-size: 16px;
    }
}

.oferta__smoothie__banner,
.oferta__soki__banner {
    display: grid;
    grid-template-rows: 90px 200px 24px 200px 73px;
}

.oferta__smoothie__banner {
    background-color: #eef3d9;
    grid-template-columns: 1fr 112px 424px 136px 312px 24px 312px 1fr;
}

.oferta__soki__banner {
    background-color: #fdebed;
    grid-template-columns: 1fr 312px 24px 312px 136px 536px 1fr;
}

.oferta__smoothie__banner__text {
    grid-area: 2 / 3 / 4 / 3;
}

.oferta__smoothie__banner__text__header,
.oferta__soki__banner__text__header {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 44px;
}

.oferta__soki__banner__text__paragraph,
.oferta__smoothie__banner__text__paragraph {
    font-family: "Nunito Sans", sans-serif;
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 86px;
}

.oferta__smoothie__banner__text__link,
.oferta__soki__banner__text__link {
    font-family: "Nunito Sans", sans-serif;
    color: white;
    background-color: black;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 20px;
    transition: 0.3s;
}

.oferta__smoothie__banner__text__link:hover,
.oferta__soki__banner__text__link:hover {
    color: black;
    background-color: white;
}

.oferta__smoothie__banner__photo--1,
.oferta__smoothie__banner__photo--2,
.oferta__smoothie__banner__photo--3,
.oferta__soki__banner__photo--1,
.oferta__soki__banner__photo--2,
.oferta__soki__banner__photo--3 {
    background-position: center;
    background-size: cover;
}

.oferta__smoothie__banner__photo--1 {
    grid-area: 2 / 5;
    background-image: url(../img/smoothe_koktail.jpg);
}

.oferta__smoothie__banner__photo--2 {
    grid-area: 2 / 7;
    background-image: url(../img/smbp2.jpg);
}

.oferta__smoothie__banner__photo--3 {
    grid-area: 4 / 5 / 4 / 8;
    background-image: url(../img/foto_smoothie.jpg);
}

.oferta__soki__banner__text {
    grid-area: 2 / 6 / 4 / 6;
}

.oferta__soki__banner__photo--1 {
    grid-area: 2 / 2;
    background-image: url(../img/burak_cwiklowy.jpg);
}

.oferta__soki__banner__photo--2 {
    grid-area: 2 / 4;
    background-image: url(../img/pomidor_100.jpg);
}

.oferta__soki__banner__photo--3 {
    grid-area: 4 / 2 / 4 / 5;
    background-image: url(../img/foto_soki.jpg);
}

@media (max-width: 1399px) {
    .oferta__smoothie__banner,
    .oferta__soki__banner {
        display: grid;
        grid-template-columns: 1fr 128px 24px 128px 1fr;
        grid-template-rows: auto 116px 24px 116px;
        padding-bottom: 70px;
        padding-top: 50px;
    }

    .oferta__smoothie__banner__text,
    .oferta__soki__banner__text {
        grid-area: 1 / 2 / 1 / 5;
    }

    .oferta__smoothie__banner__text__header,
    .oferta__soki__banner__text__header {
        font-family: "Lexend Deca", sans-serif;
        font-size: 44px;
        font-weight: 400;
        margin-bottom: 40px;
    }

    .oferta__soki__banner__text__paragraph,
    .oferta__smoothie__banner__text__paragraph {
        font-family: "Nunito Sans", sans-serif;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 21px;
    }

    .oferta__smoothie__banner__text__link,
    .oferta__soki__banner__text__link {
        font-family: "Nunito Sans", sans-serif;
        color: white;
        background-color: black;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        padding: 20px 20px;
        display: inline-block;
        margin-bottom: 70px;
    }

    .oferta__smoothie__banner__photo--1,
    .oferta__soki__banner__photo--1 {
        grid-area: 2 / 1 / 2 / 3;
    }

    .oferta__smoothie__banner__photo--2,
    .oferta__soki__banner__photo--2 {
        grid-area: 2 / 4 / 2 / 6;
    }

    .oferta__smoothie__banner__photo--3,
    .oferta__soki__banner__photo--3 {
        grid-area: 4 / 1 / 4 / 6;
    }
}

/* HEADER */

.header {
    height: 560px;
    background-position: center;
    background-size: cover;
    padding: 107px calc((100vw - 280px) / 2) 0;
    color: white;
}

.header__breadcrumbs {
    margin-bottom: 40px;
}

.header__breadcrumbs a {
    color: white;
    font-family: "Nunito Sans", sans-serif;
    text-decoration: none;
    font-size: 14px;
}

.header__breadcrumbs a:not(:last-of-type):after {
    content: " / ";
}

.header__heading {
    font-family: "Lexend Deca";
    line-height: 48px;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
}

.header__paragraph {
    font-size: 16px;
    font-weight: 600;
    font-family: "Nunito Sans", sans-serif;
    line-height: 22px;
}

@media (min-width: 1400px) {
    .header {
        height: 738px;
        padding: 150px calc((100vw - 1320px) / 2) 0;
    }

    .header__text {
        width: 680px;
    }

    .header__breadcrumbs {
        margin-bottom: 150px;
    }

    .header__heading {
        line-height: 66px;
        font-size: 48px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .header__paragraph {
        line-height: 34px;
        font-size: 24px;
    }
}

/* TOP MENU */

.top-menu {
    position: absolute;
    top: 23px;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 68px 76px 66px 70px 1fr;
    width: 100%;
}

.top-menu__logo {
    grid-area: 1 / 2;
}

.top-menu__links a:not(.top-menu__links__shop) {
    display: none;
}

.top-menu__links {
    grid-area: 1 / 4;
}

.top-menu__links__shop {
    color: white;
    background-color: black;
    font-family: "Nunito Sans", sans-serif;
    text-decoration: none;
    line-height: 25px;
    display: block;
    font-weight: 600;
    text-align: center;
}

.hamburger {
    position: fixed;
    z-index: 4;
    top: 25px;
    right: calc((100vw - 280px) / 2);
    cursor: pointer;
    transition: .3s;
}

    .hamburger:hover {
        filter: invert(0.9);
    }

.hamburger svg {
    height: 33px;
}

.full-menu {
    display: none;
}

@media (min-width: 1400px) {
    .top-menu {
        grid-template-columns: 1fr 88px 135px 985px 112px 1fr;
        top: 35px;
    }

    .hamburger svg {
        height: unset;
    }

    .top-menu__links {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-menu__links a {
        color: white;
        font-family: "Nunito Sans", sans-serif;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        display: block !important;
        transition: 0.3s;
    }

    .top-menu__links__shop {
        padding: 15px 20px;
    }

    .top-menu__links a:hover {
        color: black;
    }

    .top-menu__links__shop:hover {
        background-color: white;
    }

    .hamburger {
        top: 42px;
        right: calc((100vw - 1320px) / 2);
    }
}

/* FULL MENU */

.open-menu *:not(.full-menu, .full-menu *) {
    display: none!important;
}

.open-menu .full-menu {
    display: block;
    background-image: url(../img/tlo_menu_mob.jpg);
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100vw;
    padding: 100px calc((100vw - 280px) / 2);
}

.full-menu__close {
    top: 15px;
    right: calc((100vw - 280px) / 2);
    position: absolute;
    cursor: pointer;
}

.full-menu__close svg {
    width: 34px;
}

.full-menu__logo {
    position: absolute;
    left: calc((100vw - 280px) / 2);
    top: 23px;
    width: 68px;
}

.full-menu {
    flex-direction: column;
}

.full-menu__links {
    display: flex;
    flex-direction: column;
}

.full-menu__links__column {
    display: flex;
    flex-direction: column;
}

.full-menu__links__column a {
    color: white;
    text-decoration: none;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}

.full-menu__links__column a:hover {
    color: black;
}

.full-menu__links__column:not(:last-of-type) a,
.full-menu__links__column:last-of-type a:not(:nth-of-type(4), :nth-of-type(5), :nth-of-type(6)) {
    border-bottom: 1px solid white;
}

.full-menu__links__column a {
    padding: 10px 0;
}
.desktop-only {
    display: none;
}

.full-menu__links__column:last-of-type a:nth-of-type(4) {
    margin-bottom: 30px;
}

.full-menu__links__column:last-of-type a:nth-of-type(5) {
    font-size: 20px;
    margin-bottom: 10px;
}

.full-menu__links__column:last-of-type a:nth-of-type(6) {
    font-size: 12px;
    background-color: black;
    width: 112px;
    text-align: center;
/*     ! margin-bottom: 70px; */
}

@media (max-width: 1400px) {
    .full-menu__links__column:last-of-type a:nth-of-type(6) {
        margin-bottom: 70px;
    }
}

.full-menu__social-media {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.full-menu__social-media a svg {
    height: 24px;
}

@media (min-width: 1400px) {
    .open-menu .full-menu {
        background-image: url(../img/tlo_menu.jpg);
        display: grid;
        height: 100vh;
        grid-template-columns: 1fr 200px 1065px 55px 1fr;
        grid-template-rows: 60fr 55px 81px 163fr auto 38px 199fr;
        width: 100vw;
        padding: 0;
    }

    .full-menu__logo {
        grid-area: 2 / 2 / 3 / 2;
        width: unset;
        height: unset;
        position: relative;
        top: 0;
        left: 0;
    }

    .full-menu__close {
        grid-area: 2 / 4;
        width: unset;
        height: unset;
        position: relative;
        top: 0;
        left: 0;
    }

    .full-menu__close svg {
        width: 55px;
    }

    .full-menu__links {
        grid-area: 5 / 2 / 6 / 4;
    }

    .full-menu__social-media {
        grid-area: 6 / 2;
    }

    .full-menu__links {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .full-menu__links__column a:first-of-type {
        font-size: 24px;
        font-weight: 400;
        font-family: "Lexend Deca", sans-serif;
    }

    .full-menu__links__column {
        gap: 13px;
    }

    .full-menu__links a {
        border: none !important;
        font-size: 20px;
        padding: none !important;
        margin: none !important;
        font-weight: 400;
    }

    .full-menu__links__column:last-of-type {
        gap: 0;
    }

    .full-menu__links__column:last-of-type a:not(:nth-of-type(4), :nth-of-type(5), :nth-of-type(6)) {
        font-size: 24px;
        font-family: "Lexend Deca", sans-serif;
        font-weight: 400;
        border-bottom: 1px solid white !important;
        margin: 0 0 38px 0;
        padding: 0 0 38px 0;
    }

    .full-menu__links__column:last-of-type a:nth-of-type(4) {
        font-size: 24px;
        font-family: "Lexend Deca", sans-serif;
        font-weight: 400;
    }

    .full-menu__links__column:last-of-type a:nth-of-type(5) {
        font-size: 28px;
        margin-bottom: 50px;
        margin-top: 30px;
    }

    .full-menu__links__column:last-of-type a:nth-of-type(6) {
        width: 164px;
        font-size: 20px;
        height: 48px;
        padding: 0;
        line-height: 48px;
    }
    
    .full-menu__links__column:last-of-type a:nth-of-type(6):hover {
        background: white;
    }

    .full-menu__social-media {
        gap: 55px;
    }

    .full-menu__social-media a svg {
        height: 37px !important;
        width: 37px !important;
    }

    .desktop-only {
        display: block;
    }
}

/* STRONY Z PRODUKTAMI */

.product-layout {
    display: flex;
    flex-direction: column;
    color: white;
    font-family: "Nunito Sans", sans-serif;
}

.product__top-photo {
    background-size: cover;
    background-position: bottom center;
    padding: 108px calc((100vw - 280px) / 2) 62px;
    height: 560px;
}

.product__photo {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 530px;
    background-color: white;
}

.product__breadcrumbs {
    margin-bottom: 40px;
}

.product__breadcrumbs a {
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.product__breadcrumbs a:not(:last-of-type):after {
    content: " / ";
}

.product__info__type {
    font-family: "Lexend Deca", sans-serif;
    font-size: 36px;
    margin-bottom: 10px;
}

.product__info__ingredients {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 40px;
}

.product__description {
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 54px;
}

.product__info__links-row {
    display: flex;
    justify-content: space-between;
}

.product__info__links-row a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    background-color: black;
    padding: 10px 20px;
}

.product__ingredients {
    padding: 33px calc((100vw - 280px) / 2);
}

.product__ingredients__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 28px;
    margin-bottom: 37px;
}

.product__ingredients__row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 18px;
}

.product__ingredients__row svg {
    width: 60px;
}

.product__details {
    padding: 33px calc((100vw - 280px) / 2);
}

.product__details__heading {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 40px;
}

.product__details__table table {
    margin-bottom: 25px;
}

.product__details__table td {
    padding: 15px;
    font-size: 16px;
}

.product__details__table tr:first-of-type td {
    font-weight: bold;
}

.product__details__table tr:not(:last-of-type) td {
    border-bottom: 1px solid white;
}

.product__details__additional {
    margin-bottom: 40px;
}

.product__details__ingredients {
    font-weight: 400;
    line-height: 22px;
}

.product__middle-photo {
    height: 383px;
    background-position: center;
    background-size: cover;
}

.product__back-bar {
    height: 114px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product__back-bar a {
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid white;
    padding: 15px 20px;
    transition: 0.3s;
}

.product__back-bar a:hover {
    color: black;
    border-color: black;
}

.product__bottom-photo {
    height: 470px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 90px;
}

.product__bottom-photo__text {
    max-width: 280px;
    font-size: 36px;
    text-align: center;
    font-family: "Lexend Deca", sans-serif;
    line-height: 48px;
}

.product__bottom-photo a {
    color: white;
    background-color: black;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 20px;
    transition: 0.3s;
}

.product__bottom-photo a:hover {
    color: black;
    background-color: white;
}

@media (min-width: 1400px) {
    .product-layout {
        display: grid;
        grid-template-columns: 1fr 504px 424px 56px 24px 312px 1fr;
        grid-template-rows: 289px 340px 110px 155px auto 99px 690px 164px 600px;
        gap: 0px 0px;
        grid-auto-flow: row;
    }

    .product__top-photo {
        grid-area: 1 / 1 / 4 / 8;
        padding: 0;
        height: unset;
        display: grid;
        grid-template-columns: 1fr 500px 820px 1fr;
        grid-template-rows: 160px 1fr;
        background-position: center;
    }

    .product__breadcrumbs {
        margin-bottom: 80px;
    }

    .product__info__ingredients {
        margin-bottom: 25px;
    }

    .product__info {
        grid-area: 2 / 2;
    }

    .product__description {
        font-size: 20px;
        line-height: 27px;
    }

    .product__info__links-row {
        justify-content: flex-start;
    }

    .product__info__links-row a {
        font-size: 16px;
        padding: 10px 18px;
        transition: .3s;
    }
    
    .product__info__links-row a:hover {
        background: white;
        color: black;
    }

    .product__info__links-row a:first-of-type {
        margin-right: 95px;
    }

    .product__info__type {
        font-size: 48px;
    }

    .product__details {
        grid-area: 3 / 2 / 7 / 5;
        padding: 0;
        z-index: 2;
    }

    .product__ingredients {
        grid-area: 3 / 6 / 7 / 7;
        padding: 0;
        z-index: 2;
    }

    .product__ingredients {
        z-index: 2;
        padding: 26px 57px;
    }

    .product__details {
        z-index: 2;
        padding: 26px 88px;
        display: grid;
        grid-template-columns: 360px 56px 424px;
        grid-template-rows: 300px auto;
    }

    .product__details__table {
        grid-area: 1 / 1 / 3 / 1;
    }

    .product__details__table table {
        width: 100%;
    }

    .product__details__ingredients {
        grid-area: 2 / 3;
    }

    .product__photo {
        grid-area: 2 / 3 / 5 / 4;
        z-index: 3;
        height: unset;
        background-position: center;
    }

    .product__middle-photo {
        grid-area: 6 / 1 / 8 / 8;
        height: unset;
    }

    .product__back-bar {
        grid-area: 8 / 1 / 9 / 8;
        height: unset;
    }

    .product__bottom-photo {
        grid-area: 9 / 1 / 10 / 8;
        height: unset;
        gap: 70px;
    }

    .product__back-bar a {
        font-size: 20px;
    }

    .product__bottom-photo__text {
        font-size: 48px;
        max-width: 50%;
    }

    .product__bottom-photo a {
        font-size: 20px;
        padding: 20px;
    }
}

/* STRONY SMOOTHIE I SOKI */

.smoothie-grid__text,
.soki-grid__text {
    padding: 100px calc((100vw - 1320px) / 2) 410px calc((100vw - 1320px) / 2);
    margin-bottom: -310px;
}

.smoothie-grid__text {
    background-color: #eef3d9;
}

.soki-grid__text {
    background-color: #fdebed;
}

.smoothie-grid__text__heading,
.soki-grid__text__heading {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 35px;
    padding-left: 112px;
}

.smoothie-grid__text__paragraph,
.soki-grid__text__paragraph {
    font-size: 20px;
    line-height: 27px;
    font-family: "Nunito Sans", sans-serif;
    padding-left: 112px;
    max-width: 780px;
}

.smoothie-grid__flex,
.soki-grid__flex {
    padding: 0 calc((100vw - 1320px) / 2) 100px calc((100vw - 1320px) / 2);
    display: flex;
    flex-wrap: wrap;
    gap: 100px 24px;
}

.soki-grid__flex {
    justify-content: center;
}

.smoothie-grid__flex__item,
.soki-grid__flex__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: flex-start;
    align-items: center;
}

.smoothie-grid__flex__item > div:first-of-type,
.soki-grid__flex__item > div:first-of-type {
    height: 600px;
    background-size: cover;
    background-position: center;
}

.smoothie-grid__flex__item > div:nth-child(2),
.soki-grid__flex__item > div:nth-child(2) {
    font-family: "Nunito Sans", sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.smoothie-grid__flex__item,
.soki-grid__flex__item {
    text-decoration: none;
    color: unset;
}

.smoothie-grid__flex__item > div:last-of-type,
.soki-grid__flex__item > div:last-of-type {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: white;
    background-color: black;
    padding: 10px 20px;
    text-decoration: none;
    width: 136px;
    text-align: center;
}

.smoothie-grid__flex__item > div:last-of-type:hover,
.soki-grid__flex__item > div:last-of-type:hover {
    color: black;
    background-color: white;
}

.smoothie-grid__flex__item > div > div,
.soki-grid__flex__item > div > div {
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: 0.3s;
}

.smoothie-grid__flex__item > div > div:hover,
.soki-grid__flex__item > div > div:hover {
    background: rgba(255, 255, 255, 0);
}

.smoothie-grid__flex__item img,
.soki-grid__flex__item img {
    width: 100%;
}

.smoothie-grid__flex__item,
.soki-grid__flex__item {
    width: 32%;
    position: relative;
}

.smoothie-grid__flex__item > div,
.soki-grid__flex__item > div {
    width: 100%;
}

@media (max-width: 1400px) {
    .smoothie-grid__text,
    .soki-grid__text {
        padding: 50px calc((100vw - 280px) / 2);
        margin-bottom: 0px;
    }

    .smoothie-grid__text__heading,
    .soki-grid__text__heading {
        font-family: "Lexend Deca", sans-serif;
        font-size: 44px;
        margin-bottom: 35px;
        padding-left: 0px;
    }

    .smoothie-grid__text__paragraph,
    .soki-grid__text__paragraph {
        font-size: 16px;
        line-height: 22px;
        font-family: "Nunito Sans", sans-serif;
        padding-left: 0px;
        max-width: 100%;
    }

    .smoothie-grid__flex,
    .soki-grid__flex {
        padding: 100px calc((100vw - 280px) / 2) 100px;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 100px 24px;
    }

    .smoothie-grid__flex__item,
    .soki-grid__flex__item {
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: flex-start;
        align-items: center;
    }

    .smoothie-grid__flex__item > div:first-of-type,
    .soki-grid__flex__item > div:first-of-type {
        height: 400px;
        background-size: cover;
        background-position: center;
    }

    .smoothie-grid__flex__item > div:nth-child(2),
    .soki-grid__flex__item > div:nth-child(2) {
        font-family: "Nunito Sans", sans-serif;
        font-weight: bold;
        font-size: 20px;
        text-align: center;
    }

    .smoothie-grid__flex__item > a,
    .soki-grid__flex__item > a {
        font-family: "Nunito Sans", sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: white;
        background-color: black;
        padding: 10px 20px;
        text-decoration: none;
    }

    .smoothie-grid__flex__item > a:hover,
    .soki-grid__flex__item > a:hover {
        color: black;
        background-color: white;
    }

    .smoothie-grid__flex__item > div > div,
    .soki-grid__flex__item > div > div {
        background: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        transition: 0.3s;
    }

    .smoothie-grid__flex__item > div > div:hover,
    .soki-grid__flex__item > div > div:hover {
        background: rgba(255, 255, 255, 0);
    }

    .smoothie-grid__flex__item img,
    .soki-grid__flex__item img {
        width: 100%;
        height: auto;
    }

    .smoothie-grid__flex__item,
    .soki-grid__flex__item {
        width: 100%;
    }
}

@media (min-width: 1400px) {
    .oferta__soki__info.smaller {
        grid-template-columns: 112px 760px 336px 112px;
        width: 1320px;
        margin: auto;
    }

    .oferta__soki__info.smaller .oferta__soki__info__character {
        grid-area: 1 / 3;
    }

    .oferta__smoothie__info.smaller {
        grid-template-columns: 112px 906px 24px 223px;
        width: 1320px;
        margin: auto;
    }
}

/* KONTAKT */

.kontakt {
    width: 1208px;
    margin: 110px calc( ( 100vw - 1320px ) / 2 ) 110px calc( ( 100vw - 1096px) / 2 );
    display: grid;
    grid-template-columns: 424px 24px 312px 24px 424px;
    gap: 95px 0px;
}

.kontakt__person {
    display: flex;
    flex-direction: column;
}

.kontakt__person:nth-of-type(1) {
    grid-area: 1 / 1;
}

.kontakt__person:nth-of-type(2) {
    grid-area: 1 / 3;
}

.kontakt__person:nth-of-type(3) {
    grid-area: 1 / 5;
}

.kontakt__person div:nth-child(1) {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
/*     grid-area: 1 / 1; */
    font-weight: 400;
    margin-bottom: 7px;
}

.kontakt__person div:nth-child(2) {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    margin-bottom: 24px;
/*     grid-area: 1 / 3; */
    font-weight: 400;
}

@media (max-width: 1400px) {
    .kontakt__person div:nth-child(1) {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .kontakt__person div:nth-child(2) {
        font-size: 16px;
    }
}

.kontakt__person div:nth-child(3) {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
/*     grid-area: 1 / 5; */
    font-weight: 400;
}

.kontakt__firma {
    display: flex;
    gap: 20px;
    grid-area: 2 / 1;
}

.kontakt__firma div:nth-child(2) div:nth-child(1){
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    margin-bottom: 20px;
}

.kontakt__firma div:nth-child(2) div:nth-child(2){
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
}

.kontakt__mail {
    display: flex;
    gap: 20px;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 27px;
    font-weight: bold;
    grid-area: 2 / 3;
}

.kontakt__social {
    display: flex;
    gap: 43px;
    grid-area: 2 / 5;
}

@media (max-width: 1399px) {
    .kontakt {
        width: 280px;
        margin: auto;
        flex-direction: column;
        gap: 46px;
        padding: 46px 0;
        display: flex;
    }
    
    .kontakt__social {
        justify-content: center;
    }
}


/* FORMULARZ */

.form {
    background-image: url(../img/tlo_kontakt.jpg);
    background-position: center;
    background-size: cover;
    padding: 60px calc( ( 100vw - 648px ) / 2 );
    display: flex;
    flex-direction: column;
}

.form>div:nth-child(1) {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    margin-bottom: 30px;
}

.form>div:nth-child(2) {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    margin-bottom: 30px;
}

.form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form form [type=text], .form form [type=email] {
    border: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    padding: 10px 15px;
}

.form form textarea {
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    font-family: 'Nunito Sans', sans-serif;
    resize: none;
    height: 194px;
}

.form form [type=submit] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    background-color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

@media (max-width: 1399px) {
    .form {
        background-image: url(../img/tlo_kontakt.jpg);
        background-position: center;
        background-size: cover;
        padding: 50px calc( ( 100vw - 280px ) / 2 );
        display: flex;
        flex-direction: column;
    }

    .form>div:nth-child(1) {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 24px;
        margin-bottom: 30px;
    }

    .form>div:nth-child(2) {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 16px;
        margin-bottom: 30px;
    }

    .form form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .form form [type=text], .form form [type=email] {
        border: none;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 12px;
        padding: 10px 15px;
    }

    .form form textarea {
        border: none;
        padding: 10px 15px;
        font-size: 12px;
        font-family: 'Nunito Sans', sans-serif;
        resize: none;
        height: 194px;
    }

    .form form [type=submit] {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 600;
        font-size: 16px;
        background-color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
    }
}



/* UTIL */

.bottom-photo--black {
    color: black;
}

.bottom-photo--black .bottom-photo__paragraph {
    max-width: 648px;
    margin-bottom: 50px;
}

@media (max-width: 1399px) {
    .bottom-photo--black .bottom-photo__paragraph {
        max-width: 280px;
    }
}

/* LISTA SKLEPÓW */

.sklepy {
    width: 1096px;
    margin: auto;
    padding: 136px 0 120px;
    display: flex; flex-direction: column;
}

.sklepy__heading {
    margin-bottom: 88px;
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sklepy__heading * {
    max-width: 536px;
    text-align: center;
}

.sklepy__heading__header {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
    font-size: 48px;
    margin-bottom: 36px;
}

.sklepy__heading__paragraph {
    font-size: 20px;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 27px;
}

.sklepy__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 112px 0;
}

.sklepy__list__item__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    margin-bottom: 32px;
}

.sklepy__list__item__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px;
    line-height: 34px;
}

@media ( max-width: 1399px ) {
    .sklepy {
        width: 280px;
        margin: auto;
        padding: 60px 0;
        display: flex; flex-direction: column;
    }

    .sklepy__heading {
        margin-bottom: 82px;
        display: flex; flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sklepy__heading * {
        max-width: 280px;
        text-align: center;
    }

    .sklepy__heading__header {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: bold;
        font-size: 48px;
        margin-bottom: 36px;
    }

    .sklepy__heading__paragraph {
        font-size: 16px;
        font-family: 'Nunito Sans', sans-serif;
        line-height: 22px;
    }

    .sklepy__list {
        display: flex; flex-direction: column;
        gap: 96px;
    }

    .sklepy__list__item__heading {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 24px;
        margin-bottom: 32px;
    }

    .sklepy__list__item__paragraph {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 24px;
        line-height: 34px;
        
    }
}

/* LOGOTYPY SKLEPÓW */

.logos {
    background-color: #F2C374;
    padding: 120px calc( ( 100vw - 1096px  ) / 2 );
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 140px 0;
}

@media (max-width: 1399px) {
    .logos {
        padding: 80px calc( ( 100vw - 300px ) / 2 );
        grid-template-columns: repeat(2, 1fr);
        gap: 80px 0;
    }
}

/* B2B */

.b2b {
    width: 1096px;
    margin: auto;
    padding: 86px 0;
    gap: 100px;
    display: flex;
    flex-direction: column;
}

.b2b__item {
    display: flex;
    gap: 136px;
}

.b2b__item__info {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.b2b__item__info__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
    line-height: 66px;
}

.b2b__item__info__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    line-height: 27px;
    font-size: 20px;
}

.b2b__item__info__link {
    color: white;
    background-color: black;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif;
    width: 186px;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 600;
}

.b2b__item__photo {
    height: 400px;
    width: 536px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

@media (max-width: 1399px) {
    .b2b {
        width: 280px;
        margin: auto;
        padding: 36px 0;
        gap: 57px;
        display: flex;
        flex-direction: column;
    }

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

    .b2b__item__info {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .b2b__item__info__heading {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 44px;
        line-height: 58px;
    }

    .b2b__item__info__paragraph {
        font-family: 'Nunito Sans', sans-serif;
        line-height: 22px;
        font-size: 16px;
    }

    .b2b__item__info__link {
        color: white;
        background-color: black;
        text-decoration: none;
        font-family: 'Nunito Sans', sans-serif;
        width: 186px;
        text-align: center;
        line-height: 48px;
        font-size: 16px;
        font-weight: 600;
    }

    .b2b__item__photo {
        order: 2;
        height: 239px;
        width: 100%;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
    }    
}





/* FIRMA RODZINNA */

.firma-rodzinna__quote {
    width: 636px;
    padding-left: 112px;
}

.firma-rodzinna__quote__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
    margin-bottom: 30px;
}

.firma-rodzinna__quote__text {
    font-family: 'Nunito Sans' , sans-serif;
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 30px;
}

.firma-rodzinna__quote__author {
    font-family: 'Nunito Sans' , sans-serif;
    font-size: 16px;
    line-height: 22px;
    text-align: right;
}

#firma-rodzinna {
    display: flex;
    flex-direction: column;
    width: 1320px;
    margin: auto;
    padding: 86px 0;
    gap: 69px;
}

.firma-rodzinna__person {
    display: flex;
}

.firma-rodzinna__person__info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-direction: column;
}

.firma-rodzinna__person-info__name{
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    margin-bottom: 10px;
}

.firma-rodzinna__person-info__role {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
}

.firma-rodzinna__person__photo {
    width: 760px;
}

.firma-rodzinna__person:nth-child(even) .firma-rodzinna__person__photo {
    order: 2;
}

@media (max-width: 1399px) {
    #firma-rodzinna {
        width: 280px;
        padding: 46px calc( ( 100wv - 280px ) / 2 ); 
    }
    
    .firma-rodzinna__quote {
        padding: 0;
        width: 100%;
    }
    
    .firma-rodzinna__quote__author {
        text-align: left;
    }
    
    .firma-rodzinna__person__photo {
        width: 100%;
    }
    
    .firma-rodzinna__person {
        flex-direction: column;
    }
    
    .firma-rodzinna__person__info {
        height: 153px;
    }
    
    .firma-rodzinna__person-info__name {
        font-size: 24px;
    }
    
    .firma-rodzinna__person-info__role {
        font-size: 16px;
    }
    
        .firma-rodzinna__person:nth-child(even) .firma-rodzinna__person__info {
        order: 2;
    }
    
    .firma-rodzinna__person:nth-child(even) .firma-rodzinna__person__photo {
        order: 1;
    }
}


.misja-potencjal {
    padding: 162px calc( ( 100vw - 1096px ) / 2 );
    background-image: url(../img/tlo_misja.jpg);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

#nasza-misja, #potencjal {
    display: flex;
    gap: 24px;
}

#nasza-misja>*,
#potencjal>*
{
    width: 536px;
}

#potencjal div {order: 2}#potencjal img {order: 1}

.misja-potencjal__text__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
    margin-bottom: 20px;
}

.misja-potencjal__text__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    line-height: 27px;
    font-size: 20px;
}

@media (max-width: 1399px) {
   .misja-potencjal {
        padding: 80px calc( ( 100vw - 280px ) / 2 );
        background-image: url(../img/tlo_misja_mob.jpg);
        display: flex;
        flex-direction: column;
        gap: 80px;
    } 
    
    #nasza-misja, #potencjal {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    #nasza-misja>*,
#potencjal>*
{
    width: 100%;
}
    
    #potencjal div {order: 1}#potencjal img {order: 2}
    
    .misja-potencjal__text__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 44px;
    margin-bottom: 20px;
}

.misja-potencjal__text__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    line-height: 22px;
    font-size: 16px;
}
    
}


.o-nas-bottom {
    display: flex;
    height: 873px;
    background-position: top;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: calc( ( 100vw - 1320px ) / 2 );
} 

.o-nas-bottom .bottom-photo__paragraph {
    margin-bottom: 0;
    max-width: 648px;
}

.o-nas-bottom * {
    text-align: left;
}

@media (max-width: 1399px) {
    .o-nas-bottom {
        padding-left: calc( ( 100vw - 280px ) / 2 );
        height: 812px;
        padding-top: 85px;
        justify-content: flex-start;
    }
    
    .o-nas-bottom .bottom-photo__paragraph {
        max-width: 280px;
    }
}


/* JESTEŚMY FIT */

.jestesmy-fit {
    width: 1320px;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 100px 0;
}

.jestesmy-fit__heading {
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.jestesmy-fit__heading__header {
    text-align: center;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
    margin-bottom: 30px;
}

.jestesmy-fit__heading__subheader {
    font-family: 'Nunito Sans', sans-serif;
    max-width: 648px;
    text-align: center;
    font-size: 20px;
    line-height: 27px;
}

.article-card__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px 24px;
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.article-card__photo {
    height: 234px;
    background-size: cover;
    background-position: center;
}

.article-card__date {
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
}

.article-card__title {
    font-size: 24px;
    line-height: 32px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
}

.article-card__text {
    font-size: 20px;
    line-height: 27px;
    font-family: 'Nunito Sans', sans-serif;
    flex-grow: 1;
}

.article-card__link {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: black;
    border: 1px solid black;
    width: 132px;
    text-align: center;
    padding: 10px;
}

@media ( max-width: 1399px ) {
    .jestesmy-fit {
        width: 280px;
        padding: 50px 0;
    }
    
    .jestesmy-fit__heading {
        margin-bottom: 60px;
    }
    
    .jestesmy-fit__heading__header {
        font-size: 44px;
        line-height: 58px;
        text-align: left;
    }
    
    .jestesmy-fit__heading__subheader {
        font-size: 16px;
        line-height: 22px;
        text-align: left;
    }
    
    .article-card__list {
        display: flex;
        flex-direction: column;
    }
    
    .article-card__photo {
        height: 176px;
    }
}


.article {
    width: 648px;
    margin: auto;
    padding: 90px 0;
    display: flex;
    flex-direction: column;
}

.article__date {
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
    margin-bottom: 28px;
}

.article__title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    margin-bottom: 90px;
}

.article__text p {
    margin-bottom: 30px;
    font-size: 20px;
    font-family: 'Nunito Sans';
    line-height: 27px;
}

.article__text h2 {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    line-height: 27px;
    font-weight: 700;
}

@media (max-width: 1399px) {
    .article {
        width: 280px;
        margin: auto;
        padding: 30px 0;
        display: flex;
        flex-direction: column;
    }

    .article__date {
        font-size: 16px;
        font-family: 'Nunito Sans', sans-serif;
        margin-bottom: 15px;
    }

    .article__title {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 28px;
        margin-bottom: 30px;
    }

    .article__text p {
        margin-bottom: 30px;
        font-size: 20px;
        font-family: 'Nunito Sans';
        line-height: 27px;
    }

    .article__text h2 {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 20px;
        line-height: 27px;
        font-weight: 700;
    }
}



/* FUN HEADER */

.header--fun {
    height: 560px;
    background-position: center;
    background-size: cover;
    padding: 107px calc((100vw - 280px) / 2) 0;
    color: white;
    background-image: url(../img/baner_fun_mob.jpg);
}

.header__breadcrumbs--fun {
    margin-bottom: 10px;
}

.header__breadcrumbs--fun a {
    color: white;
    font-family: "Nunito Sans", sans-serif;
    text-decoration: none;
    font-size: 14px;
}

.header__breadcrumbs--fun a:not(:last-of-type):after {
    content: " / ";
}

.header__heading--fun {
    font-family: "Lexend Deca";
    line-height: 48px;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 10px;
}

.header__paragraph--fun {
    font-size: 16px;
    font-weight: 600;
    font-family: "Nunito Sans", sans-serif;
    line-height: 22px;
}

    .header--fun__character {
        width: 280px;
        height: 206px;
        background-image: url(../img/Jabco_hero5.png);
        background-size: contain;
        background-position: center;
        animation: 1s waving infinite;
        transform-origin: bottom;
        background-repeat: no-repeat;
    }

@media (min-width: 1400px) {
    .header--fun {
        background-image: url(../img/baner_fun.jpg);
        height: 738px;
        padding: 150px calc((100vw - 1320px) / 2) 0;
        display: flex;
    }

    .header__text--fun {
        width: 680px;
    }

    .header__breadcrumbs--fun {
        margin-bottom: 150px;
    }

    .header__heading--fun {
        line-height: 66px;
        font-size: 48px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .header__paragraph--fun {
        line-height: 34px;
        font-size: 24px;
    }
    
    .header--fun__character {
        width: 648px;
        height: 473px;
        background-image: url(../img/Jabco_hero5.png);
        background-size: contain;
        background-position: center;
        animation: 1s waving infinite;
        transform-origin: bottom;
        background-repeat: no-repeat;
    }

}

@keyframes waving {
    0%, 100%{
        background-image: url(../img/Jabco_hero5.png);
        transform: rotate(0);
    }
    
    50% {
        transform: rotate(0.5deg);
        background-image: url(../img/Jabco_hero5b.png);
    }
}

.fun {
    width: 1208px;
    padding: 90px 0;
    margin: 0 calc( ( 100vw - 1320px ) / 2 ) 0 calc( ( 100vw - 1096px ) / 2 );
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.fun__row {
    display: flex;
    gap: 136px;
    align-items: center;
}

.fun__row__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.fun__row__text__heading {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 48px;
}

.fun__row__text__paragraph {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    line-height: 27px;
}

.fun__row__text__link {
    color: white;
    background-color: black;
    width: 138px;
    text-align: center;
    line-height: 31px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
    transition: .3s;
}

.fun__row__text__link:hover {
    color: black;
    background-color: white;
}

.fun__row__img {
    width: 536px;
}

@media (max-width: 1399px) {
    .fun {
        width: 100%;
        padding: 0 0 90px 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 96px;
    }
    
    .fun__row {
        flex-direction: column;
        display: flex;
        gap: 30px;
    }
    
    .fun__row__img {
        order: 1;
    }
    
    .fun__row__text {
        order: 2;
    }
    
    .fun__row__img {
        width: 100%;
    }
    
    .fun__row__text {
        padding: 0 calc( ( 100vw - 280px ) / 2 );
    }
}


.tapety {
    padding: 90px 0;
    width: 1320px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: auto;
}

.tapety__card {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.tapety__card__links {
    display: flex;
    justify-content: space-between;
}

.tapety__card__links__a {
    color: white;
    background-color: black;
    padding: 0px 10px;
    line-height: 30px;
    font-size: 16px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Nunito Sans', sans-serif;
    transition: .3s;
    cursor: pointer;
}

.tapety__card__links__a:hover {
    color: black;
    background-color: white;
}

.tapety__card__img {
    width: 100%;
}

@media ( max-width: 1399px ) {
    .tapety {
        width: 280px;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    
    .tapety__card__links__a {
        font-size: 12px;
        padding: 0px 10px;
    }
}

/* KOLOROWANKI */

.kolorowanki {
    width: 1320px;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    display: grid;
    margin: auto;
    padding: 90px 0;
}

.kolorowanki__card {
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: center;
}

.kolorowanki__card__img {
    width: 100%;
    border: 1px solid black;
}

.kolorowanki__card__link {
    color: white;
    background-color: black;
    padding: 0px 20px;
    font-family: 'Nunito Sans', sans-serif;
    text-decoration: none;
    font-weight: 600;
    line-height: 30px;
    transition: .3s;
}

.kolorowanki__card__link:hover {
    color: black;
    background-color: white;
}

@media ( max-width: 1399px ) {
    .kolorowanki {
        width: 280px;
        gap: 65px;
        display: flex;
        flex-direction: column;
    }
} 

.header--kolorowanki {
    position: relative;
    z-index: -1;
}

.header--kolorowanki__character {
    width: 452px;
    height: 573px;
    background-image: url(../img/Jabco_herokleks1.png);
    background-position: center;
    background-size: contain;
    position: absolute;
    right: calc( ( 100vw - 1320px ) / 2 );
    bottom: 50px;
    transform-origin: bottom center;
    animation: 1.5s klexin infinite;
    background-repeat: no-repeat;
}

@media (max-width: 1399px) {
    
    .header--kolorowanki {
        height: 650px;
    }
    
    .header--kolorowanki__character {
        right: calc( ( 100vw - 280px ) / 2 );
        width: 215px;
        height: 272px;
    }
}

@keyframes klexin {
    0%, 100% {
        background-image: url(../img/Jabco_herokleks1.png);
        transform: scaleY(.99) rotate(-1deg);
    }
    
    50% {
        background-image: url(../img/Jabco_herokleks2.png);
        transform: scaleX(1) rotate(1deg);
    }
}


.article__arrows {
    margin-top: 36px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 36px;
    align-items: center;
}

.article__arrows a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    gap: 24px;
}


@media (max-width: 1400px) {
    .article__arrows a{
        font-size: 16px; 
    }
}
        








.modal:not(.open) {
    display: none;
}

.modal.open {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    flex-direction: column;
    gap: 20px;
    align-items: end;
    transform: translate(-50%, -50%);
}

.modal.open img {
    height: 500px;
}

.modal.open a {
    color: white;
    background-color: black;
    padding: 0px 16px;
    line-height: 35px;
    font-size: 20px;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Nunito Sans', sans-serif;
    transition: .3s;
}

.modal.open a:hover {
    background: white;
    color: black;
}

.modal.open .close-modal {
    cursor: pointer;
}

@media (max-width: 1400px) {
    
    .modal.open {
        width: 90%;
    }
    
    .modal.open img {
        height: auto;
        width: 100%;
    }
}


.checkbox-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    gap: 24px;
    margin-bottom: 24px;
}

.checkbox-wrapper label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 19px;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.logo-grid img {
    width: 300px;
    height: auto;
}