/* App */
.app {
    width: 100%;
/*    max-width: 1300px;*/
    margin: 0 auto;
    position: relative;
    padding-block: 0 5rem;
}

/* Header */
.header {
    background-color: #fff;
    position: fixed;
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-item img{
    height: 85%;
}

.header-item {
    display: flex;
    align-items: center;
    position: relative;
    height: 80px;
    max-height: 90px;
    min-width: 210px;
    justify-content: center;
}

.header-item.left {
    justify-content: flex-start;
}

.header-item.center {
    justify-content: center;

    img {
        object-fit: contain;
    }
}

.header-item.right {
    justify-content: flex-end;
}

/* Hamburger */
.nav-hamburger {
    width: 58px;
    top: 0.2rem;
    position: fixed;
    cursor: pointer;
    z-index: 1000;
    height: 78px;
    align-content: center;
    button {

        img {
            object-fit: cover;
        }
    }
}

.nav-open-btn, .nav-close-btn {
    width: 65px;
    height: 65px;
/*    background-image: radial-gradient(circle, rgba(0, 146, 188, 1) 20%, rgba(255, 255, 255, 0) 70%);*/
}
.nav-open-btn img, .nav-close-btn  img{
   padding: 9px;
    
}
.nav-hamburger-absolute {
    width: 58px;
    right: 0;
    position: absolute;
}

/* Nav full */
.nav-full {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 83px;
    left: 0;
    background-color: var(--hw-turquoise);
    z-index: 950;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-block: 3rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10%);
    transition: opacity .45s ease, transform .5s cubic-bezier(.4, .0, .2, 1);

  
}
.nav-full a {
        font-size: 2rem;
        color: var(--hw-turquoise-background);
    }
.nav-full.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
[id] {
    scroll-margin-top: 88px; /* Dokładnie tyle, ile wynosi wysokość Twojego headera */
}
/* Main */
.main {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: var(--bg-white);
    position: relative;
    overflow: hidden;
    padding-top: 83px;
}

/* Hero */
.hero {
  height: 60vh;
  /*background: #0c9eb8;*/
  /*background: url(../img/hero/1.png) center top / cover no-repeat fixed;*/
  overflow: hidden;
  position: relative;
}

.hero-inner {
  position: sticky;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
    position: fixed;
    top: 45%;
    left: 0;
    width: 100vw;
    text-align: center;
    font-size: 8vw;
    font-weight: bold;
    transform: translateY(-70%);
    z-index: 2;
    line-height: 100%;
    
}
.hero-text div:nth-child(1) {
    width: 100%;
    -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation-delay: 0.5s;
}

.hero-text div:nth-child(2) {
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transform-origin: 100% 100%;
  -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation-delay: 1.3s;
    
}

.hero-text  div:nth-child(3) {
    width: 100%;
  -webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation-delay: 2.1s;
}


.video-hero {
  width: 100%;
  display: flex;
  justify-content: center;
}

.video-wrapper {
  width: 100%;
  max-width: 1300px;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* brak interakcji */
}


/* Sections */
.section-1 {
    position: relative; /* ważne – tworzy kontekst nakładania */
    z-index: 3; /* musi być większy niż .hero-text (która ma np. z-index: 2) */
    background-color: var(--bg-white); /* tło, które zakrywa tekst */
    max-width: 1300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 5rem 7rem;
    
    h4 {
        color: var(--hw-turquoise);
        font-variant: all-small-caps;
        line-height: normal;
        margin: 0 auto;
    }
}
.circle{
   background: #0092bc;
    border-radius: 50%;
    color: var(--text-white);
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 2.1rem;
    opacity: 0;
}
.circle.start{
    background: #0092bc;
    border-radius: 50%;
    color: var(--text-white);
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 2.1rem;
    -webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
     opacity: 1;
   
}
.section-1-text {
    color: var(--purple-dark);
    font-size: 2.8125rem;
    line-height: 130%;
}

