body {
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    background: var(--Body-primary-Background);
}

*:focus {
    outline: none;
}

ul {
    padding: 0;
    margin: 0px;
}

a {
    text-decoration: none;
    color: inherit;
}

main {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background: var(--Body-primary-Background);
}

@media screen and (max-width: 1080px) {
    .main-header {
        padding: var(--spacing-05-rem) var(--spacing-125-rem) !important;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);


        .topnav .navbtn,
        .dropdown .dropbtn {
            display: none;
        }

        .topnav a.icon {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 24px;
            font-family: 'Material Icons' !important;
            color: var(--nav-def) !important;

            &:hover {
                color: var(--nav-btn-hover) !important;
            }

            &:active {
                color: var(--nav-btn-active) !important;
            }

            &:disabled {
                color: var(--nav-btn-dis);
            }
        }

        .topnav.responsive {
            position: absolute;
            width: 100%;
            left: 0;
            height: auto;
            z-index: 9999;
            overflow: visible;

            a.icon {
                position: fixed;
                z-index: 999;
                right: 20px;
                top: 8px;
            }

            .navbtn {
                float: none;
                display: block;
                text-align: left;
            }

            .link-container {
                justify-content: flex-start;
                flex-grow: 1;
                position: relative;
                top: 56px;
                background-color: white;
                padding-left: 8px !important;
                overflow: hidden;
                border-radius: 0px 0px 16px 16px;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
            }

            .dropdown {
                float: none;

                a {
                    margin-left: 16px;
                }

                .dropbtn {
                    display: block;
                    width: 100%;
                    text-align: left;

                    i {
                        position: absolute;
                        margin-left: 8px;
                    }
                }

                .dropdown-content {
                    position: relative;
                }
            }
        }
    }

    .main-footer {
        padding: var(--spacing-125-rem) var(--spacing-125-rem) !important;

    }

    .hero-img,
    .about-img {
        position: relative;
        width: 100% !important;
        min-height: 400px;
        overflow: hidden;

        picture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        img,
        source {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 400px;
        }

        .img-desktop {
            display: none;
        }

        .img-mobile {
            display: none;
        }

    }

    .home {
        .hero-section {
            flex-direction: column !important;
            align-items: center;
            align-self: stretch;

            .hero-text-container {
                padding: 32px 20px 20px 20px !important;
                max-width: none !important;
            }

            .hero-list {
                max-width: unset;
                align-self: flex-start;
            }

        }

        .content-section {
            padding: var(--spacing-2-rem) var(--spacing-125-rem) !important;

            .about-image {
                width: 100%;
                height: 280px !important;
            }

            header {
                text-align: left;
            }
        }

        .about-section {
            flex-direction: column;
            align-items: center;
            align-self: stretch;

            .about-text-container {
                padding: 32px 20px 4px !important;
                max-width: none !important;
            }

            .about-img {
                height: var(--height-20-rem);
            }

            .img-desktop {
                display: none;
            }

            .img-mobile {
                display: block;
                height: auto;
            }
        }

        .clients-logo-section {
            padding: 32px 20px 32px !important;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-15-rem);
            align-self: stretch;

            .clients-container {
                flex-direction: column;
                /* Ustawienie elementów w pionie */
                align-items: center;
                /* Wyśrodkowanie elementów */
                justify-content: center;
                /* Wyśrodkowanie względem osi Y */
                min-width: auto;
                /* Dostosowanie szerokości */
                /* height: 100vh; */
                /* Pełna wysokość ekranu */
            }
        }
    }

    .about {
        .hero-section {
            flex-direction: column;
            align-items: center;
            align-self: stretch;

            .hero-text-container {
                padding: 32px 20px 8px !important;
                max-width: none !important;
            }
        }

        .info-section {
            padding: var(--spacing-2-rem) var(--spacing-125-rem) !important;
        }

        .img-mobile {
            display: flex !important;
            justify-content: center;
            align-items: center;

            img {
                height: 256px;

            }
        }

        .img-desktop {
            display: none !important;
            width: 322px;
            align-items: flex-end;
            align-self: stretch;

        }
    }

    .product-offer,
    .oferta-dzienprofilaktyki {
        .hero-section {
            flex-direction: column;
            align-items: center;
            align-self: stretch;

            .hero-text-container {
                margin-left: 0px !important;
                padding: 32px 20px 8px !important;
                max-width: none !important;
            }

            .hero-img {
                height: var(--height-20-rem);
            }

            .img-desktop {
                display: none;
            }

            .img-mobile {
                display: block;
                height: auto;
            }
        }

        .products-section {
            display: flex !important;
            padding: var(--spacing-2-rem) var(--spacing-125-rem) !important;
            min-width: 0;

            .products-list {
                display: flex !important;
                min-width: 0;

            }

            .product-card {
                display: flex !important;
                min-width: 0;
            }
        }
    }

    .contact {
        .hero-section {
            flex-direction: column;
            align-items: center;
            align-self: stretch;


            .hero-text-container {
                margin-left: 0px !important;
                padding: 32px 20px 8px !important;
                max-width: none !important;
            }


        }

        .contact-section {
            padding: var(--spacing-2-rem) var(--spacing-125-rem) !important;

            .contact-container {
                flex-direction: column;
                gap: var(--spacing-1-rem) !important;
                align-self: auto;

                .contact-card {
                    padding: 0px !important;
                    position: static !important;

                    a {
                        &:hover {
                            color: var(--btn-primary-hover) !important;
                        }

                        &:focus {
                            color: var(--btn-primary-focus) !important;
                        }

                        &:active {
                            color: var(--btn-primary-active);
                        }

                        &:disabled {
                            color: var(--btn-primary-disabled);
                        }
                    }
                }

                .main-contact {
                    display: flex;
                    min-width: auto !important;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-1-rem);
                    flex: 1 0 0;
                    align-self: stretch;

                    div {
                        gap: 0px !important;
                        flex-direction: column !important;
                    }

                    .style-input {
                        width: auto !important;
                    }



                    .rodo-consent {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .mobile-contact-section {
        display: flex !important;
        align-items: flex-start;
        align-content: flex-start;
        gap: var(--spacing-1-rem);

        align-self: stretch;
        flex-wrap: wrap;

        img {
            border-radius: 16px;
            width: 100%;
            height: 226.5px;
            min-width: 320px;
            object-fit: cover;
            object-position: center !important;
            flex: 1 0 0;
        }

        .contact-card {
            min-width: 320px;
            flex: 1 0 0;
        }
    }

    .desktop-contact-section {
        display: none !important;
    }

    .badge {
        letter-spacing: 0.05em;
        font-size: 14px;
    }

    .desktop-break {
        display: none;
    }
}

.main-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    padding: var(--spacing-05-rem) var(--spacing-5-rem);
    background: var(--nav-Background);
    z-index: 1000;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);


    .navbtn,
    .dropbtn {
        display: inline-flex;
        float: left;
        padding: var(--spacing-075-rem) var(--spacing-1-rem);
        justify-content: center;
        align-items: center;
        gap: var(--spacing-05-rem);
        color: var(--Nav-def);
        text-decoration: none;
        font: 400 16px/24px Poppins;
        letter-spacing: -0.09px;

        &:hover,
        &:focus,
        &:active {
            .material-icons {
                transition: transform 0.3s ease;
                transform: rotate(180deg);
            }
        }

        &:hover {
            color: var(--nav-btn-hover);

            .material-icons {
                color: var(--nav-btn-hover);
            }
        }

        &:focus {
            color: var(--nav-btn-focus);

            .material-icons {
                color: var(--nav-btn-focus);
            }
        }

        &:active {
            color: var(--nav-btn-active);

            .material-icons {
                color: var(--nav-btn-active);
            }
        }

        &:disabled {
            color: var(--nav-btn-dis);

            .material-icons {
                color: var(--nav-btn-dis);
            }
        }
    }

    .active {
        color: var(--nav-btn-active);
        font-weight: 600;
        letter-spacing: 0, 1px
    }


    .menu-container {
        display: flex;
        max-width: 1280px;
        justify-content: space-between;
        flex: 1 0 0;

        .header-logo {
            display: flex;

            a {
                width: 199.048px;
                height: var(--height-3-rem);
            }
        }
    }

    .topnav {
        overflow: hidden;
        float: right;

        .icon {
            display: none;
        }

        .dropdown {
            float: left;
            overflow: hidden;

            .dropdown-content {
                display: none;
                position: absolute;
                min-width: 160px;
                z-index: 1;
                background: var(--nav-Background);
                border-radius: 0px 0px 16px 16px;


                .navbtn {
                    float: none;
                    display: block;
                    text-align: left;
                }
            }

            #dropbtn {
                display: block;
            }
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropbtn {
            float: none !important;
        }
    }
}

.main-footer {
    display: flex;
    padding: var(--spacing-15-rem) var(--spacing-5-rem) var(--spacing-075-rem) var(--spacing-5-rem);
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    background: var(--Body-secondary-Background);

    .footer-container {
        display: flex;
        width: 100%;
        max-width: 1280px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2-rem);


        .footer-nav {
            display: flex;
            min-width: var(--Width-20-rem);
            justify-content: space-between;
            align-items: flex-start;
            align-content: flex-start;
            align-self: stretch;
            flex-wrap: wrap;

            .nav-container {
                display: flex;
                align-items: flex-start;
                align-content: flex-start;
                gap: 24px 0px;
                flex: 1 0 0;
                flex-wrap: wrap;

                .nav {
                    display: flex;
                    min-width: 224px;
                    max-width: 225px;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-05-rem);


                    ul {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--spacing-05-rem);
                        align-self: stretch;

                        li {
                            display: flex;
                            align-items: flex-start;
                            gap: var(--spacing-1-rem);
                            align-self: stretch;

                        }

                        a {
                            text-decoration: none;
                            color: var(--Text-Body-primary);
                        }

                        a:hover {
                            color: var(--Link-hover);
                        }

                        a:focus {
                            color: var(--Link-focus);
                        }

                        a:active {
                            color: var(--Link-active);

                        }

                        a:disabled {
                            color: var(--Link-dis);
                        }
                    }
                }


            }

            .footer-address {
                display: flex;
                min-width: var(--spacing-8-rem);
                max-width: var(--spacing-6-rem);
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-05-rem);
            }
        }
    }


    .info {
        display: flex;
        max-width: 1280px;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        row-gap: 10px;
        align-self: stretch;
        flex-wrap: wrap;


        span {
            /* color: red; */
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.3px;
        }
    }
}

