body{
 background-color: #fff;   
    font-family: 'Noto Sans', sans-serif;
}

h1{
  font-size: 80px;
    color: #000;
    font-weight: 300;
    font-family: 'Noto Sans', sans-serif;
}

h2{
    color: #000;
    font-size: 60px;
    font-weight: 300;
    font-family: 'Noto Sans', sans-serif;
}

h3{
    font-family: 'Noto Sans', sans-serif;
    font-size: 30px;
}

h4{
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
}
h5{
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
}

p{
    color: #474747;
     font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

a{
    text-decoration: none;
    color: #002581;
    transition: all 0.3s;
}

a:hover{
    color: #000;
}
a:active{
    color: #000;
}

a > i{
    margin-left: 7px;
}

.nav-link{
    color: #000;
    font-weight: 600;
}

.nav-link:hover{
    color: #002581;
}

.slider{
    padding-top: 100px;
    background-image: url("../img/slider_bg_color.png");
    background-repeat: no-repeat;
    background-position: top right;
}

.slider-ob{
    position: relative;
}

.slider h1{
    margin-bottom: 30px;
}

.black-bg{
    background-color: #002581;
    padding: 20px;
    margin-top: -1px;
}

.black-bg h1{
    color: #D1D4D9;
    font-weight: 300;
    font-size: 20px;
}

.slid-r i{
    font-size: 60px;
    color: #002581;
    text-align: center;
    font-weight: 300;
    margin-top: 25px;
}

.sati{
    margin-top: 80px;
    margin-bottom: 80px;
}

.sati h2{
    margin-bottom: 30px;
}

.sati h3{
   font-weight: 700;
    font-size: 30px;
    color: #002581;
}

.kafel-oferta{
    margin-bottom: 40px;
    transition: all 0.3s
}

.kafel-oferta img{
    margin-bottom: 15px;
}

.kafel-oferta h4{
   font-size: 26px;
    font-weight: 600;
    color: #252525;
}

.kafel-oferta-img{
    position: relative;
}

.kafel-oferta-img i{
    color: #fff;
    background-color: #002581;
    padding: 10px;
    position: absolute;
    bottom: 15px;
    right: 0px;
}


.napisz{
       background-color: #002581;
}

.napisz h2{
    font-weight: 300;
    font-size: 60px;
    margin-top: 60px;
    margin-bottom: 30px;
    color: #fff;
}

.napisz h6{
    font-size: 80px;
    font-weight: 700;
    color: #fff;
}

.napisz h5{
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #fff;
}
.napisz p{
    color: #fff;
}

.napisz .btn-success{
  background-color: #fff;
    color: #002581;
    border-radius: 0px;
    border-color: #fff;
}

.btn-success{
  background-color: #002581;
    color: #fff;
    border-radius: 0px;
    border-color: #002581;
}

.btn-success:hover{
  background-color: #3A3A3A;
    color: #fff;
    border-color: #3A3A3A;
}

.btn-success:active{
  background-color: #000;
    color: #fff;
    border-color: #000;
}

.btn-success i{
    margin-left: 7px;
}

.napisz-r{
    position: relative;
}

#background-video{
     width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: -6px;
}

.partnerzy-loga{
    margin-bottom: 60px;
    margin-top: 60px;
}

.partnerzy-loga h2{
    margin-bottom: 30px;
}

.partnerzy-loga img{
    margin-bottom: 20px;
}

.ikony{
    border: 1px solid #BEC0C4;
    padding-left: 15px;
    
}

.btn-primary{
  background-color: #002581;
    border-color: #002581;
    border-radius: 0px;
}

.btn-primary:hover{
  background-color: #3A3A3A;
    border-color: #3A3A3A;
}
.btn-primary:active{
  background-color: #3A3A3A;
    border-color: #3A3A3A;
}

.btn-primary i{
    margin-left: 7px;
}

.ikony-box-bg{
  background-color: #D9DEE1;  
padding: 30px;
}

.fb-bg{
    background-image: url("../img/fb_bg.svg");
    background-repeat: no-repeat;
    background-position: 90% 80%;
}

