.additional-content {
    display: none; /* Ukryte elementy bez klasy active */

}

.additional-content.active {
    display: block; /* Pokaż aktywny element */

}


.additional-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    margin: 0px 30px 30px 0px;
    padding-left: 60px;
}

.additional-box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 25px;
}



.additional-box button {
    margin-top: 20px;
}


.banner-image img {
    display: none;
}

.banner-image img.active {
    display: block;
}



/* Kontener banera */
.ctn-banner {   
    display: flex;
    justify-content: center; /* Wyśrodkowanie całego kontenera */
    align-items: center;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    position: relative;
    margin-top: -10px; /* Zmniejszenie odstępu od góry banera */
}





.ctn-banner .desktop-images {
    display: block;
}

.ctn-banner .mobile-images {
    display: none;
}

@media screen and (max-width: 992px) {
    .ctn-banner .desktop-images {
        display: none;
    }
    .ctn-banner .mobile-images {
        display: block;
    }
}



.banner-content {
    width: 40%; /* Set width to 50% */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


.banner-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;

}




.title-banner {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 5px;
}

.title-banner-dewalt{
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 15px;
}

.subtitle-banner {
    font-size: 24px;
    color: #f0b300;
    margin-bottom: 10px;
}

.subtitle-banner-neilsen{
    color: rgb(210,47,52);
    font-weight: bold;
    font-size: 32px;
}

.promotion-period {
    font-size: 14px;
    margin-bottom: 15px;
}

.list-banner {
    list-style-type: circle;
    padding-left: 20px;
   
    font-size: 14px;
}

.list-banner li {
    margin-bottom: 5px;
}