.section-1-wrapper {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;

    img {
        max-width: 25.125rem;
    }

    h3 {
        color: var(--purple-dark);
        line-height: normal;
    }

    h3 span {
        color: var(--hw-turquoise);
    }
}
.section-1-wrapper img{
    margin: 15px 0px;
}
/* Section 2 */
.section-2 {
    display: flex;
    z-index: 3; 
    flex-direction: column;    
    background-color: var(--bg-white);
    background-image: url('../img/mask.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
}
.section-2>div {
    display: flex;
    z-index: 3; 
    flex-direction: column;
    gap: 5rem;
    padding: 5rem;
    /*border-radius: 0 9.375rem;*/
    position: relative;   
    max-width: 1300px;
    margin: 0 auto;
}

.section-2-container {
    display: grid;
    grid-template-columns: 1fr 0fr 1fr;
}

.section-2-menu {
    padding-right: 7rem;
}

.section-2-menu-item {
    display: flex;
    justify-content: space-between;
    padding-block: 3.125rem;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */ 
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* The rule below is not implemented in browsers yet */
    -o-user-select: none;

    /* The rule below is implemented in most browsers by now */
    user-select: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}

.section-2-menu-item-title {
    font-size: 1.75rem;
    text-transform: uppercase;
    font-weight: 300;
}

.section-2-menu-item-title.active {
    color: var(--hw-turquoise);
    font-weight: 700;
}

.section-2-menu-item-title.active+.section-2-menu-item-img {
    transform: rotate(45deg);
}

.section-2-menu-item-img {
    transition: transform .2s ease-in-out;
}

.section-2-fake-scroll {
    width: 1px;
    height: 100%;
    position: relative;
    background-color: var(--hw-gray-background);
}

.section-2-fake-scroll-inner {
    position: absolute;
    top: 0;
    left: -2px;
    transform: translateY(0%);
    width: 6px;
    height: 25%;
    background-color: var(--hw-turquoise);
    transition: transform .2s ease-in-out;
}

.section-2-content {
    display: flex;
    align-items: center;
    padding-left: 7rem;
}

.section-2-content-data {
    display: flex;
    flex-direction: column;
    gap: 1.9375rem;
}

.section-2-content-data-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: var(--hw-turquoise);
}

.section-2-content-data-desc {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--hw-turquoise-background);
}

.section-2-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
    background-color: var(--hw-turquoise);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;

    img {
        transition: transform .2s ease-in-out;
        will-change: transform;
    }

    &:hover {
        background-color: var(--color-orange);

        img {
            transform: rotate(45deg);
        }
    }
}

/* Section 3 */
.section-3 {
    display: flex;
    z-index: 3; 
    flex-direction: column;
    position: relative;
    overflow: hidden;
    gap: 5rem;
    padding: 3rem;
    background: #0092BC;
    background: radial-gradient(circle at -10% -20%, rgba(179, 222, 235, 1) 0%, rgba(255, 255, 255, 1) 40%);
    margin: 0 auto;

    h1 {
        line-height: 100%;
        font-variant: all-small-caps;
        color: var(--purple-dark);

        div {
            color: var(--hw-turquoise);
            font-weight: bold;
        }
    }

    h3 {
        font-size: 3.2rem;
        line-height: normal;
        font-variant: all-small-caps;
        color: var(--hw-black);
    }
}
.content-container-section{
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.section-3-line {
    width: 9.875rem;
    height: 4px;    
    background-color: var(--hw-turquoise);
}

.section-3-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-3-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-3-caruselle {
    width: 100%;
    display: flex;
    gap: 1.5rem;
}

.section-3-caruselle-item {
    display: flex;
}

.section-3-caruselle-item.shadow {
    right: -7rem;
    display: flex;
    position: absolute;
}

.section-3-caruselle-item-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 16%, #fff 80%);
}

.section-3-caruselle-item-number {
    color: var(--hw-turquoise-light);
    font-size: 18.75rem;
    font-weight: 700;
    line-height: normal;
}

.section-3-caruselle-item-img {
    margin-left: -9rem;
}

.section-3-caruselle-item-img.image-1 {
    padding-top: 3.375rem;
}

.section-3-caruselle-item-img.image-2 {
    padding-top: 3.375rem;
}