.ikony-box{
    padding-top: 40px;
    margin-bottom: 30px;
}

.ikony-box img{
    margin-bottom: 15px;
}

.ikony-box h4{
    font-size: 20px;
    font-weight: 400;
}

.footer h2 > span{
   font-weight: 700; 
}

.footer{
    padding-top: 40px;
    margin-top: 60px;
    border-top: 1px solid #A5A5A5;
}

.footer img{
    float: right;
}

.footer-kontakt{
    margin-top: 60px;
}

.footer-kontakt button{
    margin-top: 15px;
}

.footer-kontakt ul{
    padding-left: 0px;
}

.footer-kontakt li{
    list-style-type: none;
    line-height: 1.8em;
}

.footer-kontakt li a{
    color: inherit;
    transition: all 0.3s;
}

.footer-kontakt li a:hover{
    color: #002581;
}

.footer-bottom{
    background-color: #fff;
    padding: 20px;
    
    margin-top: 40px;
}

.footer-bottom p{
    margin-bottom: 0px;
    font-size: 14px;
    color: #808080;
}

.footer-bottom a{
    color: inherit;
}

.footer-bottom a:hover{
    color: #002581;
}

.white-line{
    background-color: #fff;
    height: 10px;
    width: 100%;
}

 .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }



.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

.page{
    padding-top: 160px;
    background-image: url("../img/slider_bg.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.page h1{
    margin-bottom: 30px;
}

.kontakt-dane{
    margin-bottom: 20px;
}

.kontakt-dane h3{
   font-size: 30px;
    font-weight: 300;
    margin-bottom: 20px;
}

.kontakt-dane a{
    color: inherit;
}

.kontakt-dane a:hover{
    color: #002581;
}

.angebot{
    color: #fff;
    background-color: #002581;
    margin-left: 15px;
    transition: all 0.3s;
}

.angebot:hover{
    color: #fff;
    background-color: #333;
}
.nehmen-box{
    background-color: #fff;
    padding: 25px;
    margin-bottom: 25px;
}

.info-box{
    background-color: #002581;
    padding: 25px;
    margin-bottom: 25px;
}

.info-box h5{
    color: #fff;
    font-size: 48px;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-box p{
    color: #fff;
}

.info-box-linia {
    margin-top: 30px;
    margin-bottom: 20px;
    height: 1px;
    background-color: #34539f;
}

.nehmen-box i{
  color: #002581;
    font-size: 48px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.nehmen-box h4{
 font-size: 30px;
    font-weight: 300;
    color: #000;
}

.nehmen-box h5{
    font-size: 60px;
    color: #002581;
    font-weight: 700;
    margin-top: 100px;
}

.stat-box{
  background-color: #00ADB5;
    padding: 25px;
    margin-bottom: 25px;
}

.stat-box h4{
    color: #fff;
    font-size: 48px;
}

.stat-box p{
    color: #CFECEE;
}

.angebot-page{
    background-color: #fff;
    padding: 24px;
}

.angebot-page h5{
  font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.angebot-page h4{
    font-weight: 400;
    margin-bottom: 20px;
}

.angebot-page p{
    font-weight: 600;
    color: #000;
}

.form-check-input:checked {
    background-color: #002581;
    border-color: #002581;
}

.formularz-page .form-control{
    border-radius: 0px;
    background-color: #EAECEF;
    border-color: #EAECEF;
}

.formularz-page .form-control:hover{
    border-radius: 0px;
    background-color: #EAECEF;
    border-color: #00ADB5;
}

.stat-box-line{
    background-color: #A3E6E9;
    height: 1px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.formularz-page{
    margin-top: 30px;
}

.formularz-page button{
    margin-top: 20px;
}

.video video{
    margin-bottom: 25px;
}

.whatsapp{
    position: absolute;
    z-index: 9998;
    bottom: 20px;
    left: 20px;
    position: fixed;
}

.dop img{
        margin-bottom: 20px;
    }

.popup-gallery button{
    color: #002581;
    border: none;
    padding: 0px;
    background-color: transparent;
    transition: all 0.3s;
}

.popup-gallery button:hover{
    color: #000;
}
.punkty{
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 30px;
}

.punkty h2{
    margin-bottom: 60px;
}

.punkty img{
    margin-top: 30px;
}

.pkt-box{
    margin-bottom: 30px;
}

.pkt-box h3{
    color: #002581;
    font-size: 28px;
    margin-bottom: 15px;
}

.punkty i{
    font-size: 36px;
    margin-bottom: 16px;
    color: #002581;
    font-weight: 400;
}


.picture2 {
    display: none;
}
.thum:hover .picture1 {
    display: none;
    
}
.thum:hover .picture2 {
    display: block;
}

.formularz-top{
    margin-bottom: 30px;
}

#cookieinfo * {
    margin: 0px;
    padding: 0px;
}

#cookieinfo {
    position: fixed;
    font-size: 12px;
    font-family: 'Noto Sans', sans-serif;
    left: 15%;
    bottom: 0px;
    right: 15%;
    background-color: #002581;
    border: 2px solid #fff;;
    padding: 20px;
    z-index: 1000;
}

#cookieinfo h6 {
    font-size: 16px;
    font-weight: bold;
    color: #cdd7da;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
    margin-bottom: 7px;
}

#cookieinfo p {
    font-size: 12px;
    color: #fff;
    line-height: 1.5em;
}

#cookieinfo a {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    font-weight: 600;
    color: #002581;
    text-align: center;
    text-decoration: none;
    background-color: #ffc107;
}

