<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #FF8500;
    }

    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        background-color: #FF8500;
        overflow-x: hidden;
    }

    .swiper {
        width: 100%;
        padding: 15px 0;
    }

    .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #FF8500;
        border: 2px solid transparent;
        border-radius: 10px;
        transition: transform 0.3s, border-color 0.3s;
        cursor: pointer;
        padding: 10px;
    }

    .swiper-slide:hover,
    .swiper-slide.active {
        transform: scale(1.1);
        border-color: #fff;
    }

    .swiper-slide img {
        max-width: 50px;
        margin-bottom: 10px;
    }

    .swiper-slide span {
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
    }

    .swiper-pagination-bullet {
        background: #fff !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #fff;
    }

    .content {
        display: none;
        padding: 20px;
    }

    .content.active {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .content ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center
    }

    .content li {
        width: 50%;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 15px;
        flex: 0 1 calc(50% - 20px);
        box-sizing: border-box;
        transition: transform 0.2s;
    }

    .content li:hover {
        transform: scale(1.05);
    }

    .content img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .content progress {
        width: 100%;
        margin-top: 5px;
    }
    
    @media (min-width: 1024px) {
        .content ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center
        }

        .content li {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 15px;
            flex: 0 1 calc(10% - 20px);
            box-sizing: border-box;
            transition: transform 0.2s;
        }

        .content li:hover {
            transform: scale(1.05);
        }

        .content img {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .content progress {
            width: 100%;
            margin-top: 5px;
        }

        .swiper-slide span {
            font-size: 15px;
            font-weight: bold;
            text-transform: uppercase;
            color: #fff;
        }

        .swiper-slide img {
            max-width: 50px;
            margin-bottom: 10px;
        }
    }
</style>

---------END CSS-------


---------START JS-------

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const swiper = new Swiper('.swiper', {
            loop: true,
            slidesPerView: 3,
            spaceBetween: 15,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                768: {
                    slidesPerView: 5,
                },
                1024: {
                    slidesPerView: 7,
                },
            },
        });

        const tabs = document.querySelectorAll('.swiper-slide');
        const contents = document.querySelectorAll('.content');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

                const targetId = tab.getAttribute('data-target');
                contents.forEach(content => {
                    content.classList.remove('active');
                });

                const targetContent = document.getElementById(targetId);
                if (targetContent) targetContent.classList.add('active');
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        var progressBars = document.getElementsByTagName('progress');
        for (var i = 0; i < progressBars.length; i++) {
            var randomValue = Math.floor(Math.random() * 101); // generates a random number between 0 and 100
            progressBars[i].value = randomValue;
            
            // Create a span to hold the percentage
            var percentageSpan = document.createElement('span');
            percentageSpan.innerHTML = randomValue + '%';
            
            // Append the percentageSpan after the progress bar
            progressBars[i].parentNode.insertBefore(percentageSpan, progressBars[i].nextSibling);
        }
    });
</script>