.home {
    .hero-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        overflow: hidden;
        background: var(--Body-secondary-Background);

        .hero-text-container {
            display: flex;
            margin-left: auto;
            max-width: 640px;
            padding: var(--spacing-3-rem) 0px var(--spacing-4-rem) var(--spacing-5-rem);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-15-rem, 24px);
            flex: 1 0 0;

            .text-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }

            .btn-container {
                display: flex;
                padding-bottom: 1px;
                align-items: center;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }

            .hero-list {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;

                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-075-rem);
                    align-self: stretch;
                    /* margin: 0px; */
                    padding-left: 0px;

                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: var(--spacing-1-rem, 8px);
                        align-self: stretch;

                        .fiber-size {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 18px;
                        }
                    }
                }
            }

        }

        .hero-img {
            position: relative;
            width: 50%;
            min-height: 400px;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: auto;
                object-fit: cover;
            }
        }
    }

    .content-section {
        display: flex;
        padding: var(--spacing-4-rem) var(--spacing-5-rem);
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-2-rem, 32px);
        align-self: stretch;

        header {
            text-align: left !important;
        }

        .cards-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            align-content: flex-start;
            gap: var(--spacing-1-rem);
            flex-wrap: wrap;
            align-items: stretch;
            max-width: 1280px;




            .card-link {
                display: flex;
                flex-direction: column;
                min-width: 240px;
                /* max-width: 290px; */
                height: auto;
                padding: var(--spacing-1-rem);
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                flex: 1 0 0;
                padding: var(--spacing-075-rem);

                border-radius: 16px;

                /* Shadow/Small */
                box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);

                &:hover {
                    /* Shadow/Large */
                    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
                    transform: scale(1.05)
                }

                &:focus {
                    /* Shadow/Large */
                    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
                    transform: scale(1.05)
                }

                .card-body {
                    display: flex;
                    padding: var(--spacing-05-rem, 12px) 0px;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-025-rem, 4px);
                    flex: 1 0 0;
                    align-self: stretch;

                    .body {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--spacing-075-rem);
                        align-self: stretch;
                    }
                }

                .card-img {
                    display: flex;

                    justify-content: center;
                    align-items: center;

                    img {
                        width: 80px;
                    }

                }
            }
        }
    }

    .about-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        overflow: hidden;
        background: var(--Body-secondary-Background);

        .about-text-container {
            display: flex;
            margin-left: auto;
            max-width: 640px;
            padding: var(--spacing-3-rem) 0px var(--spacing-4-rem) var(--spacing-5-rem);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-15-rem, 24px);
            flex: 1 0 0;

            .about-text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;

            }

            .btn-container {
                display: flex;
                padding-bottom: 1px;
                align-items: center;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }

        }

        .about-img {
            position: relative;
            width: 50%;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: auto;
                object-fit: cover;
            }
        }
    }

    .clients-logo-section {
        display: none;
        padding: var(--spacing-4-rem, 64px) var(--spacing-5-rem);
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-15-rem, 24px);
        align-self: stretch;

        .clients-container {
            display: flex;
            min-width: 544px;
            justify-content: center;
            align-items: flex-start;
            align-content: flex-start;
            gap: var(--spacing-2-rem);
            align-self: stretch;
            flex-wrap: wrap;

            .clients {
                display: flex;
                width: 180px;
                max-width: 180px;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                gap: var(--spacing-05-rem);

                .logo {
                    width: 84px;
                    height: var(--spacing-6-rem);
                }
            }
        }
    }
}

