/*
	Theme Name:	Xtra Child
	Theme URI:	https://www.rtl-theme.com/xtra-corporate-woocommerce-theme/
	Description:Sample child theme of Xtra theme for customization.
	Author:		Xtra Theme
	Author URI:	http://xtratheme.ir
	Template:	xtra
	Version:	1.0.0
*/


.beban-categories {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
}
.beban-category-card {
    /*flex: 1 1 calc(12% - 15px);*/
    /*max-width: calc(12.7% - 15px);*/
    height: 155px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
}

.beban-category-card-image img {
    border-radius: 50%;
}

.beban-category-card-title {
    margin-top: 10px;
    font-size: 12px;
    color: #333;
}

.hidden {
    display: none;
}

@media (max-width: 950px) {
    .beban-categories {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
    }

    .beban-category-card {
        flex: 0 0 calc(100% / 4); 
        max-width: calc(100% / 4);
    }

    .beban-categories::-webkit-scrollbar {
        height: 8px;
    }

    .beban-categories::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .beban-categories::-webkit-scrollbar-track {
        background-color: #f9f9f9;
    }
}

@media (max-width: 950px) {
    .beban-categories {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
    }

    .beban-category-card {
        flex: 0 0 calc(100% / 4);
        max-width: calc(100% / 4);
    }

    .beban-categories::-webkit-scrollbar {
        height: 8px;
    }

    .beban-categories::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .beban-categories::-webkit-scrollbar-track {
        background-color: #f9f9f9;
    }
}


@media (max-width: 768px) {

    .beban-category-card {
        flex: 0 0 calc(100% / 4);
        max-width: calc(100% / 4);
    }
}

@media (max-width: 768px) {

    .beban-category-card {
        flex: 0 0 calc(100% / 4);
        max-width: calc(100% / 4);
    }
}