.btn-banner-neilsen {
    background: linear-gradient(to left, #e43e3e 0%, #b92f2f 100%);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    margin-bottom: 10px;
}

.btn-banner-neilsen:hover {
    background: linear-gradient(to left, #ff5c5c 0%, #d33d3d 100%); /* Jaśniejszy gradient na hover */
}




.terms {
    font-size: 12px;
    color: #ccc;
}

.terms a {
    color: #f0b300;
    text-decoration: none;
}



.banner-image {
    width: 60% !important; /* Set width to 50% */
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


.banner-image img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: left; /* Align image to the left */
}

/**************** banner */
 /* Stylizacja dla dolnego paska */

 .bottom-banner {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(54, 54, 54, 1) !important; /* Stałe tło o wartości RGB */
    color: rgba(255, 255, 255, 1); /* Kolor biały */
    z-index: 1; /* Upewnij się, że pasek jest na odpowiedniej warstwie */
}

.bottom-banner ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}

.bottom-banner ul li {
    position: relative; /* Potrzebne do pozycjonowania trójkąta */
    padding: 10px 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: capitalize;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.bottom-banner ul li:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

.bottom-banner ul li.active {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

/* Stylizacja dla aktywnego elementu z trójkątem */
.bottom-banner ul li.active::after {
    content: "";
    position: absolute;
    top: -20px; /* Zmieniono pozycjonowanie, aby trójkąt był wyżej */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* Zwiększenie szerokości trójkąta */
    border-right: 20px solid transparent; /* Zwiększenie szerokości trójkąta */
    border-bottom: 20px solid rgba(54, 54, 54, 1); /* Kolor tła trójkąta */
    z-index: 2; /* Trójkąt nad bottom-banner */
}


.dewalt-logo {
    margin-bottom: 15px; /* Ustawienie marginesu między logo a przyciskiem */
    max-width: 100%;
    height: auto;

}






.btn-banner-dewalt {
    background: linear-gradient(to right, #d8a93a 0%, #b6760a 100%);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    margin-bottom: 10px;
}

.btn-banner-dewalt:hover {
    background: linear-gradient(to right, #b6760a 0%, #d8a93a 100%);
}


.btn-banner-sata{
    background-color: rgba(0, 115, 83, 1);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    margin-bottom: 10px;
}


.btn-banner-sata:hover {
    background-color: rgba(0, 150, 100, 1); /* Jaśniejszy odcień zieleni */
}


.title-banner-delivery {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 0px;
}


.subtitle-banner-delivery {
    font-size: 2rem;
    color: #e30613;
    margin-bottom: 5px;
}

.promotion-period-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important; /* Biały z 80% przezroczystością */
    margin-top: 20px;
}

.btn-banner-delivery {
    background: linear-gradient(to right, #0d3c55, #00b894); /* Gradient od ciemnego niebieskiego do zielonego */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    margin: 20px 0;
}

.btn-banner-delivery:hover {
    background: linear-gradient(to right, #00709d, #00e7bf);
}

.promotion-notes {
    font-size: 0.7rem;
    color: #aaaaaa;
    margin-top: 10px;
}

.btn-banner-unia{
    background-color: rgba(2, 102, 168, 1);
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    color: white;
}

.btn-banner-reviews{
    background-color: rgba(249, 155, 14, 1);
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-block;
    margin-top: 20px;
    color: white;
    
}


@media screen and (max-width: 1600px) {
    .ctn-banner {
        height: 450px; /* Zmniejszenie wysokości kontenera */
    }


}






@media screen and (max-width: 1400px) {
    .banner-content {
        padding: 15px; /* Dostosowanie paddingu w zależności od potrzeby */
    }

    .title-banner {
        font-size: 40px; /* Zmniejszenie rozmiaru tytułu */
    }

    .subtitle-banner {
        font-size: 30px; /* Zmniejszenie rozmiaru podtytułu */
    }

    .list-banner {
        font-size: 12px; /* Dostosowanie rozmiaru czcionki w liście */
    }

    .btn-banner {
        padding: 8px 16px; /* Zmniejszenie przycisku */
        font-size: 12px; /* Dostosowanie rozmiaru czcionki w przycisku */
    }
    
    .terms {
        font-size: 10px; /* Zmniejszenie rozmiaru czcionki w regulaminie */
    }

    .banner-image {
        width: 60% !important; /* Dostosowanie szerokości obrazu */
    }

    
    .bottom-banner ul li {
        font-size: 10px; /* Zmniejszenie rozmiaru czcionki w dolnym pasku */
    }
}





@media screen and (max-width: 1250px) {

    
    .banner-content {
        padding: 15px;
      }
    
    .banner-image {
        width: 50% !important; /* Dostosowanie szerokości obrazu */
    }

    .banner-content {
        width: 50%; /* Set width to 50% */
    }
    


}



@media screen and (max-width: 992px) {
    .ctn-banner {
        flex-direction: column; /* Zmiana układu na kolumnowy */
        height: auto;
    }

    .banner-content {
        width: 100%; /* Ustawienie szerokości na 100% dla treści */
        padding: 20px; /* Dostosowanie paddingu */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }


    .banner-image {
        width: 100% !important; /* Ustawienie szerokości obrazu na 100% */
        height: auto; /* Automatyczna wysokość */
        justify-content: center;
    }
    
 


    .title-banner {
        font-size: 28px; /* Dostosowanie rozmiaru tytułu */
    }

    .subtitle-banner {
        font-size: 20px; /* Dostosowanie rozmiaru podtytułu */
    }

    .btn-banner {
        padding: 10px 20px; /* Dostosowanie rozmiaru przycisku */
        font-size: 14px;
    }

    .bottom-banner ul li {
        font-size: 12px; /* Zmniejszenie czcionki dla mniejszych ekranów */
    }
}


@media screen and (max-width: 992px) {
  

    .ctn-banner{
        margin-top: 20px;
    }

    .banner-content {
        width: 100%; /* Ustawienie szerokości na 100% */
        padding-left: 20px; /* Opcjonalnie: Dodaj padding od lewej, jeśli potrzebne */
        text-align: left; /* Wyrównanie tekstu do lewej */
    }


    .banner-box {
        display: block;
    }

    .additional-content {
        margin-left: 0; /* Ustaw marginesy na zero, aby było przy lewej */
        text-align: left; /* Tekst wyrównany do lewej */
    }

    .bottom-banner ul {
        justify-content: center; /* Wyśrodkowanie listy */
    }

    .bottom-banner ul li {
        display: none; /* Ukryj wszystkie elementy */
    }

    .bottom-banner ul li.active {
        display: block; /* Wyświetl tylko element z klasą active */
    }
}




/* Dostosowanie na tablety (768px - 992px) */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .banner-image img {
        width: 100%;
        height: auto; /* Automatyczna wysokość, aby obraz nie był za duży */
        object-fit: cover; /* Zapewnia wypełnienie kontenera */
        object-position: top; /* Wyśrodkowanie obrazu */
        max-height: 400px; /* Ograniczenie wysokości obrazu */
    }
}

/* Dostosowanie na urządzenia mobilne (do 768px) */
@media screen and (max-width: 768px) {
    .banner-image img {
        width: 100%;
        height: auto; /* Automatyczna wysokość, aby obraz nie był za duży */
        object-fit: cover; /* Wypełnienie kontenera */
        object-position: top; /* Wyśrodkowanie obrazu */
        max-height: 350px; /* Ograniczenie wysokości obrazu */
    }

    .additional-box {
        padding-left: 0px; 
    }

}


/* Dostosowanie na urządzenia mobilne (do 768px) */
@media screen and (max-width: 650px) {
    .banner-image img {
        max-height: 300px; /* Ograniczenie wysokości obrazu */
    }  

}


/* Dostosowanie na urządzenia mobilne (do 768px) */
@media screen and (max-width: 450px) {
  
    
    .title-banner {
        font-size: 24px; /* Zmniejszenie rozmiaru tytułu */
    }

    .subtitle-banner {
        font-size: 18px;
      }

      .promotion-period {
        font-size: 12px;
      }

}





/* Dostosowanie na urządzenia mobilne (do 768px) */
@media screen and (max-width: 350px) {
  
    
    .title-banner {
        font-size: 22px; /* Zmniejszenie rozmiaru tytułu */
    }

}





/* Dla ekranów poniżej 992px */
@media screen and (max-width: 992px) {
    .title-banner-dewalt, .title-banner-delivery, .title-banner {
        font-size: 36px; /* Zmniejszamy tytuł dla średnich ekranów */
    }

    .subtitle-banner-delivery, .subtitle-banner {
        font-size: 1.8rem; /* Zmniejszamy podtytuł dla średnich ekranów */
    }

    .dewalt-logo {
        max-width: 80%; /* Zmniejszamy logo o 20% dla ekranów poniżej 992px */
    }
}

/* Dla ekranów poniżej 768px */
@media screen and (max-width: 768px) {
    .title-banner-dewalt, .title-banner-delivery, .title-banner {
        font-size: 28px; /* Jeszcze mniejszy tytuł dla małych ekranów */
    }

    .subtitle-banner-delivery, .subtitle-banner {
        font-size: 1.5rem; /* Zmniejszamy podtytuł dla małych ekranów */
    }

    .dewalt-logo {
        max-width: 70% !important; /* Zmniejszamy logo o 30% dla ekranów poniżej 768px */
    }
}