.about {
    .hero-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        overflow: hidden;
        background: var(--Body-secondary-Background);

        .hero-text-container {
            display: flex;
            margin-left: auto;
            max-width: 640px;
            padding: var(--spacing-3-rem) 0px var(--spacing-4-rem) var(--spacing-5-rem);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-15-rem, 24px);
            flex: 1 0 0;

            .text-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;

            }

            .btn-container {
                display: flex;
                padding-bottom: 1px;
                align-items: center;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }

            .hero-list {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;

                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-075-rem);
                    align-self: stretch;
                    padding-left: 0px;

                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: var(--spacing-1-rem, 8px);
                        align-self: stretch;
                        height: auto;

                        .fiber-size {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: 18px;
                        }
                    }
                }
            }

        }

        .hero-img {
            position: relative;
            width: 50%;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: auto;
                object-fit: cover;
            }
        }
    }

    .info-section {
        display: flex;
        padding: var(--spacing-4-rem, 64px) var(--spacing-5-rem);

        .info-container {
            display: flex;
            max-width: 1280px;
            align-items: center;
            flex: 1 0 0;

            .article-container {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-15-rem, 24px);
                flex: 1 0 0;

                header {
                    align-self: stretch;
                }

                .list-info {
                    margin-left: 0px;

                    ul {
                        display: flex;
                        align-items: flex-start;
                        align-content: flex-start;
                        gap: var(--spacing-075-rem);
                        align-self: stretch;
                        flex-wrap: wrap;
                        padding-left: 0px;


                        li {
                            display: flex;
                            height: 24px;
                            min-width: 319px;
                            justify-content: left;
                            align-items: flex-start;
                            align-content: flex-start;
                            gap: 8px var(--spacing-05-rem);
                            flex: 1 0 0;
                            min-height: 24px;
                            height: auto;
                            line-height: 1.4;

                            .fiber-size {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: 16px;
                            }
                        }
                    }
                }

                footer {
                    align-self: stretch;
                }
            }

            .img-mobile {
                display: none;
                width: 100%;
                margin: 0 auto;
            }

            .img-desktop {
                display: flex;
                width: 322px;
                align-items: flex-end;
                align-self: stretch;

                img {
                    width: 340px;
                    height: 340px;
                    flex-shrink: 0;
                }
            }
        }
    }
}

