.Categories { display: flex; flex-direction: column; .header_link{ width: 90%; margin-inline: auto; } > main { padding-block: 30px; display: flex; gap: 3%; width: 90%; margin-inline: auto; } .Categories_left { width: 25%; display: flex; flex-direction: column; background: var(--bg); padding: 10px; > header { display: flex; justify-content: space-between; align-items: center; padding-inline: 16px; h4 { font-size: 1.4vw; font-weight: 500; color: var(--text); } h6 { font-size: 1.1vw; color: var(--primary); cursor: pointer; } } .filter_collapse { .ant-collapse-content>.ant-collapse-content-box{ padding: 0px 16px 15px 16px !important; } .ant-collapse-header { border-bottom: 1px solid #b4b4b4; } .ant-collapse-item-active{ transition: .4s ease-in-out; // background-color: red; .ant-collapse-header { border-bottom: none; } border-bottom: 1px solid #b4b4b4; } .ant-collapse-item{ font-weight: 500 !important; } } } .Categories_Right { display: flex; flex-direction: column; gap: 30px; width: 90%; > header { display: flex; justify-content: space-between; // height: 40px; width: 95%; .filtered_items { display: flex; gap: 10px; flex-wrap: wrap; width: 80%; } .filtered_item { @include Shadow; border: 1px solid #191919; color: #191919; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; min-width: 140px; border-radius: 5px; gap: 10px; svg { font-size: 20px; border-radius: 20px; } } .FillterSelect{ .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{ border: none; color: black !important; } .ant-select-single.ant-select-lg.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-lg.ant-select-show-arrow .ant-select-selection-placeholder{ color: black !important; } .ant-select-arrow{ color: black; } } } > main { display: flex; flex-wrap: wrap; gap: 40px; } .Pagination { width: 100%; display: flex; justify-content: flex-end; } } .CheckboxFilter { display: flex; flex-direction: column; gap: 10px; } } .show_on_responsive { display: none; } .ant-collapse-header-text{ font-weight: 500 !important; } .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{ padding: 0px 28px ; } .ant-pagination .ant-pagination-item a{ color: var(--white); } .swiper{ direction: ltr !important; } @media screen and (max-width: 1000px) { .show_on_responsive { display: inline; } .Categories { display: flex; flex-direction: column; > main { padding-block: 30px; display: flex; gap: 2%; width: 90%; margin-inline: auto; } .Categories_left { width: 30%; display: flex; flex-direction: column; background: var(--bg); gap: 20px; display: none; > header { display: flex; justify-content: space-between; align-items: center; height: 40px; h4 { font-size: 1.7vw; font-weight: 500; color: var(--text); } h6 { font-size: 1.5vw; color: var(--primary); cursor: pointer; } } } .Categories_Right { display: flex; flex-direction: column; gap: 20px; width: 100%; > header { display: flex; justify-content: space-between; height: 40px; align-items: center; .filtered_items { display: flex; gap: 20px; flex-wrap: wrap; width: 70%; } .filtered_item { @include Shadow; border: 1px solid #191919; color: #191919; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; width: 150px; border-radius: 5px; svg { font-size: 20px; } } } > main { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; } .Pagination { width: 100%; display: flex; justify-content: flex-end; } } .CheckboxFilter { display: flex; flex-direction: column; gap: 10px; } } .remove_on_responsive { display: none !important; } .filtered_item { @include Shadow; border: 1px solid #191919; color: #191919; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; width: 150px; border-radius: 5px; svg { font-size: 20px; } } .CheckboxFilter { display: flex; flex-direction: column; gap: 10px; } .filter_collapse { .ant-collapse-header { border-bottom: 1px solid #b4b4b4; } } } .ant-checkbox .ant-checkbox-inner{ border: 2px solid #A7A7A7; } .ant-checkbox-checked .ant-checkbox-inner{ background-color: red; color: red !important; border: 2px solid red !important; } .category_page{ @include Flex; flex-direction: column; h1{ font-weight: bold; } } .CategoriesSlider{ margin-block: 50px !important; }