.section-3-caruselle-item-img.image-3 {
    padding-top: 3rem;
}

.section-3-caruselle-item-img img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.section-3-caruselle-item-title {
    display: flex;
    flex-direction: column;
    padding-top: 6.25rem;
    padding-left: 1rem;
}

.section-3-caruselle-item-title div {
    color: var(--hw-turquoise);
    font-size: 3.8rem;
    font-weight: 700;
    line-height: normal;
    font-variant: all-small-caps;
}

.section-3-caruselle-item-title h4 {
    color: var(--hw-black);
    line-height: normal;
    font-size: 1.8rem;
}

.section-3-caruselle-switch {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.section-3-caruselle-switch div {
    width: 2.75rem;
    height: .9375rem;
    border-radius: 6.25rem;
    background-color: var(--hw-gray);
    transition: width .5s ease-in-out, background-color .5s ease-in-out;

    &:hover {
        cursor: pointer;
    }
}

.section-3-caruselle-switch div.active {
    width: 9.875rem;
    background-color: var(--hw-turquoise);
}

/* Section 4 */
.section-news {
    display: flex;
    background-color: var(--hw-turquoise);
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0;
}

.section-news-wrapper {
    display: flex;
    align-items: center;
    padding: .5rem;
}

.section-news-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 .5rem;
    line-height: normal;

    h4 {
        color: var(--hw-gray-background);
    }
}

.section-news-item-img {
    display: grid;
    place-content: center;
    width: 2.5rem;
    height: 3.25rem;
}

.section-news-item-img img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Section 5 */
.section-5 {
    display: flex;
    z-index: 3; 
    flex-direction: column;
    gap: 5rem;
    padding-block: 5rem;
    /*border-radius: 0 0 0 9.375rem;*/
    position: relative;
    background-color: #002732;
    background-image: url('../img/mask2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;

    margin: 0 auto;

    h3 {
        line-height: normal;
        font-variant: all-small-caps;
        padding-inline: 6.875rem;
    }

    h4 {
        line-height: normal;
        padding-inline: 6.875rem;
    }
}

.section-5-wrapper {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    padding: 0rem 6.875rem;
}

.section-5-thebloc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
}

.section-5-thebloc img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.section-5-thebloc-desc {
    color: var(--hw-turquoise-background);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: normal;
}

.section-5-flags {
    display: flex;
    align-items: center;
    gap: 1.5625rem;
    position: relative;
    overflow: hidden;
}

.section-5-flags img {
    user-select: none;
    -webkit-user-drag: none;
}

.section-5-btn-wrapper {
    padding-inline: 6.875rem;
}

.section-bloc-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
/*    background-color: var(--hw-turquoise);*/
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;

    img {
        transition: transform .2s ease-in-out;
        will-change: transform;
        user-select: none;
        -webkit-user-drag: none;
    }

    &:hover {
        background-color: var(--color-orange);

        img {
            transform: rotate(45deg);
        }
    }
}
.section-5-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
    background-color: var(--hw-turquoise);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;

    img {
        transition: transform .2s ease-in-out;
        will-change: transform;
        user-select: none;
        -webkit-user-drag: none;
    }

    &:hover {
        background-color: var(--color-orange);

        img {
            transform: rotate(45deg);
        }
    }
}

/* Setcion 6 */
.section-6 {
    display: flex;
    z-index: 3;
    flex-direction: column;
    gap: 5rem;
    padding-block: 5rem;
    background-color: var(--bg-white);
    section-8-videomax-width: 1300px;
    margin: 0 auto;
    position: relative;
    max-width: 1300px;
}

.section-6-title {
    display: flex;
    align-items: center;
    align-self: center;
    padding-inline: 6.875rem;
}

.section-6-title span {
    color: var(--hw-turquoise);
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
}

.section-6-title img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    margin: 0 0 0 15px;
}

.section-6-caruselle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5625rem;
    position: relative;
    padding: 1rem;
    overflow: hidden;
    cursor: grab;
}

.section-6-caruselle.s6-dragging,
.section-6-caruselle.s6-dragging * {
    cursor: grabbing !important;
}