.contact {
    .hero-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        overflow: hidden;
        background: var(--Body-secondary-Background);

        .hero-text-container {
            display: flex;
            margin-left: auto;
            max-width: 640px;
            padding: var(--spacing-3-rem) 0px var(--spacing-4-rem) var(--spacing-5-rem);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-15-rem, 24px);
            flex: 1 0 0;

            .text-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }
        }

        .hero-img {
            position: relative;
            width: 50%;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: auto;
                object-fit: cover;
            }
        }
    }

    .contact-section {
        display: flex;
        padding: var(--spacing-3-rem, 48px) var(--spacing-5-rem) var(--spacing-4-rem, 64px) var(--spacing-5-rem);
        flex-direction: column;
        align-items: center;


        .contact-container {
            display: flex;
            width: 100%;
            max-width: 1280px;
            justify-content: center;
            align-items: flex-start;
            gap: var(--spacing-5-rem);
            align-self: stretch;

            .contact-card {
                display: flex;
                min-width: 328px;
                max-width: 412px;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                box-shadow: none;
                padding-left: 0px;

                a {
                    display: flex;
                    align-items: flex-start;
                    gap: var(--spacing-1-rem);
                    align-self: stretch;
                    color: #000000;


                    &:hover {
                        color: var(--Link-hover);
                    }

                    &:focus {
                        color: var(--Link-focus);
                    }

                    &:active {
                        color: var(--Link-active);
                    }

                    &:disabled {
                        color: var(--link-dis);
                    }
                }

                .address {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-05-rem);
                    align-self: stretch;


                    #home-address {
                        display: flex;
                        align-items: flex-start;
                        gap: var(--spacing-1-rem);
                        align-self: stretch;
                    }

                }

            }

            .main-contact {
                display: flex;
                min-width: 480px;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                flex: 1 0 0;
                align-self: stretch;

                div {
                    display: flex;
                    align-items: flex-start;
                    gap: var(--spacing-15-rem, 24px);
                    align-self: stretch;
                }

                .style-input {
                    font-family: Poppins;
                    display: flex;
                    width: 100%;
                    height: var(--spacing-3-rem, 48px);
                    padding-left: var(--spacing-075-rem);
                    align-items: center;
                    gap: var(--spacing-05-rem);
                    align-self: stretch;
                    border: none;
                    box-shadow: inset 0 0 0 1px var(--text-field-def, #000);
                    border-radius: var(--spacing-1-rem);
                    margin-bottom: 16px;
                    outline: none;
                    align-self: stretch;
                    background-color: var(--Body-primary-Background);

                    &:hover {
                        box-shadow: inset 0 0 0 1px var(--text-field-hover, #00BB29);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:focus {
                        box-shadow: inset 0 0 0 2px var(--text-field-hover, #00BB29);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:invalid {
                        box-shadow: inset 0 0 0 2px var(--text-field-error, #BB2901);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:invalid:focus {
                        box-shadow: inset 0 0 0 2px var(--text-field-error, #BB2901);
                        border-radius: var(--spacing-1-rem);
                    }
                }

                textarea {
                    font-family: Poppins;
                    display: flex;
                    width: 100%;
                    height: var(--spacing-6-rem, 96px);
                    padding: var(--spacing-075-rem);
                    align-items: center;
                    align-self: stretch;
                    border: none;
                    box-shadow: inset 0 0 0 1px var(--text-field-def, #000);
                    border-radius: var(--spacing-1-rem);
                    outline: none;
                    margin-bottom: 16px;
                    box-sizing: border-box;
                    background-color: var(--Body-primary-Background);

                    &:hover {
                        box-shadow: inset 0 0 0 1px var(--text-field-hover, #00BB29);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:focus {
                        box-shadow: inset 0 0 0 2px var(--text-field-hover, #00BB29);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:invalid {
                        box-shadow: inset 0 0 0 2px var(--text-field-error, #BB2901);
                        border-radius: var(--spacing-1-rem);
                    }

                    &:invalid:focus {
                        box-shadow: inset 0 0 0 2px var(--text-field-error, #BB2901);
                        border-radius: var(--spacing-1-rem);
                    }
                }

                .rodo-consent {
                    display: flex;
                    align-items: flex-start;
                    gap: var(--spacing-1-rem);
                    align-self: stretch;
                    margin-bottom: 16px;



                    input[type="checkbox"] {
                        box-sizing: initial;
                        width: var(--spacing-15-rem, 24px);
                        height: var(--spacing-15-rem, 24px);
                        flex-shrink: 0;
                        border-radius: var(--spacing-025-rem, 4px);
                        border: 2px solid var(--Checkboxes-def, #000);
                        background: transparent;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        position: relative;
                        transition: all 0.2s ease;

                        &:hover {
                            border-radius: var(--spacing-025-rem, 4px);
                            border: 2px solid var(--Checkboxes-hover);
                        }

                        &:focus {
                            border-radius: var(--spacing-025-rem, 4px);
                            border: 2px solid var(--Checkboxes-hover);
                        }

                        &:focus {
                            border-radius: var(--spacing-025-rem, 4px);
                            border: 2px solid var(--Checkboxes-hover);
                        }


                        &:disabled {
                            border-radius: var(--spacing-025-rem, 4px);
                            border: 2px solid var(--Checkboxes-dis);
                        }

                        &:checked {
                            border: 2px solid var(--Checkboxes-hover);
                            background: var(--Checkboxes-hover);
                        }

                        &:checked:after {
                            content: 'check';
                            font-family: 'Material Icons';
                            font-size: 18px;
                            color: var(--icons-color-primary);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        &:checked:hover {
                            background: #009C22;
                        }

                        &:not(:checked):after {
                            content: '';
                        }

                        &:not(:checked) {
                            background: transparent;
                            border: 2px solid var(--Checkboxes-def, #000);
                        }
                    }

                    &:checked:disabled {
                        background: var(--Checkboxes-dis);
                        background: var(--icon-color-dis-primary);
                    }
                }
            }
        }
    }
}

.product-offer,
.oferta-dzienprofilaktyki {
    .hero-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        overflow: hidden;
        background: var(--Body-secondary-Background);

        .hero-text-container {
            display: flex;
            margin-left: auto;
            max-width: 640px;
            padding: var(--spacing-3-rem) 0px var(--spacing-4-rem) var(--spacing-5-rem);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-15-rem, 24px);
            flex: 1 0 0;

            .text-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: var(--spacing-1-rem);
                align-self: stretch;
            }
        }

        .hero-img {
            position: relative;
            width: 50%;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: auto;
                object-fit: cover;
            }
        }
    }


    .products-section {
        display: flex;
        padding: var(--spacing-4-rem, 64px) var(--spacing-5-rem);
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-2-rem, 32px);

        .products-container {
            display: flex;
            max-width: 1280px;
            justify-content: center;
            align-items: flex-start;
            align-self: stretch;
            gap: var(--spacing-5-rem);

            .products-list {
                display: flex;
                padding: var(--spacing-1-rem) 0px;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-15-rem, 24px);
                flex: 1 0 0;

                #compact-pading {
                    padding-top: var(--spacing-15-rem);
                }

                .product-card {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--spacing-1-rem);
                    align-self: stretch;

                    li {
                        align-items: flex-start;
                        gap: 4px;
                        align-self: stretch;
                    }

                    ol {
                        margin: 0px;
                    }

                    .product-header {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--spacing-1-rem);
                        align-self: stretch;

                        ul {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            gap: var(--spacing-05-rem);
                            align-self: stretch;

                            li {
                                display: flex;
                                align-items: flex-start;
                                gap: 4px;
                                align-self: stretch;

                                .fiber-size {
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    font-size: 16px;
                                }
                            }
                        }
                    }

                    .product-description {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: var(--spacing-1-rem);
                        align-self: stretch;
                    }

                    .product-details {
                        display: flex;
                        align-items: center;
                        align-content: center;
                        gap: 16px;
                        align-self: stretch;
                        flex-wrap: wrap;
                    }

                    #product-list-keeds {
                        margin-bottom: 0px;
                        padding-left: 20px;
                    }

                    #product-list-teacher {
                        margin-bottom: 0px;
                        padding-left: 20px;
                        display: flex;
                        align-items: flex-start;
                        align-content: flex-start;
                        gap: 0px var(--spacing-2-rem);
                        align-self: stretch;
                        flex-wrap: wrap;

                        li {
                            align-items: flex-start;
                            gap: 4px;
                            align-self: stretch;
                        }
                    }
                }
            }
        }
    }

    #parents-title {
        font-size: 32px;
    }

    #title-reducer {
        font-size: 22px;
    }
}



