.section-topbar { background: linear-gradient(-127deg, #00000000 0%, #00000033 100%), linear-gradient(98deg, #ffffff00 0%, #ffffff33 100%), #6927ff; }
.section-topbar > .wrapper { padding: 38px 15px; display: flex; justify-content: space-between; align-items: center; }
.section-topbar > .wrapper > .left { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-right: 100px; }
.section-topbar > .wrapper > .left > a { flex-shrink: 0; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 18px 24px; background-color: #f5f5f5; border-radius: 9999px; outline: none; color: #494949; border: 1px solid #f5f5f5; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.section-topbar > .wrapper > .left > a * { fill: #494949; transition: fill 0.3s; }
.section-topbar > .wrapper > .left > a:hover { background-color: #84a113; border-color: #000; color: #000; }
.section-topbar > .wrapper > .left > a:hover * { fill: #000; }
.section-topbar > .wrapper > .left > a.active { background-color: #9fc119; border-color: #000; color: #000; }
.section-topbar > .wrapper > .left > a.active * { fill: #000; }
.section-topbar > .wrapper > .right  { display: flex; align-items: center; gap: 12px; }
.section-topbar > .wrapper > .right > .clear { outline: none; border: none; background-color: transparent; flex-shrink: 0; }
.section-topbar > .wrapper > .right > .clear * { transition: fill 0.1s; fill: #ffffffe6; }
.section-topbar > .wrapper > .right > .clear:hover * { fill: #9fc119; }
.section-topbar > .wrapper > .right > .search-box { width: fit-content; background-color: #fff; border-radius: 9999px; padding: 18px 24px; display: flex; justify-content: center; align-items: center; border: 1px solid #494949; gap: 10px; }
.section-topbar > .wrapper > .right > .search-box > input { outline: none; border: none; width: 100%; max-width: 310px; color: #494949;  }
.section-topbar > .wrapper > .right > .search-box > input::placeholder { color: #494949; }

.section-filters-management {margin-top: 32px;}
.section-filters-management .content-box {display: flex; flex-direction: column; gap: 36px}
.section-filters-management .content-box .page-title {font-weight: 900; line-height: 1.2;}
.section-filters-management .content-box .filters-container {display: flex; flex-direction: column; gap: 8px;}
.section-filters-management .content-box .filters-container .top-box {display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 24px; row-gap: 12px;}
.section-filters-management .content-box .filters-container .top-box .filters-label {color: #494949; line-height: 1.2;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters {display: flex; align-items: center; gap: 8px; color: #000; text-decoration: none;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters .btn-text {display: inline-block; color: #ED7474; font-weight: 500; line-height: 1.2; transition: color .3s;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters:hover .btn-text {color: #6B27FF;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters .btn-icon {display: block; width: 6px; height: auto;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters .btn-icon path {transition: fill .3s;}
.section-filters-management .content-box .filters-container .top-box .btn-clear-filters:hover .btn-icon path {fill: #6B27FF;}
.section-filters-management .content-box .filters-container .filters-box {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.section-filters-management .content-box .filters-container .filters-box .single-filter {display: block; flex-shrink: 0; width: 100%; max-width: max-content; padding: 12px 16px; background-color: #EFE7FF; color: #494949; text-decoration: none; line-height: 1.2; border-radius: 250px; transition: background-color .3s;}
.section-filters-management .content-box .filters-container .filters-box .single-filter:hover {background-color: #6B27FF; color: #FFF;}
.section-filters-management .content-box .filters-container .filters-box .single-filter.active {background-color: #6B27FF; color: #FFF;}

.section-categories-listing {position: relative; margin-top: 24px;}
.section-categories-listing .single-group {display: flex; flex-direction: column; gap: 12px; margin-top: 32px; opacity: 1; transition: opacity .3s ease;}
.section-categories-listing .single-group:first-child {margin-top: 0;}
.section-categories-listing .single-group.hidden {display: none !important;}
.section-categories-listing .single-group.fade-in {animation: fadeInUp .5s ease forwards;}
.section-categories-listing .single-group .group-title {line-height: 1.2;}
.section-categories-listing .single-group .boxes-wrapper {display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; max-width: 100%;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container {display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; padding: 2px;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box {display: flex; flex-direction: column; gap: 8px; color: #000; text-decoration: none; border-radius: 40px;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .img-box {overflow: hidden; max-height: 245px; border-radius: 40px 40px 0 0; aspect-ratio: 1 / 1;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .img-box .img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box:hover .img-box .img {transform: scale(1.15) rotate(3deg);}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .content-box {display: flex; flex: 1; flex-direction: column; gap: 32px; padding: 24px; background-color: #F5F5F5; border-radius: 0 0 40px 40px; transition: background-color .3s;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box:hover .content-box {background-color: #6B27FF;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .content-box .category-name {color: #000; line-height: 1.2; transition: color .3s;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box:hover .content-box .category-name {color: #FFF;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .content-box .data-value {margin-top: auto; color: #494949; line-height: 1.2; transition: color .3s;}
.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box:hover .content-box .data-value {color: #FFF;}

.section-links { display: block; padding: 0px 20px; }
.section-links { background-color: #f5f5f5; margin-bottom: -30px; margin-top: 80px; }
.section-links > .wrapper { padding: 32px 0px; }
.section-links > .wrapper > .top { display: grid; grid-template-columns: repeat(4, 1fr); }
.section-links > .wrapper > .top > .column { display: flex; flex-direction: column; gap: 8px; }
.section-links > .wrapper > .top > .column > a { text-decoration: none; color: #494949; width: fit-content; }
.section-links > .wrapper > .top > .column > a:hover { color: #6b27ff; text-decoration: underline; }
.section-links > .wrapper > a { display: flex; padding-top: 8px; text-decoration: none; font-weight: 700; color: #6b27ff; justify-content: center; align-items: center; gap: 8px; width: fit-content; transition: color 0.3s; }
.section-links > .wrapper > a > svg * { transition: stroke 0.3s; }
.section-links > .wrapper > a:hover { color: #9fc119; }
.section-links > .wrapper > a:hover > svg * { stroke: #9fc119; }

@keyframes fadeInUp {
		0% {opacity: 0; transform: translateY(15px);}
		100% {opacity: 1; transform: translateY(0);}
}

@media all and (max-width: 1600px) {
		.section-categories-listing .single-group .boxes-wrapper .boxes-container {gap: 16px;}
		.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box {gap: 6px; border-radius: 32px;}
		.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .img-box {max-height: 185px; border-radius: 32px 32px 0 0;}
		.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .content-box {gap: 24px; padding: 16px; border-radius: 0 0 32px 32px;}
		.section-topbar > .wrapper {padding: 16px 15px;}
		.section-topbar > .wrapper > .search-box {padding: 12px 15px;}
		.section-topbar > .wrapper > .left > a {padding: 12px 16px;}
}

@media all and (max-width: 1400px) {
		.section-categories-listing .single-group .boxes-wrapper .boxes-container {grid-template-columns: repeat(5, 1fr);}
}

@media all and (max-width: 1200px) {
		.section-categories-listing .single-group .boxes-wrapper .boxes-container {grid-template-columns: repeat(4, 1fr);}
}

@media all and (max-width: 992px) {
		.section-categories-listing .single-group .boxes-wrapper .boxes-container {display: flex; gap: 0; padding: 0;}
		.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .img-box {aspect-ratio: auto;}
		.section-links > .wrapper > .top { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media all and (max-width: 767px) {
    .section-topbar > .wrapper { flex-direction: column; gap: 16px; }
    .section-topbar > .wrapper > .left { flex-direction: column; width: 100%; margin: 0; }
    .section-topbar > .wrapper > .left > a { width: 100%; }
    .section-topbar > .wrapper > .right { width: 100%; }
    .section-topbar > .wrapper > .right > .search-box { width: 100%; }
    .section-topbar > .wrapper > .right > .search-box > input { width: 100%; max-width: 100%; }
}

@media all and (max-width: 680px) {
    .section-topbar > .wrapper > .search-box > input { min-width: 0px; }
}

@media all and (max-width: 576px) {
	.section-categories-listing .single-group .boxes-wrapper .boxes-container .single-box .img-box {max-height: 150px;}
	.section-links > .wrapper > .top { grid-template-columns: 1fr; }

}