#cookieinfo a:hover {
    background-color: #ff7925; 
}

.galeria{
    margin-bottom: 40px;
}

.galeria h4{
    margin-bottom: 20px;
}

.galeria h4 > span{
    text-transform: uppercase;
    font-weight: 700;
}

.galeria-line{
    height: 1px;
    width: 32.5%;
    background-color: #000;
    margin-bottom: 20px;
    margin-top: 15px;
}

.galeria img{
    margin-bottom: 20px;
}

.form-ac{
    background-color: #eecf32;
    padding-top: 64px;
    padding-bottom: 64px;
    margin-top: 40px;
}

.form-ac h3{
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}

.form-ac p{
    color: #000;
    font-size: 18px;
}

.btn-dark{
    border-radius: 0px;
}

.form-ac .btn-dark{
    margin-top: 10px;
}

.form-ac .btn-light{
    margin-top: 10px;
    border-radius: 0px;
}

.form-ac .form-control {
    background-color: #eecf32;
    border: 2px solid #fff !important;
    color: #000;
    font-size: 16px;
}
.form-ac .form-control::placeholder {
    color: #000;
}

  .square-checkbox .form-check-input[type="checkbox"] {
            width: 16px;
            height: 16px;
      border-radius: 0px;
        }

        .custom-control-label::before {
            border-radius: 0;
        }

        .form-control {
            border: 1px solid #C8C8C8;
            border-radius: 0;
            font-size: 16px;
        }

        .btn-custom {
            background-color: #00ADB5;
            border: none;
        }
.form-check-input{
       border: 1px solid #002581; 
}

.form-control:hover{
    border: 1px solid #002581;
    box-shadow: none;
}

.form-control:active{
    border: 1px solid #002581;
    box-shadow: none;
}
.form-control:focus{
    border: 1px solid #002581;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: #002581;
    border-color: #002581;
}

.form-ac a{
    display: inline-block;
}

.produkt-thumb{
    position: relative;
}

.koszyk-ikona{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #002581;
    border-top: 4px solid #E3E5E8;
    border-left: 4px solid #E3E5E8;
    color: #fff;
    padding: 4px 8px 4px 8px;
}

.produkt-box{
    margin-bottom: 32px;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 8px;
    transition: all 0.3s;
}
.produkt-box:hover{
    border-bottom: 1px solid #002581;
    transition: all 0.3s;
}


.produkt-box i{
    transition: all 0.3s;
}

.produkt-box p{
    font-size: 18px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 8px;
}