.section-6-caruselle-gradient {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, transparent 30%, transparent 60%, rgba(255, 255, 255, 1) 100%);
    z-index: 1;
    pointer-events: none;
}

    .section-6-title span div{
        display: inline-flex;
    }
.section-6-caruselle-item {
    display: flex;
    width: 21.375rem;
    height: 16.5rem;
    padding: 1.5rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
    border-radius: .75rem;
    border: 1px solid var(--hw-turquoise);
    transition: transform .25s ease-in-out, background-color .25s ease-in-out;

    &:hover {
        cursor: pointer;
        transform: rotate(-3deg);
        background-color: var(--hw-black);

        img {
            filter: brightness(0) saturate(100%) invert(90%) sepia(2%) saturate(2813%) hue-rotate(193deg) brightness(108%) contrast(96%);
        }

        .section-6-caruselle-item-desc {
            color: var(--hw-turquoise-background);
        }
    }

    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.section-6-caruselle-item img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(58%) saturate(7221%) hue-rotate(169deg) brightness(95%) contrast(101%);
    transition: filter .25s ease-in-out;
    user-select: none;
    -webkit-user-drag: none;
}

.section-6-caruselle-item-desc {
    color: var(--hw-black);
    font-size: 1.5rem;
    line-height: normal;
    transition: color .25s ease-in-out;
}

.section-6-content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-inline: 6.875rem;
}

.section-6-line {
    width: 9.875rem;
    height: 4px;
    background-color: var(--hw-turquoise);
}

.section-6-subtitle {

    h1 {
        color: var(--hw-turquoise);
        line-height: normal;
        font-variant: all-small-caps;
    }

    h2 {
        color: var(--purple-dark);
        font-style: normal;
        line-height: normal;
    }
}

.section-6-btn {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
    background-color: var(--hw-turquoise);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;

    img {
        transition: transform .2s ease-in-out;
        will-change: transform;
        user-select: none;
        -webkit-user-drag: none;
    }

    &:hover {
        background-color: var(--color-orange);

        img {
            transform: rotate(45deg);
        }
    }
}

/* Section 7a*/
.section-7a {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-block: 9.375rem;
    position: relative;
    background-color: var(--bg-white);
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 1300px;
    margin: 0 auto;
    z-index: 3;
}

.section-7a-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 3.5rem;
    padding-inline: 5rem;

    h2 {
        color: var(--hw-black);
        line-height: normal;
        font-variant: all-small-caps;

        span {
            color: var(--hw-turquoise);
            font-weight: 500;
            line-height: normal;
            font-variant: all-small-caps;
            font-weight: bold;
        }
    }
}

.section-7a-desc {
    color: var(--hw-black);
    font-size: 2.25rem;
    font-weight: 300;
    line-height: normal;
}
.section-7a-desc .blue{
    color: #4990b9;
    font-weight: bold;
    margin-top: 15px;
}
.section-7a-line-wrapper {
    padding-inline: 6.875rem;
}

.section-7a-line {
    width: 100%;
    height: .125rem;
    background-color: var(--hw-turquoise);
}

.section-7a-trusted {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.section-7a-trusted-title {
    color: var(--hw-turquoise-background);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-inline: 6.875rem;
}

.section-7a-trusted-wrapper {
    display: flex;
    align-items: center;
    gap: 3.12rem;
    overflow-x: auto;
    position: relative;
}

.section-7a-trusted-item {
    padding: 1.5rem;
}

.section-7a-trusted-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}
/* Section 7*/
.section-7 {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    position: relative;
    background-color: var(--bg-white);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 3;
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
}

.section-7>div{
    position:relative;
    padding: 5rem 0;
    border-radius: 0 5rem 0 5rem;
    background-color: var(--bg-white);
    background-image: url('../img/mask2.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 3;
    max-width: 1300px;
    margin: 0 auto;
    overflow: hidden;
}

.section-7-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 3.5rem;
    padding-inline: 6.875rem;

    h2 {
        color: var(--hw-turquoise-background);
        line-height: normal;
        font-variant: all-small-caps;

        span {
            color: var(--hw-turquoise);
            text-shadow: 0 0 .3688rem var(--hw-turquoise);
            font-weight: 500;
            line-height: normal;
            font-variant: all-small-caps;
        }
    }
}