.desktop-contact-section {
    display: flex;
    max-width: 408px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1-rem);
    flex: 1 0 0;
    align-self: stretch;
    top: var(--spacing-5-rem);
    position: sticky;
    height: 100%;

    img {
        object-fit: cover;
        object-position: top;
        height: var(--spacing-24-rem);
        align-self: stretch;
        border-radius: var(--spacing-1-rem);
    }
}

.mobile-contact-section {
    display: none;
}

.contact-card {
    display: flex;
    padding: var(--spacing-1-rem);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1-rem);
    align-self: stretch;
    top: var(--spacing-5-rem);
    position: sticky;
    border-radius: 16px;


    /* Shadow/Small */
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);

    .address-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-05-rem);
        align-self: stretch;

        .home-address {
            width: 24px;
            height: 48px;
            gap: 10px;
        }


        a {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-1-rem);
            align-self: stretch;
            color: var(--Text-Body-secondary, #000);


            &:hover {
                color: var(--nav-btn-hover);
            }

            &:focus {
                color: var(--nav-btn-focus);
            }

            &:active {
                color: var(--Nav-btn-active);
            }

            &:disabled {
                color: var(--Nav-btn-disabled);
            }
        }


    }


}


button {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    font-size: 100%;
    white-space: nowrap;
}