.produkt-box h6{
    color: #5f5f5f;
    font-size: 16px;
}

.sklep-lista h3{
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 32px;
}



.ilosc-lista{
    color: #002581;
}


.sklep-page h1{
    margin-bottom: 64px;
}

.produkt-box:hover i{
    font-size: 20px;
    padding-top: 4px;
}

.produkt-form{
    margin-bottom: 24px;
}

.produkt-form p{
    font-weight: 600;
    color: #000;
}

.produkt-form .form-check{
    background-color: #EBEBEB;
    display: inline-block;
    border-radius: 16px;
    padding: 4px 12px 4px 12px;
}

.produkt-form .form-check .form-check-input{
    margin-left: 0px;
    margin-right: 8px;
}

.produkt-form li{
    display: inline;
    margin-right: 8px;
}

.produkt-form ul{
    padding-left: 0px;
}

.produkt-form-lista{
    margin-top: 24px;
}

.produkt-form-lista .form-check{
    display: table;
    margin-bottom: 8px;
}

.form-select{
    border-radius: 8px;
    background-color: #E3E5E8;
    border: 1px solid #707070;
    padding-top: 8px;
    padding-bottom: 8px;
}

.produkt-title h2{
    font-size: 32px;
    font-weight: 600;
    color: #000;
    margin-bottom: 32px;
}

 /* Definicja animacji */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    /* Styl sekcji "dodatkowe-opcje" z animacją */
    .dodatkowe-opcje {
      animation-duration: 0.5s;
      animation-fill-mode: both;
      display: none;
    }

.termin{
   border-top: 1px solid #BEBEBE; 
    padding-top: 16px;
}

.termin p{
    font-weight: 600;
    color: #000;
}

.suma{
     border-top: 1px solid #BEBEBE; 
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: 24px;
}

.suma p{
    font-weight: 600;
    color: #000;
    margin-bottom: 40px;
}

.suma h3{
    font-size: 32px;
    font-weight: 600;
}

.produkt-title button{
   font-size: 20px; 
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
}

.tab-pane{
    padding-top: 24px;
}

.nav-tabs{
    border-bottom: 1px solid #BEBEBE;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #002581;
    background-color: #e3e5e8;
    border-color: #002581;
    border: none;
    border-bottom: 1px solid;
}

.category {
            border-bottom: 1px solid #ddd;
            margin-bottom: 16px;
    padding-bottom: 8px;
        }

        .category-title {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #474747;
    font-size: 16px;
            transition: all 0.3s;
        }

.category-title a{
    color: inherit;
}

.category-title:hover{
    color: #002581;
}

        .category-title i {
            margin-left: 10px;
            color: #002581;
            font-weight: 400;
        }

        .subcategory {
            display: none;
        }

        .subcategory.active {
            display: block;
        }

.subcategory a{
    color: inherit;
}
.subcategory a:hover{
    color: #002581;
}
.subcategory li{
    list-style-type: none;
}

.kategorie-mobilne button{
    width: 100%;
    text-align: left;
}