.section-7-desc {
    color: var(--hw-turquoise-background);
    font-size: 2.25rem;
    font-weight: 300;
    line-height: normal;
}

.section-7-line-wrapper {
    padding-inline: 6.875rem;
}

.section-7-line {
    width: 100%;
    height: .125rem;
    background-color: var(--hw-turquoise);
}

.section-7-trusted {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.section-7-trusted-title {
    color: var(--hw-turquoise-background);
    font-size: 2.75rem;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    padding-inline: 6.875rem;
}

.section-7-trusted-wrapper {
    display: flex;
    align-items: center;
    gap: 3.12rem;
    overflow-x: auto;
    position: relative;
}

.section-7-trusted-item {
    padding: 1.5rem;
}

.section-7-trusted-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}
.section-7-caruselle-gradient {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 39, 50, 1) 0%, transparent 10%, transparent 90%, rgba(0, 39, 50, 1) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Section 8 */
.section-8 {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-block: 0rm;
    background-color: var(--bg-white);
    max-width: 100%;
    margin: 0 auto;
    z-index: 3;
    position: inherit;
    max-width: 1300px;
    margin: 0 auto;
    padding: 3rem 0;
}

.section-8-video, .section-8-video > div {
    width: 100%;
    height: 45.6974rem;
}

/* Section 9 */
.section-9 {
    overflow: hidden; /* Kluczowe: strona nie będzie się rozciągać na boki */
    width: 100%;
    padding-top: 15px;
}

.section-9-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5625rem;
    padding-inline: 6.875rem; /* Twój oryginalny padding */
    transition: transform 0.5s ease-in-out; /* Czas przewinięcia 0.5s */
    will-change: transform;
}

.section-9-item {
    flex-shrink: 0;
    width: 33rem; /* Twoja szerokość */
    cursor: pointer;
    /* Usunięto transition scale */
}
.section-9-item {
    display: flex;
    width: 33rem;
    height: 26.625rem;
    padding: 3rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 1.5625rem;
    cursor: grab;

    &.black {
        background: var(--hw-black);

        .section-9-item-desc {
            color: var(--hw-turquoise-background);
        }
    }

    &.orange {
        background: var(--color-orange);

        .section-9-item-desc {
            color: var(--hw-turquoise-background);
        }
    }

    h4 {
        line-height: normal;
    }
}

.section-9-wrapper.s9-dragging,
.section-9-wrapper.s9-dragging * {
    cursor: grabbing !important;
}

.section-9-item-img img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Section 10 */
.section-10 {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 9.375rem 6.875rem;
    background-color: #f86100;
    z-index: 3;
    margin: 0 auto;
    position: inherit;

    h3 {
        color: var(--hw-black);
        line-height: normal;
    }

    h2 {
        color: var(--hw-turquoise-background);
        line-height: normal;
        font-variant: all-small-caps;
    }
}

.section-10-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 5rem;
}

.section-10-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.section-10-btn {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
    background-color: var(--hw-black);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;

    img {
        transition: transform .2s ease-in-out;
        will-change: transform;
        user-select: none;
        -webkit-user-drag: none;
    }

    &:hover {
        background-color: var(--hw-turquoise);

        img {
            transform: rotate(45deg);
        }
    }
}

/* Footer */
footer {
    background-color: var(--hw-turquoise);    
    z-index: 3;
    margin: 0 auto;
    position: inherit;
    border-top: 0px solid #0092BC;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    padding: 3rem;
    position: relative;
    background-color: #002732;
    background-image: url('../img/mask3.png');
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;

    h2 {
        font-size: 3.75rem;
        color: #FFF;
        line-height: normal;
    }
}

.footer-content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
/*    padding-inline: 6.875rem;*/
    padding-block: 8rem;

    img {
        user-select: none;
        -webkit-user-drag: none;
    }
}