.btn {
    display: flex;
    height: var(--spacing-3-rem, 48px);
    min-width: var(--spacing-10-rem, 160px);
    padding: var(--spacing-075-rem) var(--spacing-1-rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-05-rem);
    border-radius: var(--spacing-15-rem, 24px);
    background-color: var(--btn-primary-def);
    color: var(--btn-primary-text);
    white-space: nowrap;

    border: none;
    box-shadow: none;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;

    &:hover {
        background-color: var(--btn-primary-hover);
        color: var(--text-interactive);

    }

    &:focus {
        background-color: var(--btn-primary-focus);
    }

    &:active {
        background-color: var(--btn-primary-active);
        color: var(--text-interactive);

    }

    &:disabled {
        background-color: var(--btn-primary-disabled);
    }
}

.badge {
    display: flex;
    min-width: var(--width-8-rem);
    padding: var(--spacing-075-rem) var(--spacing-1-rem);
    justify-content: center;
    align-items: center;
    border-radius: var(--spacing-15-rem, 24px);
    background: var(--Color-Secondary-100, #DBD4F4);
    color: var(--Text-Body-tertiary);
}

.btn-secondary {
    color: var(--btn-secondary-def, #00BB29);
    background: none;
    border: 2px solid var(--btn-sec-out-def);

    &:hover {
        color: var(--btn-secondary-hover, #009C22);
        background: none;
        border: 2px solid var(--btn-sec-out-hov);
    }

    &:focus {
        color: var(--btn-secondary-focus, #009C22);
        background: none;
        border: 2px solid var(--btn-sec-out-foc) !important;
    }

    &:active {
        color: var(--btn-secondary-outline-active #007D1B);
        background: none;
        border: 2px solid var(--Butto--btn-sec-out-act);
    }

    &:disabled {
        color: var(--btn-secondary-text);
        background: none;
        border: 2px solid var(--btn-secondary-dis);
    }
}

.desktop-break {
    display: block;
}

h1 {
    /* Regular/Regular-H01 */
    font-size: 57px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    /* 112.281% */
    letter-spacing: -1.14px;
    color: var(--Text-Headline-primary);

    &.medium {
        /* Medium/Medium-H02 */
        font-weight: 500;
    }

    &.semibold {
        /* Semi Bold/Semibold-H01 */
        font-weight: 600;
    }

    &.bold {
        /* Bold/Display/Display 1 */
        font-weight: 700;

        line-height: 64px;
    }
}

h2 {
    /* Regular/Regular-H02 */
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -0.96px;
    color: var(--Text-Headline-primary);

    &.medium {
        /* Medium/Medium-H02 */
        font-weight: 500;
    }

    &.semibold {
        /* Semi Bold/Semibold-H03 */
        font-weight: 600;
        /* 120% */
        letter-spacing: -0.4px;
    }

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

h3 {
    margin: 0px;
    /* Regular/Regular-H03 */
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    /* 120% */
    letter-spacing: -0.4px;
    color: var(--Text-Headline-primary);

    &.medium {
        /* Medium/Medium-H03 */
        font-weight: 500;
        letter-spacing: -0.4px;
    }

    &.semibold {
        /* Semi Bold/Semibold-H03 */
        font-weight: 600;
        letter-spacing: -0.4px;
    }

    &.bold {
        /* Bold/Display/Display 3 */
        font-weight: 700;
        letter-spacing: -0.4px;
    }
}

h4 {
    /* Regular/Regular-H04 */
    font-family: Poppins;
    font-size: 33px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    margin: 0px;

    /* 121.212% */

    &.medium {
        font-weight: 500;
    }

    &.semibold {
        font-weight: 600;
    }

    &.bold {
        font-weight: 700;
    }

}

h4.title-reducer {
    font-size: 32px;
}

h5 {

    /* Regular/Regular-H05 */
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    /* 121.429% */
    letter-spacing: 0.14px;
    margin: 0px;

    &.medium {
        font-weight: 500;
    }

    &.semibold {
        font-weight: 600;
        letter-spacing: 0.14px;
    }

    &.bold {
        font-weight: 700;
        letter-spacing: 0.14px;
    }
}

h6 {
    /* Regular/Regular-H06 */
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.115px;
    margin: 0px;


    &.medium {
        font-weight: 500;
    }

    &.semibold {
        font-weight: 600;
    }

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

h6.title-reducer {
    font-size: 22px;
}

p {
    /* Regular/Body/Body 1 */
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--Text-Body-primary, #FFFFFF);
    margin: 0px;

    &.medium {
        font-weight: 500;
    }

    &.semibold {
        font-weight: 600;
    }

    &.bold {
        font-weight: 700;
    }


    &.text-color-secondary {
        color: var(--Text-Body-secondary);
    }

    &.text-color-tertiar {
        color: var(--Text-Body-tertiary, #2900BD);
    }
}

p.title-reducer {
    font-size: 15px;
}

.p2 {
    /* Regular/Body/Body 2 */
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 153.846% */
    letter-spacing: 0.5px;

    &.medium {
        font-weight: 500;
    }

    &.semibold {
        font-weight: 600;
    }

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


.hr {
    width: 100%;
    margin: 1rem 0;
    margin: 0px;
}



.material-icons {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    width: var(--spacing-15-rem, 24px);
    height: var(--spacing-15-rem, 24px) !important;
    /* color: var(--icons-color-primary, #000000); */


    &#icons-color-secondary {
        color: var(--icons-color-secondary, #00BB29);
    }

    &#icons-color-tertiary {
        color: var(--icons-color-tertiary, #FFFFFF);
    }
}

.header-color-primary {
    color: var(--Text-Header-primary, #00BB29);
}

.header-color-secondary {
    color: var(--text-header-secondary, #000);
}