@media (max-width: 768px) {
   .footer-content,
    .footer-wrapper h2,
    .footer-copyright,
    .footer-links {
        padding-inline: 1rem;
    }

    .footer-links {
        flex-direction: column;
        align-items: flex-end;
        gap: .5rem;
    }
    .footer-wrapper{
        padding: 3rem 0rem;
    }
    h1{
        font-size:  2.2rem !important;
    }
    h2{
        font-size:  2.1rem !important;
    }
    h3{
        font-size:  2.0rem !important;
    }
    .section-7a-wrapper{
        font-size: 1.8rem !important;
        line-height: 1.5 !important;
    }
    .section-7a-wrapper h2{
        font-size: 3rem !important;
        line-height: 80% !important;
    }
}

@media (max-width: 1024px) {
    
    .section-1 {
        padding: 7em 5rem;
    }
}
@media (min-width: 1023px) {
   .hero-text {
        font-size: 6rem !important;
        max-width: 1300px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

}
/* Responsywność i animacja */
@media (max-width: 768px) {
    .section-9-wrapper {
        padding-inline: 2rem;
    }
    .section-9-item {
        width: 80vw; /* Na mobile boxy są responsywne */
    }
}

@media (max-width: 550px) {
    #mobile-logo{
        margin: 0 0 !important;
    }
    .lang-switcher {
        display: flex;
        gap: 5px;
        margin-right: 56px;
    }
    .header-item img {
        height: 75%;
    }
}
@media (max-width: 768px) {
    #cookie-banner{
        width: 100%;
    }
    .header-item.left {
        display: none;
    }
    .section-1 {
        padding: 2.5rem 1rem;
    }
    .section-1-wrapper .section-1-text{
        font-size: 2rem;
    }
    .section-1-wrapper .light{
        font-size: 1.9rem;
    }
    .section-2{       
        background-position: 50%;
    }
    .section-2>div {
        padding: 2.5rem 1.5rem 3.5rem;
    }
    .section-2-content-data-img{
        justify-items: center;
    }
    .section-2-menu{
        display: none;
    }
    .section-2 h2 {
        font-size: 2rem;
        text-shadow: var(--hw-turquoise) 2px 0 10px;
    }
    .section-2-menu {
        padding: 0 !important;
    }
    .section-2-menu-item{
        padding: 1rem 0;
        border-bottom: 1px solid #fff;
    }
    .section-2-content-data-title{
        padding: 1.2rem 0;
    }
    .section-2-menu-item-title{
        font-size: 2rem;
        color: var(--text-white) !important;
        font-weight: 300 !important;
    }
    .section-2-content-data-desc {
        font-size: 1.5rem;
        font-weight: 200;
        line-height: 1.75rem;
        color: var(--hw-turquoise-background);
        line-height: 130%;
    }
    .section-2-container {
        display: block;
    }
    .section-2-menu-item-title.active+.section-2-menu-item-img {
        transform: rotate(0deg) !important;
    }
    /* ukryj fake scroll */
    .section-2-fake-scroll {
        display: none;
    }

    /* menu przestaje być klikalne */
    .section-2-menu-item {
        pointer-events: none;
        margin-bottom: 1.5rem;
    }

    .section-2-menu-item-img {
        display: flex !important;
    }

    /* pokaż wszystkie kontenty w jednej kolumnie */
    .section-2-content {
        display: block;
        padding-left: 0;
    }

    .section-2-content-data {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 2rem;
    }
    .circle.start{
        width: 17rem;
        height: 17rem;
    }
    .section-3{
        padding: 2.5rem 1.5rem;
        border-radius: 0 5rem 0 0;
        background-position: 50%;
    }
    .section-3 h1{
        font-size: 3rem;
    }
    .section-3 h3{
        font-size: 2.6rem;
    }
    .section-3-caruselle-item-number{
        font-size: 6.75rem;
    }
    .section-3-caruselle-item-img.image-1 {
        padding-top: 1rem;
    }
    .section-3-caruselle-item-img.image-1 img {
        max-width: 60%;
        height: auto;
        object-fit: cover;
        max-width: 100px;
        position: absolute;
        left: 180px;
    }
    .section-3-caruselle-item-img.image-2 {
        padding-top: 1.5rem;
    }
    .section-3-caruselle-item-img.image-2 img {
        height: auto;
        object-fit: cover;
        max-width: 82px;
        position: absolute;
        left: 180px;
    }
    .section-3-caruselle-item-img.image-3 {
        padding-top:1rem;
    }
    .section-3-caruselle-item-img.image-3 img {
        max-width: 60%;
        height: auto;
        object-fit: cover;
        max-width: 71px;
        position: absolute;
        left: 200px;
    }
    .section-5 {
        display: flex;
        z-index: 3;
        flex-direction: column;
        gap: 2rem;
        padding-block: 2rem;
        border-radius: 0 0 0 0rem;
        position: relative;
        background-color: var(--bg-white);
        background-image: url(../img/mask2.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .section-5-btn, .section-bloc-btn{
        font-size: 1.4rem;
    }
    .section-5-btn-wrapper {
        padding-inline: 1rem;
    }
    .section-5-wrapper{
        display: block;
        padding: 0 1rem;
    }
    .section-5-thebloc img {
        max-width: 250px;
        
    }
    .section-5 h3, .section-5 h4{
        padding-inline:1rem 2rem;
    }
    .section-5-map{
        width: 100%;
    }
    
    .section-6 h1{
        line-height: 100%;
        margin-bottom: 3rem;
    }
    .section-6-caruselle{
        flex-direction: column;        
    }
    .section-6-caruselle-item{
        width: 100%;
    }
    .section-6-caruselle-gradient{
        display: none;
    }
    .section-6-title span {
        font-size: 2.1rem;
        text-align: center;
        flex-direction: column;
    }
    .section-6-content {      
        padding-inline: 2.5rem;
    }
    .section-6-title img{
        object-fit: contain;
        width: 76%;
    }
    .section-6-title span div{
        justify-content: center;
    }
    .section-6-btn, .section-2-btn{
        font-size: 1.4rem;
    }
    .section-2-btn{
        margin-top: 0px !important;
    }
    .section-7a {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding-block: 3rem;
        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 {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
        h2 {
            line-height: 100%;    
        }
    }
    .section-7-trusted-title{
        padding-inline: 3rem;
    }
    .section-8 {
        margin: 1rem auto;
    }
    .section-8-video, .section-8-video > div {
        width: 100%;
        height: 70vw;
    }
    .section-9-item {
        display: flex;
        width: 90%;
        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;
        margin: 24px auto;
    }
    .s9-track{
        display: block !important;
    }
    .section-9-wrapper{
        padding-inline: 0.5rem
    }
    .section-10-title{
            margin-bottom: 2rem !important;
    }
    .section-10-title h2{
        line-height: 100%;
        margin-top: 25px;
    }
    .section-10{
        padding: 3rem 1rem 3rem 1rem;
        gap: 2.2rem;
    }
    .section-10-actions {
        flex-direction: column;
    }
    .section-10-btn{
            width: 250px;
            align-self: flex-end;
    }
    .footer-content {   
        padding-block: 1rem;
    }
    .section-3-column{
         flex-direction: column; 
    }
    .section-2>div{
        gap: 0;
    }
    .section-11 .boxes {
        grid-template-columns: 1fr;
    }

    .section-11 .box {
        height: 220px;
    }    
    .mobile{
        visibility: visible;
    }
    .section-references{
        padding: 0 0 15px 0;
    }
    .section-references h2{
        font-size: 3.2rem;
        font-weight: 400;
        line-height: 1.2;
        padding: 2rem;
    }
    .section-11 .boxes .box:nth-child(6) {
        height: 200px !important;
        padding: 15px 0 25px;
    }
    .header-item {
        justify-content: space-between;
        max-height: 60px;
    }
    .section-3 h3{
        font-size: 3.5rem !important;
        line-height: 80% !important;
    }
    .section-3-column p {
        font-size: 1.6rem;
        margin: 0 auto;
    }
}

@media (max-width: 370px) {
    h1{
        font-size:  2rem !important;
    }
    h2{
        font-size:  1.8rem !important;
    }
    h3{
        font-size:  1.6rem !important;
    }
     .section-7a-wrapper{
        font-size: 1.6rem !important;
        line-height: 1.5 !important;
    }
    .section-7a-wrapper h2{
        font-size: 2rem !important;
        line-height: 80% !important;
    }
    
    .section-1-wrapper .section-1-text{
        font-size: 1.8rem;
    }
    .section-1-wrapper .light{
        font-size: 1.7rem;
    }
    .section-2 h2 {
        font-size: 1.8rem;
    }
    .section-11 img{
        width: 289px;
    }
    .section-1-wrapper img{
        width: 100%;
    }
    .section-7a-desc{
        font-size: 1.4rem;
    }
     .section-7a-wrapper h2 {
        font-size: 2.3rem !important;
     }
}