.color-picker {
            display: inline-flex;
            justify-content: space-between;
        }

        .color-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
            margin-right: 8px;
        }

        .color-option:hover {
            transform: scale(1.2);
        }


        .tooltip {
            position: absolute;
            background-color: #fff;
            color: #000;
            padding: 5px;
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            bottom: 100%; /* Umieść tooltip nad opcją koloru */
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .color-option:hover .tooltip {
            opacity: 1;
        }

.color-option.selected {
  border: 2px solid #002581; 
}

.color-option[data-color="#FF5733"] {
  background-color: #FF5733;
}

.color-option[data-color="#33FF57"] {
  background-color: #33FF57;
}

.color-option[data-color="#5733FF"] {
  background-color: #5733FF;
}

.color-option[data-color="#FFFF33"] {
  background-color: #FFFF33;
}

.color-option[data-color="#33FFFF"] {
  background-color: #33FFFF;
}

.color-option[data-color="#FF33FF"] {
  background-color: #FF33FF;
}

.info-tabs-zalety i{
    color: #002581;
}

.info-tabs-zalety li{
    line-height: 2em;
}

.info-tabs-zalety{
    margin-top: 24px;
}

.quantity-container {
            display: flex;
            align-items: center;
        }

        .quantity-label {
            flex: 1;
            text-align: left;
            padding-right: 10px;
        }

        .quantity-input {
            flex: 8;
            background-color: #E3E5E8;
            border-radius: 8px;
            border: 1px solid #707070;
            padding: 8px 16px 8px 16px;
            font-size: 16px;
        }
.table tbody tr:first-child td {
    padding-top: 20px; /* Ustawia odstęp na górze pierwszego wiersza <tbody> */
  }

.card{
    background-color: #E3E5E8;
    border-radius: 8px;
    border: 1px solid #707070;
}

.koszyk input{
    color: #474747;
    background-color: #E3E5E8;
    border-color: #BEBEBE;
    border-radius: 8px;
}

.koszyk td{
    padding-top: 24px;
}

.koszyk tbody, td, tfoot, th, thead, tr{
    border-color: #BEBEBE;
}

.card-body i:hover{
    color: #AA0808;
}

.zamowienie{
    border: 1px solid #707070;
    border-radius: 8px;
    background-color: #E3E5E8;
    padding: 24px;
}

.zamowienie h3{
    font-size: 24px;
    margin-bottom: 24px;
}

.lab-zamowienie{
    margin-bottom: 8px;
    border-bottom: 1px solid #BEBEBE;
}

.zamowienie button{
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 20px;
}

.zamowienie .smallinfo p{
    font-size: 11px;
    margin-bottom: 0px;
}

.dane-dostawy{
    border-radius: 8px;
    border: 1px solid #707070;
    background-color: #E3E5E8;
    padding: 16px;
    margin-bottom: 16px;
}

.dane-dostawy h4{
    font-weight: 600;
    color: #000;
    margin-bottom: 16px;
    font-size: 16px;
}

.dane-dostawy .form-floating{
    margin-bottom: 8px;
}

.dane-faktura{
    margin-top: 24px;
}

.faktura{
    margin-top: 16px;
    display: none;
}


@media (max-width: 425px){
/* @media (max-width: 464px){ */
    
    .slider h1 {
    margin-bottom: 30px;
    font-size: 48px;
}
    .slid-r i{
        display: none;
    }
    h2{
        font-size: 36px;
    }
    .sati {
    margin-bottom: 10px;
        margin-top: 30px;
}
    .sati button{
        margin-bottom: 15px;
    }
    
    .napisz {
    margin-top: 20px;
        padding: 20px;
}
    .napisz h2 {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}
    .napisz-r{
        margin-top: 30px;
    }
    .footer img{
        float: left;
    }
    
    .footer-kontakt .text-end{
        text-align: left!important;
    }
    
    .footer-kontakt ul{
        margin-top: 15px;
    }
    
    .fixed-top{
        background-color: #fff;
    }
    .angebot {
    margin-left: 0px;
    padding-left: 15px;
}
    .page h1{
       font-size: 40px;
    }
    
    .page{
        padding-top: 100px;
    }
    
    .dienstleistungen .sati{
        margin-top: 20px;
    }
    
    .muster p{
        margin-bottom: 25px;
        margin-top: 7px;
    }
    
    .dop img{
        margin-bottom: 20px;
    }
    
    .kontakt-box{
        margin-bottom: 20px;
    }
    
    .angebot-page form{
        margin-bottom: 40px;
    }
    
    .punkty{
        background: none;
        padding-top: 0px;
        padding-bottom: 10px;
    }
    
    .punkty img{
        margin-top: 10px;
    }
    
    .footer-bottom .text-end{
        text-align: left !important;
    }
        
}


@media (max-width: 991px) {
        .fixed-top {
                background-color: #fff;
            }
}

@media (max-width: 1440px){
    .napisz {
    padding-bottom: 30px;
}
    .muster p{
        margin-top: 7px;
        margin-bottom: 15px;
    }
    
}

@media (min-width: 1600px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1440px;}
}