@import url("font/stylesheet.css");
.lp {margin: 0 auto;padding: 0;width: 100%;font-family: 'Montserrat', sans-serif;font-size:16px;background: #4A5561;color:#000}
.lp a{text-decoration: none;color:#fff;}
.lp a:hover{text-decoration: none;color:#fff;}
.lp .text-box{margin-bottom: 30px;}
.lp .section-white{background-color:#fff;padding:30px;color:#000}
.lp .section-dark{background-color:#0d0d0d;padding:30px;color:#fff}

.lp .cta-box{cursor: pointer;font-size: 18px; font-weight: 400; z-index:9;position: relative; color:#fff;text-decoration: none;padding:15px 10px;text-transform:uppercase;width:100%;margin-top:-5px;background: #000}
.lp .cta-box:hover{background: #666666; color:#fff;text-decoration: none}
.lp .social-bg{background: url(img/dane_bg.png) no-repeat center center;  background-size: contain;min-height: 400px;height: 400px}
.lp .cta-kup{cursor: pointer;font-size: 18px; font-weight: 400; color:#fff;text-decoration: none;padding:10px 20px;text-transform:uppercase;background: #4d7ebc;display:block}
.lp .cta-kup:hover{background: #4A5561; color:#fff;text-decoration: none}
.lp .cta-kup-white{cursor: pointer;font-size: 18px; font-weight: 400; color:#000;text-decoration: none;padding:10px 20px;text-transform:uppercase;background: #fff}
.lp .cta-kup-white:hover{background: #666666; color:#fff;text-decoration: none}
/* Sekcja: Korzyści tego rozwiązania */

.korzysci-box{
    max-width:500px;
    width:100%;
    text-align:left;
}

.korzysci-box .d-flex{
    align-items:flex-start;
}

.korzysci-box strong{
    display:block;
    margin-bottom:4px;
}

.korzysci-box .yes{
    width:32px;
    flex-shrink:0;
    text-align:center;
    margin-top:2px;
}
#bg-wrap {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    color: white;
    isolation: isolate; /* osobny kontekst warstw – tło nie wychodzi nad treść */
}

.background-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* animacja jako tło */
    overflow: hidden;
    pointer-events: none; /* tło nie blokuje kliknięć */
}

.background-svg svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

#bg-wrap .section1 {
    position: relative;
    z-index: 2; /* treść nad animowanym tłem */
    text-align: center;
    margin: 0;
    padding:0;
}

/* Elementy dekoracyjne należą do tła, więc nie mogą przykrywać treści */
.lp .bgr-desktop{position: absolute;margin-left:75%;margin-top:-3%;z-index: 1;pointer-events:none}
.lp .bgl-desktop{position: absolute;margin-left:0;margin-top:2%;z-index: 1;pointer-events:none}
.lp .bgc-desktop{position: absolute;margin-left: 45%;margin-top: 35%;z-index: 1;pointer-events:none}

/* Wszystkie bezpośrednie sekcje LP w #bg-wrap są nad tłem */
#bg-wrap > *:not(.background-svg):not(.bgr-desktop):not(.bgl-desktop):not(.bgc-desktop) {
    position: relative;
    z-index: 0;
}

/* Interaktywne elementy zawsze nad tłem */
#bg-wrap a,
#bg-wrap p,
#bg-wrap button,
#bg-wrap .cta-box,
#bg-wrap .cta-kup,
#bg-wrap .cta-kup-white,
#bg-wrap img,
#bg-wrap picture,
#bg-wrap video,
#bg-wrap table {
    position: relative;
    z-index: 99999;
}
.lp .yes{color:#77b4ff;font-size: 30px}
.lp .no{color:#d2d9e0;font-size: 24px}
.lp .tabelka-m{
        width: 100%;
        border-collapse: collapse;}
    .lp .tabelka-m th, .tabelka-m td {
        padding: 10px;
        border: 1px solid #fff;
        font-weight: 400;
    }

    .tabelka {
        border: 1px solid #fff;
        width: 100%;
        border-collapse: collapse;
    }
    
    .tabelka th, .tabelka td {
        padding: 10px;
        border: 1px solid #fff;
        font-weight: 400;
    }

    .tabelka thead {
        color: white;
    }

    .tabelka img {
        max-width: 100%;
        height: auto;
    }

    /* Responsywność */
    @media (max-width: 768px) {
        .tabelka, .tabelka thead, .tabelka tbody, .tabelka th, .tabelka td, .tabelka tr {
            display: block;
            width: 100%;
        }

        .tabelka thead {
            display: none;
        }

        .tabelka tr {
            margin-bottom: 15px;
        }

        .tabelka td {
            padding-left: 50%;
            position: relative;
        }

        .tabelka td.first:before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            width: calc(50% - 20px);
            padding-right: 10px;
            text-align: left;
            white-space: nowrap;
        }
            .tabelka td:before {
        content: "";
        position: absolute;
        left: 10px;
        width: 300px; /* Adjust the size */
        height: auto;/* Adjust the size */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
    }

    .tabelka td[data-label="sportbm x R-GOLCLUB logo"]:before {
        background-image: url('img/logo_s_r.svg');
        padding:10px;
        display: block;
        background-size: contain;
    }

    .tabelka td[data-label="R-GOLCLUB logo"]:before {
        background-image: url('img/logo_r.svg');
        padding:10px;
        display: block;
        background-size: contain;
    }

    .tabelka td[data-label="sportbm logo"]:before {
        background-image: url('img/logo_sport.svg');
        padding:10px;
        display: block;
        background-size: contain;
    }

    /* Przewijanie tabeli */
    .table-responsive {
        overflow-x: auto;
        background-size: contain;
    }

}

@media all and (max-width: 768px){.lp .mobile{display: block; visibility:visible;}
.lp .desktop{display: none;visibility: hidden;}.lp h1{font-family: 'Heathergreen', sans-serif;font-size: 3rem;text-transform: uppercase;padding-top:0;letter-spacing: 2px;}
.lp h2{font-family:'Heathergreen', sans-serif;font-size: 2rem;padding-top:0;color:#fff;letter-spacing: 2px;text-transform: uppercase;}}
@media (min-width: 768px){.lp .mobile{display: none; visibility:hidden;}
.lp .desktop{display: block;visibility: visible;}.lp h1{font-family: 'Heathergreen', sans-serif;font-size: 3rem;text-transform: uppercase;padding-top:0;letter-spacing: 2px;}
.lp h2{font-family:'Heathergreen', sans-serif;font-size: 2rem;padding-top:0;color:#fff;letter-spacing: 2px;text-transform: uppercase;}}
@media (min-width: 992px){.lp .mobile{display: none;visibility:hidden;}
.lp .desktop{display: block;visibility: visible;}.lp h1{font-family: 'Heathergreen', sans-serif;font-size: 3rem;text-transform: uppercase;padding-top:0;letter-spacing: 2px;}
.lp h2{font-family:'Heathergreen', sans-serif;font-size: 2rem;padding-top:0;color:#fff;letter-spacing: 2px;text-transform: uppercase;}}
@media (min-width: 1200px){.lp .mobile{display: none;visibility:hidden;}
.lp .desktop{display: block;visibility: visible;}.lp h1{font-family: 'Heathergreen', sans-serif;font-size: 4rem;text-transform: uppercase;padding-top:0;letter-spacing: 2px;}
.lp h2{font-family:'Heathergreen', sans-serif;font-size: 2rem;padding-top:0;color:#fff;letter-spacing: 2px;text-transform: uppercase;}}