.footer-content-data {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 370px;
    h4 {
        display: flex;
        align-items: center;
        gap: 1rem;
        line-height: normal;
    }
}

.footer-copyright {
    padding-inline: 0rem;
    color: var(--hw-turquoise-background);
    text-align: left;
    margin-bottom: 5px;
}

.footer-links {
    display: flex;
    justify-content: end;
    text-align: center;
    gap: 5.5rem;
    border-top: 2px solid var(--hw-turquoise);
    padding-block: 2.75rem 0;
    padding-inline: 6.875rem;
}

/* Utils */
h1 {
    font-size: 6rem;
    font-weight: 400;

    &.light {
        font-weight: 300;
    }

    &.bold {
        font-weight: 700;
    }
}

h2 {
    font-size: 3.2rem;
    font-weight: 400;

    &.light {
        font-weight: 300;
    }

    &.bold {
        font-weight: 700;
    }
}

h3 {
    font-size: 2.5rem;
    font-weight: 400;

    &.light {
        font-weight: 300;
    }

    &.bold {
        font-weight: 700;
    }
}

h4 {
    font-size: 1.3rem;
    font-weight: 400;

    &.light {
        font-weight: 300;
    }

    &.bold {
        font-weight: 700;
    }
}

/* Animations */
.animation-slidetop {
    animation: slideTop .5s ease-in-out;
}

@keyframes slideTop {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animation-slidebottom {
    animation: slideBottom .5s ease-in-out;
}

@keyframes slideBottom {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.section-3-caruselle-item.s3-fade-in {
    animation: s3FadeIn .5s ease both;
    will-change: opacity;
}

.section-3-caruselle-item.s3-fade-out {
    animation: s3FadeOut .5s ease both;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
}

.section-3-caruselle-item.shadow.s3-fade-out {
    width: auto;
}

@keyframes s3FadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes s3FadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Nav menu open state */
.nav-full.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hamburger buttons simple toggle (bez zmiany layoutu) */
.nav-hamburger .nav-close-btn {
    display: none;
}

.nav-hamburger.menu-open .nav-open-btn {
    display: none;
}

.nav-hamburger.menu-open .nav-close-btn {
    display: flex;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 50%;
    background: #1f2937;
    color: #ffffff;
    padding: 16px 20px;
    display: none;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

#cookie-banner .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

#cookie-banner p {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

#cookie-banner a {
    color: #93c5fd;
    text-decoration: underline;
}

#cookie-banner button {
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

#accept-cookies {
    background: #4990b9;
    color: #ffffff;
}

#reject-cookies {
    background: #374151;
    color: #ffffff;
}
.section-references {
    background-image: linear-gradient(to top right, #002833, #0090ba);
    margin: 0;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    padding: 4rem;
}
.section-cards-wrapper{
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: 370px;
    overflow: hidden;
    margin-bottom: 40px;
    max-width: 1300px;
}
.item{
    position: absolute;
    width: 260px;
    height: 369px;
    text-align: justify;
    background-color: #fff;
    transition:  0.5s;
    left: calc(50% - 128px);
    top: 0;
}
.item img{
    width: 100%;
}
.section-cards-wrapper .item {
    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease;
    will-change: transform, opacity;
}
#cards-next{
    position: absolute;
    right: 5px;
    bottom: 0;
    height: 100%;
    vertical-align: bottom;
    display: flex;
    align-items: end;
}
#cards-prev{
    position: absolute;
    left: 5px;
    bottom: 0;
    height: 100%;
    vertical-align: bottom;
    display: flex;
    align-items: end;
}
#cards-prev, #cards-next{
    color: #fff;
    background: none;
    border: none;
    font-size: xxx-large;
    font-family: monospace;
    font-weight: bold;
    opacity: 0.5;
    transition: opacity 0.5s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#cards-prev:hover,
