<div class="carousel-filters">
    <div class="filters-container">
        <div class="filter lang-en" value="Popular">Popular</div>
        <div class="filter lang-de" value="Popular">Beliebt</div>
        <div class="filter lang-fr" value="Popular">Populaire</div>
        <div class="filter lang-jp" value="Popular">人気のコース</div>
        <div class="filter lang-en" value="Administration">Administration</div>
        <div class="filter lang-de" value="Administration">Verwaltung</div>
        <div class="filter lang-fr" value="Administration">Administration</div>
        <div class="filter lang-jp" value="Administration">管理者</div>
        <div class="filter lang-en" value="Products" >Products</div>
        <div class="filter lang-de" value="Products" >Produkte</div>
        <div class="filter lang-fr" value="Products" >Produits</div>
        <div class="filter lang-jp" value="Products" >プロダクト</div>
        <div class="filter lang-en" value="Features" >Features</div>
        <div class="filter lang-de" value="Features" >Funktionen</div>
        <div class="filter lang-fr" value="Features" >Fonctionnalités</div>
        <div class="filter lang-jp" value="Features" >機能</div>
    </div>
</div>

<style>
    .carousel-filters {
       background: #EDEDED;
       border-radius: 8px;
       padding: 24px 32px;
       margin-top: 30px;
       display: flex;
       justify-content: space-between;
    }

    .filters-container {
        display: flex;
        gap: 44px;
        width: 100%;
        align-items: center;
    }
    .filter {
        font-size: 18px;
        font-weight: 400;
        line-height: 27px;
        color: #0F2B46;
        text-decoration: underline;
        cursor: pointer;
        padding: 5px 10px;
    }
    .filter-dropdown-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: end;
        width: 100%;
        max-width: 290px;
    }

    .filter-dropdown-block {
        background-color: white;
        border: 1px solid #ccc;
        padding: 10px;
        cursor: pointer;
        user-select: none;
        max-width: 150px;
        width: 100%;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .filter-by-progress-dropdown {
        background-color: white;
        border: 1px solid #ccc;
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 40px;
    }

    .filter-by-progress-option {
        padding: 10px;
        cursor: pointer;
    }

    .filter-by-progress-option:hover {
        background-color: #f0f0f0;
    }

    .hidden {
        display: none;
    }

    .filter-active {
        color: #42A2FF;
    }
</style>