#cards-next:hover{
    opacity: 1;
}
@media (max-width: 768px) {
    #cookie-banner .container {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.animation-slidetop,
.animation-slidebottom,
.animate-on-scroll {
    will-change: transform, opacity;
}
.content-container {
    display: grid;
/*    grid-template-columns: .2fr 1fr .2fr;*/
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1.125rem;
    width: 100%;
    max-width: 1300px;
}
.section-3-container{
      display: flex;
      gap: 20px; /* odstęp między kolumnami */
      flex-wrap: wrap; /* pozwala zawijać kolumny w widoku mobilnym */
    }

.section-3-column {
  flex: 1;
  min-width: 250px;
  padding: 20px;

}
.section-3-column img{
    width: 100%;
    max-width: 320px;
}
.section-3-column h3 {
  margin-bottom: 8px;
  font-size: 40px;
  color: #0092bc;
    font-weight: bold;
    
}
.section-3-column p {
  color: #002833;
  line-height: 1.5;
  font-size: 18px;
}
.section-2-content-data .section-2-menu-item-title{
    font-weight: bold !important;
    margin: 15px 0;
}
.section-11 {
    padding: 1rem;
}

.section-11 h1{
    color: #0092bc;
    font-size: 50px;
    margin: 50px auto;
}

.section-11 .boxes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1300px;
    margin: 0 auto;
}
.section-11 .boxes .box {
    position: relative;
    height: 350px;
    padding: 15px;
    border-radius: 0 0 16px 0;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    font-size: 18px;
}
.section-11 .boxes .box:nth-child(1) {
    background: linear-gradient(to top, #0092bc 0%, rgba(0, 146, 188, 0.6) 50%, rgba(0, 146, 188, 0) 70%), url(../img/section11/box_1.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.section-11 .boxes .box:nth-child(2) {
    background: linear-gradient(to top, #0092bc 0%, rgba(0, 146, 188, 0.6) 50%, rgba(0, 146, 188, 0) 70%), url(../img/section11/box_2.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.section-11 .boxes .box:nth-child(3) {
    background: linear-gradient(to top, #0092bc 0%, rgba(0, 146, 188, 0.6) 50%, rgba(0, 146, 188, 0) 70%), url(../img/section11/box_3.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.section-11 .boxes .box:nth-child(4) {
    background: linear-gradient(to top, #0092bc 0%, rgba(0, 146, 188, 0.6) 50%, rgba(0, 146, 188, 0) 70%), url(../img/section11/box_4.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.section-11 .boxes .box:nth-child(5) {
    background: linear-gradient(to top, #0092bc 0%, rgba(0, 146, 188, 0.6) 50%, rgba(0, 146, 188, 0) 70%), url(../img/section11/box_5.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.section-11 .boxes .box:nth-child(6) p {
    color: #002833;
}

.section-10-btn-phone {
    position: relative; /* Kluczowe dla pozycjonowania tooltipa */
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 6.25rem;
    color: var(--hw-gray-background);
    background-color: var(--hw-black);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: normal;
    transition: background-color .2s ease-in-out;
    cursor: pointer;
}

/* Style Tooltipa */
.phone-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 15px); /* Pojawia się nad przyciskiem */
    right: 0;
    background: white;
    padding: 20px;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center;
    min-width: 220px;
    z-index: 100;
    color: #000; /* Reset koloru tekstu na czarny */
}

/* Strzałka pod tooltipem */
.phone-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 40px;
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.phone-tooltip p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333;
}

.phone-num-text {
    font-weight: bold;
    font-size: 1.2rem !important;
    margin: 10px 0 !important;
}
#qrcode{
    font-size: 18px;
}
#qrcode img {
    margin: 0 auto;
    display: block;
}

#close-tooltip {
    background: var(--hw-black);
    border: none;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1.2rem;
    margin-top: 10px;
    transition: background 0.2s;
}

#close-tooltip:hover {
    background: #ff7900;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 35px;
    position: absolute;
    top: 20px;
    right: 0px;
    justify-content: flex-end;
}

.lang-switcher {
    display: flex;
    gap: 18px;
    margin-right: 70px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%; 
  border: 1px solid #0091b8; 
  color: #0091b8; 
  text-decoration: none;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.lang-btn.active, 
.lang-btn:hover {
  background-color: #0091b8;
  color: #ffffff;
}